Um die Farbe der WooCommerce-Schaltflächen zu ändern, müssen wir die Standarddatei style.css der Schaltflächen ändern oder ersetzen. Dazu müssen wir a hinzufügen benutzerdefinierten CSS-Code zu unserem WordPress-Theme für Kinder.

Es gibt zwei Möglichkeiten, dies zu tun:

  • Fügen Sie der untergeordneten theme style.css-Datei ein benutzerdefiniertes CSS hinzu
  • Verwenden Sie einige Plugins, um benutzerdefinierten CSS-Code in Ihre Webseiten einzufügen.

Schritt 1: Installieren Sie das Plugin auf Wordpress einfache benutzerdefinierte CSS und aktivieren

Wir werden a . verwenden WordPress Plugin um den CSS-Code in die Seiten von a einzufügen WooCommerce Online-Shop. Sie können das Plugin herunterladen: Einfacher Benutzerdefinierte CSS

Sie können unser Tutorial auf lesen Installation und Aktivierung des WordPress-Plugins.

Nach dem Aktivieren des Plugins wird dem Menü ein neues Untermenü hinzugefügt Apparence :

Benutzerdefinierte CSS Menu Wordpress-Plugin

Wenn Sie auf diesen Abschnitt zugreifen, gelangen Sie zu einer Schnittstelle mit einem Textfeld, in das Sie benutzerdefinierten CSS-Code eingeben können.

Schnittstelle Wordpress-Plugin einfache benutzerdefinierte CSS

Gib folgendes CSS in das Textfeld ein und klicke dann auf " Benutzerdefinierten CSS".

.woocommerce #content input.button.alt: schweben, .woocommerce #respond Eingang # submit.alt: schweben, .woocommerce a.button.alt: Hover, .woocommerce button.button.alt: Hover, .woocommerce input.button. alt: schweben, .woocommerce-Seite #content input.button.alt: schweben, .woocommerce-input #respond # submit.alt: schweben, .woocommerce-Seite a.button.alt: schweben, .woocommerce-Seite-Taste. button.alt: schweben, .woocommerce-Seite input.button.alt: hover {background: red signifikant; background-color: red wichtig; Farbe: Weiß wichtig; text-shadow: transparent wichtig; box-shadow: none; border-color: #ca0606 wichtig; } .woocommerce #content Input.button: schweben, .woocommerce #respond Eingang # einreichen: schweben, .woocommerce a.button: Hover, .woocommerce button.button: Hover, .woocommerce input.button: Hover, .woocommerce-Seite # glücklich input.button: schweben, .woocommerce-input #respond # einreichen: schweben, .woocommerce-Seite a.button: schweben, .woocommerce-Seite button.button: schweben, .woocommerce-Seite input.button: hover {background : rot wichtig; background-color: red wichtig; Farbe: Weiß wichtig; text-shadow: transparent wichtig; box-shadow: none; border-color: #ca0606 wichtig; } .woocommerce #content Input.button, .woocommerce #respond Eingang # einreichen, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-Seite #content input.button, .woocommerce-Seite # # einreichen Eingabe reagiert, .woocommerce-Seite a.button, .woocommerce-Seite button.button, .woocommerce-Seite input.button {background: red signifikant; Farbe: Weiß wichtig; text-shadow: transparent wichtig; border-color: #ca0606 wichtig; } .woocommerce #content Input.button.alt: Hover, .woocommerce #respond Eingang # submit.alt: schweben, .woocommerce a.button.alt: Hover, .woocommerce button.button.alt: Hover, .woocommerce input.button .ALT: schweben, .woocommerce-Seite #content input.button.alt: schweben, .woocommerce-input #respond # submit.alt: schweben, .woocommerce-Seite a.button.alt: schweben, .woocommerce-Seite-Taste .button.alt: schweben, .woocommerce-Seite input.button.alt: hover {background: red signifikant; box-shadow: none; text-shadow: transparent wichtig; Farbe: Weiß wichtig; border-color: #ca0606 wichtig; }

Sie können jetzt auf Ihren Online-Shop zugreifen. Sie werden feststellen, dass sich die Farben der Schaltflächen tatsächlich geändert haben.

Um die Farbe der Schaltflächen so anzupassen, dass sie endlich das gewünschte Aussehen haben,

Eigenschaft ersetzen " backgroud: rot wichtig! Von a Farbe Ihrer Wahl. Aktualisieren Sie die Codes und greifen Sie erneut auf Ihren Online-Shop zu. Mit dem Styling, das wir Ihnen gerade zur Verfügung gestellt haben, können Sie die Struktur der Schaltflächen vollständig ändern.

Mit ein wenig Recherche können Sie einzigartige Schaltflächen mit einem Stil erstellen, der zu Ihnen passt Wordpress-Theme (vor allem, wenn letzteres nicht mit WooCommerce kompatibel ist).

in den Warenkorb Button Wordpress

Für das folgende Beispiel können Sie den folgenden CSS-Code verwenden.

.woocommerce #content input.button, .woocommerce #respond Eingang # einreichen, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-Seite #content input.button, .woocommerce-Seite #respond # einreichen Eingang, .woocommerce-Seite a.button, .woocommerce-Seite button.button, .woocommerce-Seite input.button {background-color: #6fba26; padding: 10px; Position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; Farbe: #fff; Hintergrund-Bild: linear-Gradienten (unten, RGB (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F Einsatz; Grenzradius: 5px; } .woocommerce #content input.button.alt: schweben, .woocommerce #respond Eingang # submit.alt: schweben, .woocommerce a.button.alt: Hover, .woocommerce button.button.alt: Hover, .woocommerce input.button .ALT: schweben, .woocommerce-Seite #content input.button.alt: schweben, .woocommerce-input #respond # submit.alt: schweben, .woocommerce-Seite a.button.alt: schweben, .woocommerce-Seite-Taste .button.alt: schweben, .woocommerce-Seite input.button.alt: Hover {top: 7px; Hintergrund-Bild: linear-Gradienten (unten, RGB (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: Einsatz 0px 1px 0px #0D496F, Einschub 0px -1px 0px #0D496F; Farbe: #156785; text-shadow: 0px 1px 1px rgba (255,255,255,0.3); Hintergrund: rgb (44,160,202); }

Für diejenigen, die die Leistung ihres Online-Shops im Hinblick auf die Umstellung oder den Verkauf von Produkten optimieren möchten,

Wir bieten auch 3 Premium WordPress Plugins an, die für diese Aufgabe entwickelt wurden.

1. WooCommerce Recover Abandoned Cart

Ihre Kunden Oft füllen sie ihre Körbe und verlassen sie: danke an WooCommerce Recover Verlassene Wagen Sie können sie kontaktieren, sie an das erinnern, was sie gekauft haben, und sie einladen, ihre Aktionen abzuschließen.

Stellen Sie verlassenen Wagen für Woocommerce wieder her

Legen Sie das Zeitintervall zwischen dem Verlassen eines Einkaufswagens und dem Senden einer personalisierten Erinnerungs-E-Mail an Ihren Kunden mit einem direkten Link zur Einkaufsseite fest, damit dieser sehen kann, worauf er sich befindet Punkt zu kaufen.

Herunterladen | Demo | Web-Hosting

2. WooCommerce Preis ausblenden & In den Warenkorb Button Plugin

Mit dem WooCommerce-Plugin zum Ausblenden von Preisen können Händler mehrere Regeln erstellen, um Preise auszublenden oder die Schaltfläche "In den Warenkorb" vor nicht angemeldeten Kunden oder Benutzern zu verbergen, die bestimmte Zugriffsrechte auf Ihre E-Commerce-Website haben.

Woocommerce verstecken Preis zum Warenkorb hinzufügen Button Plugin nach Benutzerrollen verstecken

Sie können den Preis und die Schaltfläche "In den Warenkorb" bei bestimmten Produkten oder in bestimmten Kategorien ausblenden. Sie können sie durch benutzerdefinierten Text oder eine Schaltfläche ersetzen, die sie zum führt  Kontaktformular. Sie können so viele Regeln erstellen, dass der Preis und die " Zu Panie hinzufügenr ”je nachdem was du willst.

Herunterladen | Demo | Web-Hosting

3. WooCommerce Währung Switcher

Mit diesem Plugin können Sie die Produktpreise in Echtzeit von einer Währung in eine andere umschalten.Woocommerce Währungsumschalter

Dies ist besonders wichtig im E-Commerce, da es sich an die ganze Welt richtet. Dieses Plugin stellt sicher, dass Ihre Kunden unabhängig von ihrem Standort immer in Ihrem Online-Shop bestellen können.

Herunterladen | Demo | Web-Hosting

Empfohlene Ressourcen

Entdecken Sie andere empfohlene Ressourcen, die Ihnen helfen werden Optimieren Sie die Leistung Ihres Online-Shops. 

Zusammenfassung

Hier ist ! Das ist alles für dieses Tutorial, das der Anpassung von Schaltflächen gewidmet ist In den Warenkorb legen von WooCommerce. Zögern Sie nicht, es mit Ihren Freunden auf Ihrem zu teilen soziale Netzwerke bevorzugt. 

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...