Wie kann ich den Kaufen-Button gestalterisch anpassen?

Der "Kaufen-Button Shortcode", welcher im Bearbeitungsmodus deines Produktes bei der Optionen-Box "Produkt Einstellungen" zu finden ist, kannst du an jede beliebige Stelle in deiner Spreadmind Webseite einbinden. 

Standardmäßig sieht der Kaufen-Button Shortcode so aus: 

[purchase_link id="1234" text="In den Warenkorb" style="button" color="blue"]

Button-Farbe über den Shortcode anpassen:

Über die Variable color kannst du die Button-Farbe anpassen. Dabei stehen dir folgende Werte (nachfolgend fett markiert) zur Verfügung:

  • white = weiß
  • gray = grau
  • blue = blau
  • red = rot
  • green = grün
  • yellow = gelb
  • orange = orange
  • dark-gray = dunkel grau
  • inherit = Standardeinstellung

Button-Farbe über einen CSS-Code anpassen:

Kopiere dazu den folgenden CSS-Code und füge ihn im Backend deiner Spreadmind Webseite unter "Design" > "Theme Optionen" > Reiter "Allgemeines" am Ende der Seite bei "Eigene CSS" ein:

.edd_purchase_submit_wrapper a.edd-add-to-cart, .et-db #et-boc .et-l .et_pb_button.button.blue { background-color: #123456 !important; border-color: #123456 !important; }

Tausche den Platzhalter #123456 durch deinen eigenen Farbwert aus. Beispiel: #ffffff für weiß oder #000000 für schwarz. 

  • background-color = Hintergrundfarbe des Buttons
  • border-color = Rahmenfarbe des Buttons
  • Selektor 1 mit .edd_purchase_submit_wrapper a.edd-add-to-cart = Buttons auf Produktseite
  • Selektor 2 mit .et-db #et-boc .et-l .et_pb_button.button.blue = Buttons auf den Seiten, auf welchen der Kaufen-Button-Shortcode eingebunden wird
Um die Schriftfarbe des Buttons anzupassen, musst du einen weiteren CSS-Code nutzen. Überprüfe dafür zuerst, welche Farb-Variable bei deinem Shortcode (s.o.) hinterlegt ist.
Beispiel: [purchase_link id="1234" text="In den Warenkorb" style="button" color="blue"]
Farb-Variable = blue = blau. Der CSS-Code um die Schriftfarbe anzupassen sieht dann so aus:
.edd-submit.button.blue { color: #000000 !important; }

So lautet der CSS-Code für die weiteren Farb-Varianten (s.o.):

.edd-submit.button.red { color: #000000 !important; }
.edd-submit.button.green { color: #000000 !important; }
.edd-submit.button.yellow { color: #000000 !important; }
.edd-submit.button.orange { color: #000000 !important; }
.edd-submit.button.dark-gray { color: #000000 !important; }

Button-Größe anpassen:

Eine andere Möglichkeit wäre, das Divi Modul "Button" zu benutzen. Denn dies kannst du ganz nach deinen Vorstellung individuell anpassen. Mehr dazu erfährst du hier:

Wie kann ich den Kaufen-Button auf einer anderen Webseite einbinden?

Brauchst du noch weitere Hilfe? Kontaktiere das Spreadmind Support Team Kontaktiere das Spreadmind Support Team