WooCommerce Produktansichten gestalten

Da wir immer mehr mit Onlineshops mit WooCommerce machen und WooCommerce als Shopsystem immer beliebter wird, möchte ich heute über eine wichtige Anpassung schreiben: Die Gestaltung einer eigenen Einzelproduktansicht. Damit meine ich die Ansicht eines einzelnen Produktes samt den Feldern, die es ausmacht.

Kopieren der Woocommerce Templates

Im ersten Schritt müssen die gewünschten Templatedateien aus wp-content/plugins/woocommerce/templates in das eigene Theme oder Child-Theme kopiert werden und zwar in ein Unterverzeichnis des Themeverzeichnisses.

Dateien wie:

archive-product.php

*single-product.php *

taxonomy-product_cat.php werden in das Verzeichnis wp-content/themes/<DeinTheme>/woocommerce/ kopiert und schon kann man die Ansichten anpassen ohne durch kleinere WooCommerce Updates Probleme erwarten zu müssen.

Anpassen der Hooks

Ein konkretes Beispiel: Vor jedem Preis soll der Text „Ab“ erscheinen – d.h. anstatt 39€ soll Ab 39€ stehen.

Dafür öffne ich die single-product.php, welche auf die content-single-product.php verweist. Dort finde ich den passenden Hook namens woocommerce_single_product_summary der die Funktion woocommerce_template_single_price aufruft, welche ich nutzen möchte um vor den Preis den Text „Ab“ zu schreiben.

<?php /**

• woocommerce_single_product_summary hook
• @hooked woocommerce_template_single_title - 5
• @hooked woocommerce_template_single_rating - 10
• @hooked woocommerce_template_single_price - 10
• @hooked woocommerce_template_single_excerpt - 20
• @hooked woocommerce_template_single_add_to_cart - 30
• @hooked woocommerce_template_single_meta - 40
• @hooked woocommerce_template_single_sharing - 50 */ do_action( 'woocommerce_single_product_summary' ); ?> Um die Anzeige des Preises zu verändern entferne ich zuerst die bestehende Funktion woocommerce_template_single_price aus der Liste der Funktionen, die durch das Ausführen des Hooks woocommerce_single_product_summary aufgerufen werden. Den folgenden Code kann man in die functions.php des eigenen Themes schreiben.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); Danach binde ich meine eigen neue Funktion namens starting_price an den Hook woocommerce_single_product_summary. Damit sieht der Code in der functions.php folgendermaßen aus.

add_action( 'woocommerce_single_product_summary', 'starting_price', 10 ); Jetzt noch die Funktion starting_code und schon sieht die functions.php so aus:

function starting_price( ) { global $post, $product;

echo '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">'; echo '<p class="price">' . __( 'Ab ', 'woocommerce' ) . $product->get_price_html() . '</p>'; echo '<meta itemprop="price" content="' . $product->get_price() . '" />'; echo '<meta itemprop="priceCurrency" content="' . get_woocommerce_currency() . '" />'; echo '</div>'; } Der Code für diese Funktion kommt aus der price.php aus dem wp-content/plugins/woocommerce/templates/single-product Ordner. Die einzige Änderung ist die Ausgabe von ‚Ab‘:

echo '<p class="price">' . __( 'Ab ', 'woocommerce' ) . $product->get_price_html() . '</p>'; Die Änderung sieht im Frontend dann wie folgt aus:

[one_half first]Vorher

[/one_half]

[one_half]Nachher

[/one_half]

 

Ich hoffe diese kurze Anleitung gibt die notwendigen Hinweise für eine eigene Anpassung von WooCommerce die auch nach einem Plugin-Update erhalten bleibt.