Es naht der Black Friday und der Cyber Monday. Deshalb bat mich ein Kunde, seinen (von mir erstellten) WordPress WooCommerce-Shop ein wenig zu optimieren.
Ein Wunsch lautete, dass das Angebot auch diesen Specials zugeordnet wird.
WooCoomerce ist beim Rabatt-Angebote erstellen ja recht angenehm zu konfigurieren. Man gibt einen Angebotspreis und optional ein Angebotszeitraum ein und schon macht das Design in der Regel alles von selbst.
Doch wenn man mit seinen Standard-Änderungen nicht zufrieden ist, wird es manchmal erstaunlich komplex.
Der Wunsch meines Kunden war, das Angebots-Label zu ändern. Also hauptsächlich den Text.
Erst dachte ich mir, das muss man doch irgendwo in den Einstellungen oder im Theme ändern können. Doch da gab es bei mir keine Einstellung. Mag sein, dass es bei spezialisierten WooCommerce-Themes dazu eine Einstellung gibt und du mein Problem deshalb nicht nachvollziehen kannst. Jedoch ich habe mir einen Wolf gesucht.
Also kurz eine Google-Suche gestartet. Erst mal nichts gefunden. Dann habe ich versucht es mit CSS selbst zu lösen. Das Problem ist aber, dass der Text keine eigene Klasse hat, also kann man nur einen Text anhängen und ihn nicht ersetzen. Wenn du also kein Problem damit hast, dass dein Text mit “Angebot!” beginnt, ist das die simpelste Lösung:
Angebots-Label mittels CSS manipulieren
Dazu gehst du in deinen Theme-Customizer (im Dashboard -> Theme -> Customizer). Dort findet sich der Eintrag “Custom CSS”.
Hier folgenden CSS Code hinzufügen:
.onsale:after {
content: ' -30 % Black Friday Deal';
}In dem “content” Bereich dann den Text deiner Wahl einfügen und zwar mit Leerzeichen am Anfang. In meinem Fall erscheint dann “Angebot! -30% Black Friday Deal” als Text im Angebots-Label.
Das hat mich noch nicht ganz zufriedengestellt und ich dachte mir, das muss doch irgendwie gehen.
Angebots-Label Text mittels Code ändern
Deshalb bin ich auf die Suche gegangen und habe einen sogenannten Filter dafür gefunden. Da die Suche länger als gedacht gedauert hat, habe ich mich für diesen Blogpost entschieden. Vielleicht erspare ich dir dadurch ja viel Suchzeit.
Nun muss man sich aber ein wenig grundlegend auskennen, wie man Code in WordPress einbaut. Das hier wäre die Funktion.
add_filter('woocommerce_sale_flash', 'woocommerce_custom_sale_label_text', 10, 3);
function woocommerce_custom_sale_label_text($text, $post, $_product)
{
return '<span class="onsale">50% Special-Rabatt</span>';
}
Hier kannst du den Text im “return” – Rückgabewert ändern. Man könnte so auch eine eigene CSS-Klasse einbauen, wenn man will. Wenn dir das alles nichts sagt, ändere nur den Text “50% Special-Rabatt” dementsprechend.
Den Code selbst musst du entweder in die functions.php Datei deines Themes einbauen (am besten in ein Child-Theme. Dafür hab ich noch keine Anleitung). Ich persönlich habe aber für alle meine Code-Manipulationen mir ein eigenes kleines WordPress Plugin geschrieben (zur Anleitung). Ich finde das übersichtlicher und sauberer.
Also meine Empfehlung wäre ein eigenes Plugin und dort den Code reinkopieren. Viele Wege führen jedoch bekanntlich nach Rom.
 Ich freue mich von dir zu hören! | Du kommst bei deinem Projekt nicht weiter oder brauchst einen Boost? Dann lass dir von mir helfen zum Beispiel bei: ► Beratung für Selbständige, Gründer & Ideenschmiede Egal, ob du erste Tipps brauchst. Einmal über deine Idee reden möchtest oder mit mir das Konzept für das nächste Facebook ausarbeiten willst. ► Entwicklung von Software, APPs & Webseiten Beispielsweise: WordPress Shops & Plugins, (Gaming-)Apps, Datenbank-Applikationen oder andere smoothe Anwendungen! Mehr Infos, Preise und Kontaktmöglichkeiten findest du hier! |
