Wordpress und WooCommerce Code Snippet (PHP, CSS, JavaScript, HtmL):

WooCommerce Webshop aufbauen und individuell anpassen mit Code Snippets

Kommentar verfassen / Wordpress

Für die individuelle Anpassung von WordPress und dem eCommerce Plugin WooCommerce muss man häufig Änderungen bzw. Erweiterungen am PHP Code der Webseite vornehmen. Standardmäßig trägt man den PHP Code als Snippet in die functions.php (wp-content/themes/DeinTheme/functions.php) der Webseite ein. Das ist zwar eine einfach und schnelle Methode, deren Nachteil liegt jedoch darin, dass umso mehr Snippets hinzukommen, es auch umso unübersichtlicher wird. Zudem läuft man Gefahr bei fehlerhaften Änderungen in der function.php die gesamte Webseite lahmzulegen und dann geht die Fehlersuche los, die zeitaufwendig sein kann.

Aus diesem Grund bietet es sich an ein Plugin zum einfügen von Snippets zu verwenden. Mit diesem Plugin kann man dann im Backend von WordPress alle Snippets einfügen und verwalten. Man kann sie einzeln de- und aktivieren und somit auch gut aufheben wenn man sie nicht mehr benutzt. Ich verwende dazu das kostenlose Plugin “Code-Snippets“, dass über einen Testmodus verfügt und bei Fehlermeldungen die Ausführung des Codes automatisch verhindert.

Inhaltsverzeichnis

01. Tabs von der WooComerce Produktseite entfernen

Auf der WooCommerce Produktseite befinden sich bereits standardmässig einige Produkttabs wie z.B. “Beschreibung”, “Bewertungen” und “Zusätzliche Informationen”, die manuell mit weiteren Tabs ergänzt werden können oder bei der Verwendung von bestimmten Plugins automatisch ergänzt werden. Das ist nicht immer gewollt Produkttabs wie “Produktsicherheit” braucht es vielleicht nicht unbedingt. Um die Tabs möglichst schlank zu halten habe ich einige Produkttabs ausblenden – nur noch die Tabs für “Beschreibung” und “Bewertung” sollten angezeigt werden. Den entsprechenden PHP Code habe ich in der WooCommerce Snippet Datenbank von WOOExperte gefunden und etwas erweitert, das fertige Snippet sieht dann so aus:

/**
 * Tabs von der Woocomerce Produktseite entfernen
 */

function woo_remove_product_tab($tabs) {

   //unset( $tabs['description'] );             // Entfernt Tab "Beschreibung"

   //unset( $tabs['reviews'] );                 // Entfernt Tab "Bewertung"

   unset( $tabs['product_safety'] ); 	        // Entfernt Tab "Produktsicherheit"

   unset( $tabs['additional_information'] );    // Entfernt Tab "Zusätzliche Info."

               return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tab', 98);

02. Image Zoom auf Produktseite entfernen

Standardmäßig sind bei WooCommerce die Bilder auf der Produktseite mit einem Zoom Effekt versehen. Das bedeutet, sobald man mit der Maus oder auf dem Smartphone mit dem Finger über ein Produktbild fährt, wird das Bild automatisch heran gezoomt und man sieht nur noch einen kleinen Ausschnitt davon. Insbesondere auf dem Smartphone kann das sehr nervig sein und stört das Erlebnis der Webseitenbesucher. Da die Bildergalerie auch bereits über eine Lightbox verfügt, in der man manuell an das Bild heran zoomen kann brauchte ich die Funktion nicht und habe mich dazu entschieden diese zu entfernen. Zur Deaktivierung des Zoom Effekts habe ich dieses kurze Code Snippet verwendet:

/**
 * Remove Image Zoom |
 */

function remove_image_zoom_support() {

    remove_theme_support( 'wc-product-gallery-zoom' );
}

add_action( 'wp', 'remove_image_zoom_support', 100 );

03. Metadaten für Produkte ausblenden

Für jedes Produkt kann man eine Vielzahl von Metadaten definieren, die bekanntesten davon sind Schlagwörter (Keywords), Produktkategorie und Artikelnummer. Es gibt aber noch weiter Metadaten wie Artikelnummer, Markennamen, MPN und weitere. Einige davon können durchaus interessant für die Besucher des Webshops sein und bringen einen Mehrwert der Kaufentscheidend sein kann. Andere Metadaten sind nur für den Betreiber des Shops interessant und unterstützen z.B. die interne Verlinkung der Webseite.

Mein Ziel war es im Bereich des Warenkorb-Buttons möglichst wenige überflüssige Metadaten anzuzeigen um den Käufer nicht mit Informationen zu erschlagen. Als wenig bis gar nicht relevante Informationen habe ich Metadaten wie Artikelnummer, MRN und Markennamen eingestuft und mich dazu entschieden diese auszublenden und die Metadaten bei meinen Produkten auf die nötigsten zu reduziert. In dem Fall kommt ein CSS Code Snippet zum Einsatz, mit dem die entsprechenden Elemente ausgeblendet werden. Das nachfolgende CSS blendet die Artikelnummer, die MPN und den Markennamen auf der Produktseite aus:

/* Artikelnummer, MPN und Marke auf Produktseite ausblenden*/

.sku_wrapper {
display: none !important;
}

.cr_mpn {
display: none !important;
}

.cr_brand {
display: none !important;
}

Auf Artversium.com biete ich in meinem Webshop auch Produktvarianten an, dass bedeutet, man kann man z.B. Aufkleber in verschiedenen Mengen und T-Shirts in verschiedenen Größen kaufen. Möchte der Kunde ein Produkt mit verschiedenen Varianten kaufen, trifft er die Auswahl der gewünschten Variante über ein Dropdown Menu. Für das Dropdown Menu ist ein bestimmter Anzeigewert standradmässig festgelegt (z.B. T-Shirt Größe S), auf den man es wieder zurücksetzen kann. Die Funktion löst man durch das Anklicken eines einfachen Textlink – mit “Clear” bezeichnet – unter dem Menu aus. Um den Clear-Textlink zu entfernen kann man das folgende PHP Snippet verwenden:

/**
 * Hide Clear Link |
 */
 
add_filter( 'woocommerce_reset_variations_link', '__return_empty_string', 9999 );

05. Position der Legal-Checkbox (AGB, Widerrufsbelehrung) anpassen

Im Checkout-Prozess muß der Kunde bestätigen, dass er sich mit den rechtlichen Rahmenbedingungen (wie die AGB und die Widerrufsbelehrung) des Webshops einverstanden erklärt. Standardmäßig ist dafür eine Checkbox mit kurzer Beschreibung vorgesehen, die zwischen Überschrift und Kaufübersicht platziert ist. Gängiger ist es jedoch den Hinweis direkt über dem Kaufen-Button zu platzieren. Potenzielle Käufer sind es gewohnt den Hinweis an dieser Stelle, bzw. am Ende der Seite zu finden und nehmen ihn dort auch besser wahr. Das ist wichtig, denn der der Kunde muß vor dem Kaufen bestätigen, dass er die Rechtsbelehrungen akzeptiert, indem er die Checkbox aktiviert – andernfalls erhält er nach dem Klicken auf den Kaufen-Button eine Fehlermeldung und die Seite wird neu geladen. Um die Legal-Checkbox neu zu positionieren habe ich das folgenden PHP Snippet verwendet: 

add_action( 'init', 'my_child_move_legal_checkboxes', 50 );

function my_child_move_legal_checkboxes() {

	// Remove
	remove_action( 'wpmc-woocommerce_order_review', 'woocommerce_gzd_template_render_checkout_checkboxes', 10 );

	// Right before submit button
	add_action( 'woocommerce_gzd_review_order_before_submit', 'woocommerce_gzd_template_render_checkout_checkboxes', 10 );

}

WooCommerce fügt standardmäßig Links zu Produktbildern hinzu, die eine Lightbox öffnen. Für physische Produkte ist diese Funktion oft sinnvoll, da sie es ermöglicht, die Produkte größer und detaillierter zu betrachten. Für virtuelle Produkte oder Dienstleistungen ist sie jedoch meist überflüssig. Da es keinen zusätzlichen Mehrwert bietet, kann sie die Benutzererfahrung eher stören. Um die Bedienung für den Kunden einfach und übersichtlich zu halten, sollten unnötige Funktionen entfernt werden. Mit diesem einfachen PHP-Snippet kannst du diese Funktion deaktivieren:

function sio_remove_product_image_link( $html, $post_id ) {
    return preg_replace( "!<(a|/a).*?>!", '', $html );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'sio_remove_product_image_link', 10, 2 );

Zum Schluß möchte ich noch sagen nur weil die einzelnen Snippets bei mir funktionieren, gebe ich keine Garantie darauf das sie es auch bei euch tun. Möglicherweise müßt ihr kleine Änderungen vornehmen, weil bei euch z.B. die CSS-Klasse eines Elements anderes definiert ist.

Kommentar verfassen

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

Warenkorb
Nach oben scrollen