• Germanized
  • Preisauszeichnung

Preisanzeige bei variablen Produkten

Bei variablen Produkten zeigt WooCommerce standardmäßig Preisspannen (von-bis-Preis) an. Diese Preisspannen werden direkt unterhalb des Titels ausgegeben und müssen von Germanized mit den rechtlich vorgesehenen Preisauszeichnungen ausgezeichnet werden.

Variable Produkte beinhalten sogenannte Varianten (bzw. Variationen), z.B. eine konkrete Größe und/oder Farbe eines Produktes. Jede Variante hat einen konkreten Preis und u.U. eine abweichende Lieferzeit oder Steuersatz. Standardmäßig fügt WooCommerce den konkreten Preis der Variante zusätzlich zur Preisspanne des Elternproduktes direkt oberhalb des Warenkorb-Buttons ein. Das würde dazu führen, dass an dieser Stelle erneut alle für den Preis relevanten Preisauszeichnungen aufgeführt werden müssten.

Ohne Germanized
Mit Germanized

Aus diesem Grund ersetzt Germanized die Preisspanne mit dem konkreten Preis der Variante und versteckt den (zusätzlich eingefügten) Block oberhalb des Warenkorb-Buttons.

Problembehandlung

Manche Themes oder Pagebuilder verändern das HTML-Markup von WooCommerce so stark, dass es für Germanized nicht mehr möglich ist, den korrekten Produktpreis auf der Produktseite zu identifizieren und zu ersetzen. Das führt dann dazu, dass der Preis der Variante nicht angezeigt wird. Welche Erweiterung das konkret auslöst, kannst du testen, indem du folgendermaßen vorgehst:

  1. Aktiviere ein Standard-Theme (z.B. Storefront oder TwentyX). Wird nun nach Auswahl der Variante der Preis korrekt ersetzt?
  2. Falls du einen Pagebuilder nutzt: Deaktiviere entweder das Plugin komplett oder sorge dafür, dass das Plugin auf der Produktdetailseite keine Änderungen vornimmt. Wird der Variantenpreis nun korrekt angezeigt?

Hast du herausgefunden, welche Erweiterungen diese Probleme verursacht, kannst du dich mit der Problemlösung beschäftigen. Dafür steigen wir nun ein wenig in den technischen Part von Germanized ein, der den Preis automatisch ersetzen soll.

Jedes Mal, wenn eine bestimmte Variation ausgewählt wurde, nutzt Germanized das von WooCommerce erzeugte Event show_variation um Anpassungen auf der Produktseite vorzunehmen. Dabei wird auf der Produktseite innerhalb des Wrappers .type-product das erste, sichtbare p Element mit der Klasse .price gesucht. Der Wrapper wird standardmäßig von WooCommerce um den Inhalt des gesamten Produktes gesetzt, sodass wir damit sichergehen, dass wirklich der Preis des aktuell aufgerufenen Produktes (und nicht etwas Preise von ähnlichen oder verwandten Produkten, die ebenfalls auf der Seite erscheinen können) ersetzt wird.

Tipp: Stelle sicher, dass auch wenn du einen Pagebuilder nutzt, dein Produktpreis mit der Klasse price versehen wird. Falls das nicht der Fall ist, füge die Klasse manuell über die Eigenschaften des Builders hinzu. Stelle ebenfalls sicher, dass ein Eltern-Block des Preises die Klasse type-product besitzt.

Suchelement anpassen

Manche Themes fügen z.B. eine Navigation zwischen mehreren Produkten ein über die man zum nächsten bzw. vorherigen Produkt wechseln kann. Zum Teil wird hier auch der Preis angezeigt, sodass der falsche Preis bei Auswahl der Variante ersetzt wird. Auch das führt dazu, dass der eigentliche von-bis-Preis nicht ersetzt wird, da ja nur der erste, sichtbare Preis innerhalb des Wrappers ersetzt wird. Über einen Filter in der functions.php deines Child-Themes kannst du den Suchbereich von Germanized speziell festlegen bzw. spezifizieren:

add_filter( 'woocommerce_gzd_add_to_cart_variation_params', 'my_child_adjust_gzd_variation_params', 10 );

function my_child_adjust_gzd_variation_params( $params ) {
   // Adjust the price selector to only look for span-tags
   $params['price_selector'] = 'span.price';
   // Maybe adjust the wrapper class too
   $params['wrapper'] = '.type-product';
   return $params;
}

Nun sucht Germanized speziell nach einem Div-Element der Klasse .price, d.h. das Preiselement, nach dem gesucht wird, wurde von p.price auf span.price angepasst.

Manche Themes/Pagebuilder verwenden auch div.price als Struktur für den Preis. Dann müsstet ihr das Snippet nur etwas anpassen:

add_filter( 'woocommerce_gzd_add_to_cart_variation_params', 'my_child_adjust_gzd_variation_params', 10 );

function my_child_adjust_gzd_variation_params( $params ) {
   // Adjust the price selector to only look for div-tags
   $params['price_selector'] = 'div.price';
   // Maybe adjust the wrapper class too
   $params['wrapper'] = '.type-product';
   return $params;
}

Mit Hilfe der Chrome Developer Tools (bzw. der Developer Tools des Browsers deines Vertrauens) kannst du den Wrapper einfach bestimmen bzw. suchen.

Suche des Standard-Wrappers per Developer Tools

Für manche Themes bzw. Pagebuilder existieren solche Snippets bereits. Schaue dir gern verfügbare Snippets für deine functions.php auf GitHub an.