Die 16 nützlichsten und funktionellsten WooCommerce Snippets

Die 16 nützlichsten und funktionellsten WooCommerce Snippets

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

In meinem Beitrag zu den nützlichsten WordPress-Snippets hatte ich ja schon angekündigt, dass noch ein Artikel zu den besten WooCommerce-Snippets folgen wird. Et voilà, hier kommen also meine besten Schnipsel zu WooCommerce.

Den einen oder anderen Schnipsel wirst du bereits kennen, doch ich bin überzeugt, dass ich dir auch Neues zeigen kann. Daher findest du hier die besten Snippets in einem Beitrag zusammengefasst.

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 Themes oder legst dir ein seitenspezifisches Plugin für diesen Job an.

Bitte das öffnende <?php nicht mit kopieren.

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 – WooCommerce Support für dein Theme sicherstellen

Falls dein eingesetztes Theme nicht für den Einsatz mit WooCommerce vorbereitet ist, solltest du an diesem Punkt starten und den Support sicherstellen. Nur dann ist gewährleistet, dass dein neuer Shop auch optimal angezeigt wird. Dieser Bereich besteht aus drei Teilen.

Teil eins: Zuerst deklarierst du den Support für dein Theme und fügst eine Produkt-Lightbox hinzu, wenn du möchtest.

<?php

/**
* Theme Support für WooCommerce
*/
add_theme_support( 'woocommerce' );  

/**
 * Add Theme Support for WooCommerce Gallery Lightbox
 */ 
add_theme_support( 'wc-product-gallery-lightbox' );


Teil zwei:
Du entfernst die öffnenden und schließenden Container-DIVs von WooCommerce aus den Templates des Plugins.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
<?php

//remove function attached to woocommerce_before_main_content hook
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

//remove function attached to woocommerce_after_main_content hook
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );


Teil drei:
Du ersetzt die DIVs mit denen, die dein Theme verwendet. Dazu musst du zuerst herausfinden, wie die Container-DIVs deines Themes benannt sind. Ein Rechtsklick auf deine Website und »Element untersuchen« kann hilfreich sein.

Finde deine Inhalts-Container heraus. Bei mir wären es die beiden markierten.

Danach füge diese Container in den folgenden Code ein:

<?php

if ( ! function_exists( 'evolution_wrapper_start' ) ) :
/**
 * Adding theme's starter container for WooCommerce support
 */
function evolution_wrapper_start() {
    
echo '<div id="primary" class="content-area"><main id="main" class="site-main" role="main">';
    
}
add_action( 'woocommerce_before_main_content', 'evolution_wrapper_start', 10 );
endif;



if ( ! function_exists( 'evolution_wrapper_end' ) ) :
/**
 * Adding theme's ending container for WooCommerce support
 */
function evolution_wrapper_end() {
    
    echo '</div></main>';
}
add_action( 'woocommerce_after_main_content', 'evolution_wrapper_end', 10 );
endif;

Nun sollte dein Shop genauso gut dargestellt werden wie der Rest deines Themes.

2 – WooCommerce Breadcrumbs durch die von Yoast SEO ersetzen

Sehr viele WordPress-Fans nutzen die Breadcrumb-Navigation des beliebten Yoast SEO-Plugins. Die kannst du durchaus auch auf den WooCommerce-Seiten einsetzten. Dieses Snippet erledigt den Job:

<?php

if ( ! function_exists( 'evolution_replace_breadcrumbs' ) ) :
/**
 * Replace WooCommerce Breadcrumbs with Yoast breadcrumbs
 */
function evolution_replace_breadcrumbs() {

    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
    

    function evolution_yoast_breadcrumb() {

        if ( function_exists('yoast_breadcrumb') ) { 
            yoast_breadcrumb('<nav class="woocommerce-breadcrumb">','</nav>');
        }
    }
}
add_action( 'init', 'evolution_replace_breadcrumbs' );
endif;

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.

<?php

/**
 * Change number of products per row to 3
 */ 
if (!function_exists('evolution_loop_columns') ) {

    function evolution_loop_columns() {
        return 3; // 3 Produkte in einer Reihe
    }
}
add_filter('loop_shop_columns', 'evolution_loop_columns');

4 – Ändere die Anzahl der ähnlichen Produkte

Du kannst selbst bestimmen, wie viele »Related Products« dein Theme anzeigt. Das kann manchmal durchaus praktisch sein.

<?php

/**
 * WooCommerce Extra Feature
 * --------------------------
 *
 * Change number of related products on product page
 * Set your own value for 'posts_per_page'
 *
 */ 
if (!function_exists('evolution_related_products_args') ) {

    function evolution_related_products_args( $args ) {

        $args['posts_per_page'] = 4; // 4 ähnliche Produkte
        $args['columns'] = 4; // Alle vier in einer Reihe
        return $args;

    }
}
add_filter( 'woocommerce_output_related_products_args', 'evolution_related_products_args' );

5 – Bestimme, wie viele Produkte auf einer Seite angezeigt werden sollen

Solltest du entweder sehr viele Produkte oder sehr wenige in deinem Shop anbieten, dann wäre es vielleicht sinnvoll, die Anzahl der Produkte pro Seite zu bestimmen.

<?php

/**
 * Custom Product Cols
 * @return 12 Products per Page
 */
if (!function_exists('evolution_loop_shop_per_page') ) {

    function evolution_loop_shop_per_page( $cols ) {

        $cols = 12;
        return $cols;

    }
}
add_filter( 'loop_shop_per_page', 'evolution_loop_shop_per_page', 20 );

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.

<?php

/**
 * Hide shipping rates when free shipping is available.
 * Updated to support WooCommerce 2.6 Shipping Zones.
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 */
if (!function_exists('evolution_hide_shipping_when_free_is_available') ) {

    function evolution_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', 'evolution_hide_shipping_when_free_is_available', 100 );

7 – 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.

<?php

if (!function_exists( 'evolution_manage_woocommerce_styles' ) ) :
/**
* Optimize WooCommerce Scripts
* Removes WooCommerce styles and scripts from non WooCommerce pages.
*/  
function evolution_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_style( 'evolution-woostyles' );
            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', 'evolution_manage_woocommerce_styles', 99 );
endif;

8 – Verwende eine eigene Sidebar auf den Shopseiten

Circa 95% aller Entwickler wissen nicht, wie man diese Anforderung ohne ein Überschreiben von WooCommerce-Templates lösen kann. Du wirst auch im Internet kaum eine Lösung für dieses Problem finden, denn auch dort wird dir ein Überschreiben der Templates vorgeschlagen.

Daher lernst du heute ein Geheimnis von mir 🙂 Denn ab sofort löst du das Problem wie ein Jedi-Meister, und nicht wie ein Padawan.

Teil eins: Lege eine neue Sidebar für die WooCommerce-Seiten an

<?php

if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
 * Eine neue Sidebar nur für die Shop-Seiten registrieren
 */
function evolution_woo_sidebar_init() {
    
    register_sidebar( array(
        'name'          => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
        'id'            => 'woocommerce',
        'description'   => esc_html__( 'Dies ist die Sidebar für deinen WooCommerce Shop.', 'evolution' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;

Teil zwei: Lege eine WooCommerce-Sidebar Datei an

Damit die neue Sidebar auch genutzt werden kann, benötigen wir eine neue Theme-Datei. Lege eine leere Datei mit dem Namen sidebar-woocommerce.php an. Dazu nutzt du bitte einen HTML-Editor.

Die HTML-Container übernimmst du aus deiner sidebar.php. Füge nun den folgenden Code in die Datei ein und lade sie per (S)FTP in deinen Theme- oder Child-Theme-Ordner hoch.

<?php
/**
 * The sidebar containing the woocommerce widget area.
 *
 * @package Evolution Framework
 */
if (   ! is_active_sidebar( 'woocommerce' ) ) {
    return;
}
?>
<?php // Wichtig: die HTML-Container kopierst du aus deiner sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">

    <div class="normal-sidebar widget-area">

        <?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>

        <?php dynamic_sidebar( 'woocommerce' ); ?>

        <?php endif; ?>

    </div><!-- .normal-sidebar -->

</div><!-- #secondary -->

Teil drei: Tausche auf den Shop-Seiten die Sidebars aus

Für den Austausch der beiden Sidebars sorgt die Original-Funktion des WooCommerce-Frameworks. Diese Funktionen wurden alle »Pluggable« geschrieben. Das bedeutet, das man diese Funktionen leicht überschreiben kann.

Eine überschreibbare Funktion sieht so aus:

<?php

if (!function_exists( 'eine_tolle_funktion' ) ) :
/**
 * Eine Funktion ueberschreibbar machen
 */
function eine_tolle_funktion() {
    
    
}
add_action( 'tolle_funktion', 'eine_tolle_funktion' );
endif;

Das if (!function_exists( 'eine_tolle_funktion' ) ) : sagt aus, das die Funktion nur ausgeführt wird, falls es noch keine Funktion dieses Namens geben sollte. Existiert hingegen eine Funktion dieses Namens bereits, wird die Funktion nicht ausgeführt. Das sorgt dafür, dass du diese Funktionen leicht überschreiben kannst. Und genau das werden wir nun tun.

Die Sidebar tauschen: Das Snippet

Das folgende Snippet sorgt dafür, dass auf deinen Shop-Seiten nun die WooCommerce-Sidebar anstatt der normalen Sidebar angezeigt wird.

<?php

/**
 * Get the spezial sidebar for the WooCommerce Templates
 * DO NOT CHANGE THIS FUNCTION, or the WooCommerce Sidebar will not work.
 * 
 * @overrides the woocommerce function
 * 
 * @hooked woocommerce_sidebar()
 */
function woocommerce_get_sidebar() {
    
    get_template_part( 'sidebar-woocommerce' );
    
}

Nun wird auf allen Shop-Seiten die Datei sidebar-woocommerce.php anstatt deiner sidebar.php aufgerufen und du kannst beide Sidebars mit verschiedenen Inhalten bestücken. Übrigens: eine weitere Möglichkeit lernst du in unsrem Artikel über das Evolution WordPress Framework kennen.

9 – WooCommerce-Checkout: Mache aus der Telefonnummer eine freiwillige Angabe

Die Angabe der Telefonnummer beim Checkout ist ein Pflichtfeld. Das wird mit Sicherheit einigen potenziellen Kunden nicht gefallen. Daher sorgt das folgende Snippet dafür, das diese Angabe freiwillig ist.

<?php

if (!function_exists( 'evolution_phone_no_pflicht' ) ) :
/**
 * Make the phone number a optional entry
 * 
 * @hooked woocommerce_billing_fields()
 * 
 * @return filter
 */
function evolution_phone_no_pflicht( $address_fields ) {
    
    $address_fields['billing_phone']['required'] = false;

    return $address_fields;
}
add_filter( 'woocommerce_billing_fields', 'evolution_phone_no_pflicht', 10, 1 );
endif;

10 – Prozentuale Ersparnis bei Angeboten anzeigen

Steigere die psychologische Anregung zum Kauf, indem du eine prozentuale Ersparnis bei deinen Angeboten anzeigst.

<?php

if ( !function_exists( 'evolution_custom_sales_price' ) ) :
/**
 * Show percent savings on sale - Only for WooCommerce version 3.0+
 * 
 * @add filter to products
 * 
 * @return filter
 */
function evolution_custom_sales_price( $price, $regular_price, $sale_price ) {
    
    $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
    
    $percentage_txt = __(' Spare ', 'evolution' ).$percentage;
    
    $price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . $percentage_txt ) . '</ins>';
    return $price;
    
}
add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );
endif;

11 – Füge deine Share-Buttons zur Produktseite hinzu

Jedes Produkt sollte über die Sozialen Netzwerke teilbar sein, um die Reichweite deines Shops zu erhöhen. Daher ist es mehr als sinnvoll, deine Share-Buttons auf den Produktseiten anzuzeigen. Um das machen zu können, benötigst du den Shortcode für die manuelle Integration in ein Theme.

Diesen findest du in der Dokumentation zu deinem WordPress-Theme. Ich zeige die Integration mit den Shariff Share-Buttons.

<?php

if (!function_exists( 'evolution_share_for_woocommerce' ) ) :
/**
 * Share-Buttons einfügen auf der Seite eines einzelnen Produkts
 * 
 * @hooked woocommerce_share()
 */
function evolution_share_for_woocommerce() {

    echo do_shortcode( '[shariff]' );
}
add_action( 'woocommerce_share', 'evolution_share_for_woocommerce', 5 );
endif;

Das Ergebnis:

Die nützlichsten und funktionellsten WooCommerce Snippets

12 – Produkt Tabs auf der Produkt-Ansicht entfernen

Die Tabs lassen sich entweder einzeln oder alle zusammen entfernen, was manchmal von Vorteil sein kann.

<?php

if (!function_exists( 'evolution_remove_product_tabs' ) ) :
/**
 * Wir entfernen die Produkt-Tabs der Beschreibung
 * 
 * @hooked woocommerce_product_tabs()
 */
function evolution_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', 'evolution_remove_product_tabs', 98 );
endif;

13 – Live Update des Warenkorbs mit Ajax

Du musst den Warenkorb nicht ständig neu laden, um ihn aktuell zu halten. Das lässt sich viel besser mittels Ajax »Live« erledigen.

<?php

if (!function_exists( 'evolution_header_add_to_cart_fragment' ) ) :
/**
 * Ensure cart contents update when products are added to the cart via AJAX
 * 
 * @add_filter woocommerce_add_to_cart_fragments
 */
function evolution_header_add_to_cart_fragment( $fragments ) {
    
    ob_start();
?>
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf (_n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a> 
<?php

    $fragments['a.cart-contents'] = ob_get_clean();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'evolution_header_add_to_cart_fragment' );
endif;

14 – 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.

 <?php if ( is_user_logged_in() ) { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Mein Account','evolution'); ?>"><?php _e('My Account','woothemes'); ?></a>
 <?php } 
 else { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','evolution'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
 <?php } ?>

15 – Kunden-Zahlungsart in die Admin E-Mail hinzufügen

Nach jeder Bestellung bekommst du eine E-Mail von WooCommerce zugesendet. Mit diesem Snippet kannst du die Zahlungsart des Kunden in die E-Mail einfügen.

if (!function_exists( 'evolution_add_payment_method_to_admin_new_order' ) ) :
/**
 * Zahlungsart des Kunden zur Admin E-Mail hinzufuegen
 * 
 * @hooked woocommerce_email_after_order_table()
 */
function evolution_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', 'evolution_add_payment_method_to_admin_new_order', 15, 2 );
endif;

16 – Ä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.

<?php

if (!function_exists( 'evolution_reorder_woo_fields' ) ) :
/**
 * Aendere die Reihenfolge der Felder im Kassenbereich oder entferne sie komplett.
 * 
 * @add_filter woocommerce_checkout_fields
 */
function evolution_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', 'evolution_reorder_woo_fields' );
endif;

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz