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?