Sobald man die Standard-Funktionalität in WooCommerce bzw. den Checkout selbst anpassen möchte, kommt man kaum umhin, eines oder mehrere WooCommerce Snippets in der functions.php (des Child-Themes) abzuspeichern. Hier unser Überblick über die WooCommerce Snippets, die wir zum Teil auch auf Dr. Web im Einsatz haben. Die meisten Schnipsel entstammen übrigens der aktuellen WooCommerce Dokumentation.[1]
Kompatibilität:
- WordPress Version ab 4.6
- WooCommerce Version ab 3.xx
- PHP-Version 7.xx
Die Snippets kopierst du entweder in die functions.php deines aktiven Minimal WordPress-Themes oder legst dir ein seitenspezifisches Plugin für diesen Job an.
Bitte beachten: Mache dir vor jeder Änderung an der functions.php ein Backup der Datei. Ändere die Datei nicht über den Editor von WordPress. Geht etwas schief, hast du keinen Zugriff mehr auf deine Website. Führe deine Ergänzungen über einen FTP-Zugriff direkt auf deinem Webhosting durch.
1. Alle WooCommerce-Bestellungen auf „Abgeschlossen“ setzen
Für virtuelle oder herunterladbare Produkte kann es von Nachteil sein, wenn der Status der Bestellung noch auf „in Bearbeitung“ oder auf „in Wartestellung“ stehen bleibt. In solchen Fällen kann es passieren, dass das Produkt nicht heruntergeladen bzw. der der Service nicht verwendet werden kann.
Um dem vorzubeugen, kann es sinnvoll sein, die Bestellung automatisch auf abgeschlossen zu setzen, was mit folgendem WooCommerce Snippets in der functions.php des Child-Themes gemacht werden kann.
/*** Auto Complete all WooCommerce orders.* @source woocommerce.com/document/automatically-complete-orders/*/add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );function custom_woocommerce_auto_complete_order( $order_id ) { if ( ! $order_id ) { return; } $order = wc_get_order( $order_id ); $order->update_status( 'completed' );}2. Kunden nach Bestellung auf eigene Thank-you Page umleiten mit diesem WooCommerce Snippet
Vielleicht willst Du deine Kunden auf eine eigene Dankeschön-Seite nach der Bestellung umleiten. Das geht mit folgendem WooCommerce Snippet
/** Customize the WooCommerce Thank You page by creating a Redirect* @source: tychesoftwares.com/how-to-customize-the-woocommerce-thank-you-page/*/add_action( 'template_redirect', 'woo_custom_redirect_after_purchase' );function woo_custom_redirect_after_purchase() { global $wp; if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) { wp_redirect( 'https://www.deine-website.de/neu-danke-seite/' ); exit; }}3. Ändere die Anzahl der angezeigten Produkte in einer Reihe
Standardmäßig zeigt WooCommerce vier Produkte in einer Reihe an. Das kannst du ganz komfortabel ändern.
/*** Change number of products per row to 3 */add_filter( 'loop_shop_columns', 'loop_columns', 999 );function loop_columns() { return 3; // 3 Produkte in einer Reihe}4. Ändere die Anzahl der ähnlichen Produkte
Du kannst selbst bestimmen, wie viele »Related Products« dein Theme anzeigt. Das kann manchmal durchaus praktisch sein.
/*** Change number of related products output* @source woocommerce.com/document/change-number-of-related-products-output/*/function woo_related_products_limit() { global $product; $args['posts_per_page'] = 6; return $args;}add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );function jk_related_products_args( $args ) { $args['posts_per_page'] = 4; // 4 related products $args['columns'] = 2; // arranged in 2 columns return $args;}5. Bestimme, wie viele Produkte auf einer Seite angezeigt werden sollen
Unter bestimmten Umständen kann es die WordPress-Datenbank überlasten, wenn sie zu viele Produkte auf einmal abrufen muss. Besucher können dann je nach Konfiguration den Fehler „too many redirects“ sehen. Ein einfache Lösung ist es, die Anzahl der Produkte pro Seite zu reduzieren, was mit folgendem WooCommerce Snippet geht:
/* Change number of products page page * @source: wordpress.org/support/topic/change-number-of-products-per-page-2/ */add_filter( 'loop_shop_per_page', 'wc_redefine_products_per_page', 9999 );function wc_redefine_products_per_page( $per_page ) { $per_page = 9; // 9 Produkte auf einer Seite return $per_page;}6. Andere Versandarten ausblenden, wenn kostenloser Versand ausgewiesen ist
Du bietest deinen Kunden einen kostenlosen Versand der Produkte an? Dann solltest du diesen Code verwenden, denn WooCommerce zeigt alle Versandarten im Kassenbereich an.
** * Hide shipping rates when free shipping is available. * Updated to support WooCommerce 2.6 Shipping Zones. * @source: woocommerce.com/document/hide-other-shipping-methods-when-free-shipping-is-available/ * * @param array $rates Array of rates found for the package. * @return array */function my_hide_shipping_when_free_is_available( $rates ) { $free = array(); foreach ( $rates as $rate_id => $rate ) { if ( 'free_shipping' === $rate->method_id ) { $free[ $rate_id ] = $rate; break; } } return ! empty( $free ) ? $free : $rates;}add_filter( 'woocommerce_package_rates', 'my_hide_shipping_when_free_is_available', 100 );7. WordPress Performance: WooCommerce CSS- und JavaScript-Dateien nur auf Shop-Seiten laden
WooCommerce lädt seine Dateien auf jeder Seite deiner Website, auch auf der Homepage, den Seiten und den Beiträgen. Erstens ist das nicht sinnvoll, zweitens macht es deine Website natürlich auch langsamer. Verwende daher diesen Schnipsel. Er sorgt dafür, das WooCommerce-Dateien nur dort geladen werden, wo sie gebraucht werden. In jedem Fall muss hier die Funktionalität auf den nicht-Shop-Seiten ausgiebig getestet werden, besonders dann, wenn Du einen Warenkorb auf allen Seiten einbindest.
/*** Optimizing WooCommerce Scripts* Removes WooCommerce styles and scripts from non WooCommerce pages.* @source brad-holmes.co.uk/5-most-used-woocomerce-snippets/*/ if (!function_exists( 'woo_manage_woocommerce_styles' ) ) :function manage_woocommerce_styles() { //first check that woo exists to prevent fatal errors if ( function_exists( 'is_woocommerce' ) ) { //dequeue scripts and styles if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) { wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } }}add_action( 'wp_enqueue_scripts', 'manage_woocommerce_styles', 99 );endif;8. WooCommerce-Checkout: Mache aus der Telefonnummer eine freiwillige Angabe
Die Angabe der Telefonnummer beim Checkout ist standardmäßig als ein Pflichtfeld eingestellt. Das wird mit Sicherheit einigen potenziellen Kunden nicht gefallen. Daher sorgt das folgende Snippet dafür, das diese Angabe freiwillig ist.
if (!function_exists( 'phone_no_pflicht' ) ) :/** * Make the phone number a optional entry * @hooked woocommerce_billing_fields() * @return filter */function phone_no_pflicht( $address_fields ) { $address_fields['billing_phone']['required'] = false; return $address_fields;}add_filter( 'woocommerce_billing_fields', 'phone_no_pflicht', 10, 1 );endif;Alternativ kann man das Telefon-Feld auch ganz verschwinden lassen mit diesem WooCommerce Snippet:
/* WooCommerce: The Code Below Removes Checkout Fields */add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );function custom_override_checkout_fields( $fields ) { unset($fields['billing']['billing_phone']); return $fields;}9. Limitiere die Anzahl der Produkte im Warenkorb
Insbesondere bei virtuellen oder Abo-Produkten wie hier auf Dr. Web kann es Sinn machen, die Anzahl der kaufbaren Produkte auf „1“ zu begrenzen. Das geht mit folgendem WooCommerce-Snippet:
/*** @snippet WooCommerce Max 1 Product @ Cart* @author Rodolfo Melogli* @compatible Woo 4.6*/add_filter( 'woocommerce_add_to_cart_validation', 'bbloomer_only_one_in_cart', 99, 2 );function bbloomer_only_one_in_cart( $passed, $added_product_id ) { wc_empty_cart(); return $passed;}10. Nach „Add-to-Cart“ auf Kasse umleiten
Um den vorherigen Punkt weiterzuführen: Gibt es nur ein kaufbares Produkt und ist der Warenkorb auch nur auf maximal ein einziges Produkt begrenzt, kann es Sinn machen, nach dem Klick auf den „Add to Cart“ Button direkt auf die Kassenseite umzuleiten. Dies geht mit folgendem WooCommerce-Snippet:
/*** @snippet Redirect to Checkout on Add to Cart* @author Rodolfo Melogli* @compatible Woo 4.6*/add_filter( 'woocommerce_add_to_cart_redirect', 'bbloomer_redirect_checkout_add_cart' );function bbloomer_redirect_checkout_add_cart() { return wc_get_checkout_url();}11. Produkt Tabs auf der Produkt-Ansicht entfernen
Die Tabs lassen sich entweder einzeln oder alle zusammen entfernen, was manchmal von Vorteil sein kann.
if (!function_exists( 'remove_product_tabs' ) ) :/** * Wir entfernen die Produkt-Tabs der Beschreibung * * @hooked woocommerce_product_tabs() */function remove_product_tabs( $tabs ) { unset( $tabs['description'] ); // Remove the description tab unset( $tabs['reviews'] ); // Remove the reviews tab unset( $tabs['additional_information'] ); // Remove the additional information tab return $tabs;}add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );endif;12. Link zum Benutzerkonto im Theme anzeigen
Wenn der Benutzer nicht eingeloggt ist, zeigt der Link »Login / Register« an und verwendet die Anmeldungs- / Anmeldeseite. Wenn der Benutzer angemeldet ist, zeigt der Link »Mein Konto« an und führt sie direkt zu ihrem Benutzerkonto.
/* Show My Account if user is logged in * @source: silicondales.com/tutorials/woocommerce/display-woocommerce-account-page-link-logged-users-login-register-link-not-logged/ */<?php if ( is_user_logged_in() ) { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','woocommerce'); ?>"><?php _e('My Account','woocommerce'); ?></a> <?php } else { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','woocommerce'); ?>"><?php _e('Login / Register','woocommerce'); ?></a><?php } ?>13. Kunden-Zahlungsart in die Admin E-Mail hinzufügen
Nach jeder Bestellung bekommen Deine Kunden eine E-Mail von WooCommerce zugesendet. Mit diesem Snippet kannst du die Zahlungsart des Kunden in die E-Mail einfügen.
if (!function_exists( 'add_payment_method_to_admin_new_order' ) ) :/** * Zahlungsart des Kunden zur Admin E-Mail hinzufuegen * * @hooked woocommerce_email_after_order_table() */function add_payment_method_to_admin_new_order( $order, $is_admin_email ) { if ( $is_admin_email ) { echo '<p><strong>Zahlungsart:</strong> ' . $order->payment_method_title . '</p>'; }}add_action( 'woocommerce_email_after_order_table', 'add_payment_method_to_admin_new_order', 15, 2 );endif;14. Ändere die Anordnung der Felder im Kassenbereich
Mit Hilfe dieses Snippet kannst du den Kassenbereich im WooCommerce Checkout anpassen. Du kannst die Reihenfolge der Felder im Kassenbereich ändern oder sie auch entfernen.
if (!function_exists( 'reorder_woo_fields' ) ) :/** * Aendere die Reihenfolge der Felder im Kassenbereich oder entferne sie komplett. * * @add_filter woocommerce_checkout_fields */function reorder_woo_fields( $fields ) { //move these around in the order you'd like $fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name']; $fields2['billing']['billing_last_name'] = $fields['billing']['billing_last_name']; $fields2['billing']['billing_company'] = $fields['billing']['billing_company']; $fields2['billing']['billing_address_1'] = $fields['billing']['billing_address_1']; $fields2['billing']['billing_address_2'] = $fields['billing']['billing_address_2']; $fields2['billing']['billing_city'] = $fields['billing']['billing_city']; $fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode']; $fields2['billing']['billing_state'] = $fields['billing']['billing_state']; $fields2['billing']['billing_country'] = $fields['billing']['billing_country']; $fields2['billing']['billing_email'] = $fields['billing']['billing_email']; $fields2['billing']['billing_phone'] = $fields['billing']['billing_phone']; // just copying these (keeps the standard order) $fields2['shipping'] = $fields['shipping']; $fields2['account'] = $fields['account']; $fields2['order'] = $fields['order']; return $fields2;}add_filter( 'woocommerce_checkout_fields', 'reorder_woo_fields' );15. Kauf auf Rechnung für Abo-Bestellungen und German Market
Hat mein ein Abo-Produkt anzubieten, das auch auf Rechnung gekauft werden können soll, können German Market[3] – Nutzer folgendes WooCommerce Snippet zu ihrer functions.php hinzufügen:
/*** @snippet Kauf auf Rechnung für Abos* @author MarketPress-Support*/add_action( 'wgm_gateway_purchase_on_account_after_counstruct', 'subscription_support_wgm_gateway_purchase_on_account' );function subscription_support_wgm_gateway_purchase_on_account( $gateway ) { $gateway->supports = array( 'products', 'subscriptions', 'subscription_cancellation', 'subscription_suspension', 'subscription_reactivation', 'subscription_amount_changes', 'subscription_date_changes', 'subscription_payment_method_change' );}16. Zeilenumbruch nach Product Meta Data in der PDF-Rechnung (für German Market)
Will man bei der WooCommerce PDF-Rechnung noch Meta-Daten zum Produktangeben, werden diese Metadaten unschön hintereinanderweg angezeigt. Um dies zu beheben und nach jedem Meta-Daten Produktfeld einen Zeilenumbruch hinzuzufügen, füge folgenden Schnipsel an das Ende der functions.php zu
/*** @snippet Zeilenumbruch nach Product Meta Data* @author MarketPress-Support*/add_action( 'after_setup_theme', function() { add_filter( 'wp_wc_invvoice_pdf_item_meta_args', function( $args ) { $args[ 'separator' ] = PHP_EOL; return $args; });});17. Füge eigenes CSS zu den WooCommerce Emails hinzu
Die Standard WooCommerce-Emails sehen vielleicht etwas dröge aus. Über folgendes WooCommerce Snippet kannst Du deine eigenen Styles hinzufügen:
/*** @snippet Add CSS to WooCommerce Emails* @author Rodolfo Melogli* @compatible Woo 4.6*/add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );function bbloomer_add_css_to_emails( $css, $email ) { $css .= ' #template_container { background-color: #fff; box-shadow: 5px 10px 20px #dedede !important; border: none; } #template_header_image { width: 200px; margin-bottom: 16px; } '; return $css;}Quellen und Links zum Weiterlesen
[1] WooCommerce Dokumentation
[2] „WooCommerce Tips“ von Business Bloomer (alle WooCommerce Snippets, die vom Autor Rodolfo Melogli stammen)
[3] German Market Plugin
