Springe zum Hauptinhalt

So passen Sie die WooCommerce-Schaltfläche "In den Warenkorb" an

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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 ein WordPress-Plugin verwenden, um 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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 Ihrem WordPress-Thema passt (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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

Download | 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" für bestimmte Produkte oder in bestimmten Kategorien ausblenden. Sie können sie durch personalisierten Text oder durch eine Schaltfläche ersetzen, die sie zum Kontaktformular führt. Sie können so viele Regeln erstellen, dass der Preis und die Schaltfläche automatisch ausgeblendet werden. " Zu Panie hinzufügenr ”je nachdem was du willst.

Download | 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.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Fazit

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.

... 

Dieser Artikel enthält Kommentare 8

  1. Guten Tag,
    Kann dasselbe Plugin mir helfen, die Farbe der Sterne "Kundenbewertungen" auf Woocommerce-Produktseiten zu ändern? Danke im Voraus

    1. Guten Tag,

      Sie müssen dazu CSS-Code verwenden. Ansonsten empfehle ich das Yellow Pencil Plugin, das Sie auf Codecanyon herunterladen können.

  2. Es ist fantastisch, einen Code vom Englischen ins Italienische zu übersetzen. CSS ist voller Fehler! Aber können wir das machen ?!

  3. Guten Abend, ich habe eine Frage. Wie ändern wir die Farbe des Preises in den Unterkategorien in WooCommerce ???

    Vielen Dank schon mal für deine Antwort.

    Nico

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
3 Aktien
Aktie3
tweet
Registrieren