Gutscheine für Ihre Kunden anzubieten ist eine großartige Möglichkeit, Verkäufe zu fördern und die Interaktion mit Ihrem WooCommerce-Shop zu steigern. Ob Rabatt, kostenloser Versand oder ein kostenloses Geschenk – Gutscheine sind eine hervorragende Möglichkeit, Kunden zum Kauf zu bewegen. Allerdings kann das Gutscheinfeld auf der WooCommerce-Warenkorbseite recht klein und eng sein, was zu einem suboptimalen Kundenerlebnis führt.
Glücklicherweise gibt es eine einfache Möglichkeit, das Gutscheinfeld zu erweitern und das Gesamterlebnis Ihrer Kunden zu verbessern. Mit wenigen einfachen Schritten können Sie das Gutscheinfeld auf Ihrer WooCommerce-Warenkorbseite schnell und einfach erweitern, was Ihren Kunden ein benutzerfreundlicheres Erlebnis ermöglicht.
Einleitung
Wenn Sie viele WordPress-Themes installieren, die behaupten, WooCommerce zu unterstützen, ist eines der großen Probleme (und eine meiner größten Beschwerden), dass niemand auf die Größe des Gutscheinfeldes auf der Warenkorbseite zu achten scheint.
Wenn Sie auf Ihrer Warenkorbseite unter 'short-unreadable-coupon-box-itis' leiden und etwas dagegen tun möchten, damit die Leute es auch benutzen können, dann sind Sie hier genau richtig!
Die Lösung ist relativ einfach, es ist nur etwas CSS und ich werde Ihnen zeigen, wie Sie die Lösung auf ein paar verschiedene Arten implementieren können.
So beheben Sie das kurze Gutscheinfeld auf Ihrer Warenkorbseite
Der erste Schritt ist, Google Chrome, Safari oder Firefox zu öffnen, eigentlich jeden modernen Browser.
Sie möchten mit der rechten Maustaste auf dieses Gutscheinfeld klicken und 'Untersuchen' (Inspect) auswählen.
Wenn Sie auf 'Untersuchen' klicken, öffnet sich die Entwicklertools, mit denen Sie Elemente auf der Seite untersuchen können.
Wenn Sie dies zum ersten Mal tun, machen Sie sich keine Sorgen, ich zeige Ihnen genau, was als Nächstes zu tun ist.
Es öffnet sich ein Gutscheinfeld wie dieses:
Die Stile sind es, was wir ändern wollen.
Lassen Sie uns ein wenig experimentieren, um sicherzustellen, dass wir beim ersten Versuch eine neue CSS-Regel mit der richtigen Breite erstellen. Das Gute ist, wenn Sie Änderungen in diesem Entwicklertools-Fenster vornehmen, werden sie auf der Website angezeigt (vorübergehend, bis Sie neu laden), sodass Sie testen können, was am besten funktioniert.
Klicken Sie auf die Schaltfläche 'Neue Stilregel' (New Style Rule):
Benennen Sie dann den hervorgehobenen Text wie folgt um:
.woocommerce-cart table.cart td.actions input#coupon_code
Nachdem Sie diesen Text eingegeben haben, drücken Sie die TAB-Taste auf Ihrer Tastatur, nicht Enter. Wenn Sie versehentlich Enter drücken, ist das in Ordnung, klicken Sie einfach zwischen die geschweiften Klammern { } und es wird eine neue Zeile zwischen den geschweiften Klammern eingefügt.
Fügen Sie die Regel wie folgt hinzu:
Spielen Sie mit dem Breitenwert (den 200px im Screenshot) herum, bis Sie mit dem Aussehen des Gutscheinfeldes auf dem Bildschirm zufrieden sind. Sie werden sehen, wie sich die Webseite aktualisiert, wenn Sie den Wert ändern.
Wenn Sie zufrieden sind, kopieren Sie den Text und fügen Sie ihn zur sicheren Aufbewahrung in Notepad (Windows) oder TextEdit (Mac) ein.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
Dies ist der von uns generierte CSS-Code und jetzt müssen wir ihn nur noch dauerhaft auf der Website installieren.
Installation der dauerhaften Korrektur für das Gutscheinfeld
Wenn Sie Erfahrung mit der Bearbeitung von CSS-Dateien haben, wissen Sie wahrscheinlich, dass es in jedem Theme-Verzeichnis, das Sie installieren, eine style.css-Datei gibt.
Idealerweise sollten Sie dies mit einem Child-Theme überschreiben und Ihre Änderungen dort installieren.
Aber wenn Sie keines davon haben, gibt es eine andere Möglichkeit, dies zu tun, und sie beinhaltet nicht die Bearbeitung von CSS-Dateien, die möglicherweise überschrieben werden, wenn Sie das Theme aktualisieren.
Es gibt ein Plugin namens Simple Custom CSS and JS. Dieses Plugin ermöglicht es Ihnen, alle kleinen CSS- und JavaScript-Anpassungen, die Sie an Ihrem Theme vornehmen müssen, zu verfolgen, ohne das Theme selbst bearbeiten zu müssen. Es ist sehr praktisch.
Installieren Sie es, indem Sie zu Plugins -> Neu hinzufügen gehen und danach suchen. Installieren & aktivieren.
Sie erhalten dann ein neues Menü im Backend:
Klicken Sie auf Benutzerdefiniertes CSS hinzufügen. Dies öffnet ein neues Fenster, in dem Sie den zuvor generierten Code eingeben können.
Geben Sie ihm einen Namen wie „Warenkorb-Gutschein-Box-Breiten-Fix“, damit Sie später auf einen Blick erkennen können, worum es ging, und fügen Sie Ihren Code in das vorgesehene Feld ein.
Es sollte so aussehen:
Und das ist alles!
Warum war das so wichtig?
Nun, Gutscheine sind eine Ihrer besten Marketingwaffen, und ohne die visuellen Hinweise zur Verwendung dieser Gutscheine sind Ihre Kunden gezwungen, danach zu suchen, wo sie den Code eingeben können.
Ich habe im Laufe der Jahre beobachtet, dass Kunden bei solchen Dingen ziemlich faul sein können und leicht aufgeben. Je offensichtlicher Sie etwas machen, desto besser werden Ihre Ergebnisse für diese Aktion sein.
In diesem Artikel haben wir uns also mit Schlüsselkonzepten befasst, um Ihre Gutscheincode-Eingabefeld zu beheben:
- So beheben Sie das kurze Gutscheinfeld auf Ihrer Warenkorbseite
- Installation der dauerhaften Korrektur für das Gutscheinfeld
Also, legen Sie los und probieren Sie diesen Fix aus, Sie schaffen das!
