WooCommerce – Text vom Angebots-Label ändern

Von | 22. November 2022

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.

Standard Angebtos-Label in WooCommerce
So sieht das Standard Angebots-Label in WooCommerce aus

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.

Angebots-Label mit CSS manipuliert.
Angebots-Label mit CSS manipuliert.

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>';
}
WooCommerce Label Text ändern mittels add_filter Code
WooCommerce Label Text ändern mittels add_filter Code

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.

Ich würde mich freuen, wenn du meinen Newsletter abonnieren würdest. Dann verpasst du auch keinen interessanten Beitrag mehr.

Benachrichtige mich:
Datenschutzbestimmungen *
Mein Newsletter informiert dich über Themen der Selbständigkeit, Bloggen, Marketing und Programmierung. Kann Werbung enthalten. Informationen zum Anmeldeverfahren, Versanddienstleister, statistischer Auswertung und Widerruf findest du in meinen Datenschutzbestimmungen


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.

Robert von Plötzlich-Selbständig.de Schwarz/Weiß Bild

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!

Schreibe einen Kommentar

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

Im Rahmen der Kommentarfunktion auf dieser Website werden neben Ihrem Kommentar auch Angaben zum Zeitpunkt der Erstellung des Kommentars und der von Ihnen gewählte Kommentatorenname gespeichert und auf der Website veröffentlicht. Ferner wird Ihre IP-Adresse mitprotokolliert und gespeichert. Diese Speicherung der IP-Adresse erfolgt aus Sicherheitsgründen und für den Fall, dass die betroffene Person durch einen abgegebenen Kommentar die Rechte Dritter verletzt oder rechtswidrige Inhalte postet.
Mehr Informationen zur Datenverarbeitung, der Rechtsgrundlage und Ihren Widerrufsrechten erhalten Sie in unserer Datenschutzerklärung