Kategorien
Tipps, Tricks & Tutorials WordPress

Du kummst hier net rein: die 8 nützlichsten .htaccess-Tricks für WordPress

Die .htaccess Datei ist ein mächtiges Konfigurationswerkzeug für deinen Webserver oder dein Webhosting-Paket. Du solltest es grundsätzlich für das Selbsthosting von WordPress nutzen und konsequent anwenden. In diesem Beitrag zeige ich dir, welche Grundeinstellungen in diese Datei gehören, damit WordPress sicherer und besser wird.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: So stellst du deine Website auf HTTPS um

WordPress auf HTTPS, also ein SSL-Zertifikat umzustellen, wird im Netz gern als schwierig dargestellt. Was könnte nicht alles passieren. Dabei ist es recht einfach und für jeden machbar, der etwas Erfahrung mit WordPress mitbringt und das CMS selbst installieren kann. In diesem Artikel führe ich dich nach und nach durch die einzelnen, nötigen Schritte.

Kategorien
Tipps, Tricks & Tutorials WordPress

Dein WordPress läuft nicht? So behebst du die gängigsten Fehler!

Jeder WordPress-Anwender, der etwas in den Code eintaucht oder gerne Plugins und Themes neu installiert oder ändert, kennt das Problem. Unweigerlich taucht irgendwann ein Fehler auf. Dabei kann es sehr frustrierend sein, wenn man nicht sofort eine Lösung parat hat. Doch andere WordPress-User vor dir hatten bereits dieselben Probleme und haben sie auch gelöst. Profitiere von den folgenden Lösungen für die gängigsten WordPress-Fehler.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress 101: So vermeidest du die 20 häufigsten Anfängerfehler

Nichts im Leben ist leichter, als Fehler zu machen. Besonders gilt dies im Umgang mit einem Content-Management-System wie WordPress. Selbstverständlich ist es okay, wenn man seine Fehler selbst machen möchte, um Erfahrungen im Umgang mit WordPress zu erwerben. Besser jedoch ist das sogenannte „Modelling of Excellence“, bei dem du sehr schnell aus den Fehlern anderer lernen und von deren Erfahrungen profitieren kannst. In diesem Artikel lernst du, die 20 häufigsten Fehler im Umgang mit WordPress zu vermeiden.

Kategorien
E-Business E-Commerce SEO & Online-Marketing Tipps, Tricks & Tutorials WordPress

So eröffnest du deinen ersten Onlineshop!

Die Aufgabe klingt einfach: „Ich möchte meine Waren im Internet verkaufen“. Die Reichweite scheint unendlich. Die Märkte wachsen täglich. Die Technik ist ausgereift und günstig. Die Millionen können also direkt anfangen zu sprudeln! Shop-Plugin herunterladen, auf der eigenen WordPress-Homepage installieren, Produkte rein und los!

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: So baust du dein eigenes Child-Theme

WordPress übt eine geradezu magnetische Anziehungskraft aus auf Blogger, die die Sache selbst in die Hand nehmen wollen. Du erhältst die totale Kontrolle und es existiert nichts, was du nicht mit einigen Zeilen PHP, CSS oder HTML anpassen könntest. Im Netz schwirren zudem hunderte von kleinen Funktionen zur Erweiterung des CMS herum. Die Welt von WordPress könnte so schön sein, wenn da nicht die Theme-Updates wären. Mit Child-Themes nimmst du ihnen den Schrecken.

Kategorien
Plugins Themes Tipps, Tricks & Tutorials WordPress

WordPress: Das Abo-Modell für Plugin-Entwickler

Der SaaS-Trend insgesamt ist seit Jahren ungebrochen. Dem Entwickler gefällts, dem Nutzer weniger. Jetzt schwappt der Trend mehr und mehr auf die Entwickler von WordPress-Plugins über. Wir schauen, wo die Vor- und Nachteile liegen.

Kategorien
Plugins Themes Tipps, Tricks & Tutorials WordPress

WordPress und das Beitragsbild: So vermeidest du Probleme

Das Beitragsbild in WordPress kann sich – je nach Theme – massiv auf dein Design auswirken. Vor allem dann, wenn du es vergisst oder andere Probleme auftreten.

Kategorien
E-Business E-Commerce Themes Tipps, Tricks & Tutorials WordPress

WooCommerce für Einsteiger #3: So setzt du Benutzerfreundlichkeit und gutes Shop-Design um

Benutzerfreundlichkeit und gutes Design sind maßgeblich für deinen Erfolg mit WooCommerce verantwortlich. Die wichtigsten Kriterien für gutes Shop-Design und eine Auswahl der besten WooCommerce-Themes fasse ich für dich im folgenden Beitrag zusammen.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Anfänger-Tipps für Seitenbetreiber

WordPress gibt es schon relativ lange. Schon sehr früh wurde mir klar, dass dies das beste CMS ist, mit dem auch Laien ihre eigene Website verwalten können. Als Blogger-Software gestartet – und zunächst verschrien – gehört WordPress mittlerweile zu den am meisten verbreiteten Content-Management-Systemen im Netz. Es ist sehr intuitiv und auch für Website-Anfänger recht einfach zu erlernen. Natürlich ist es komplexer geworden, gerade für professionelle Seiten, die Möglichkeiten sensationell, doch die intuitive Bedienbarkeit ist meines Erachtens erhalten geblieben. Daher setze ich seit über 10 Jahren auf WordPress bei Business-Websites.

Kategorien
E-Business E-Commerce Technik Tipps, Tricks & Tutorials WordPress

WooCommerce für Einsteiger #2: Diese Grundausstattung benötigst du

Probleme bei WooCommerce sind häufig auf eine schlechte oder nicht vorhandene Planung vor der Erstellung des Online-Shops zurückzuführen. Bevor du also einfach einen Shop ins Netz hängst, solltest du deine grauen Zellen bemühen und sorgfältig ausarbeiten, was du eigentlich brauchst und wie du es angehen willst.

Kategorien
E-Business E-Commerce Technik Tipps, Tricks & Tutorials WordPress

WooCommerce: So setzt du eigene Ideen und Konzepte erfolgreich um

Nicht alle Hersteller und Händler von Produkten oder Dienstleistungen sind gleichermaßen erfolgreich. Erfolgreiche Unternehmen erkennen die Bedürfnisse ihrer Kunden und stellen geeignete Lösungen bereit. Wie du auf die Erfolgsspur kommst, zeigt dir der folgende Beitrag.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress Intern: Was sind Custom Post Types?

Die meisten Menschen, die sich mit WordPress näher beschäftigen, haben bereits einmal von Custom Post Types  gehört. Wirklich etwas mit dieser Funktion anzufangen, und vor allem, sie auch zu nutzen, wissen leider die wenigsten Webdesigner und Blogger. Dabei sind Custom Post Types so etwas wie das Salz in der WordPress-Suppe – sie sind einer der Gründe, warum WordPress heute so weit verbreitet ist. Werfen wir also einen gemeinsamen Blick auf die Custom Post Types und schauen, was man mit ihnen anfangen kann.

Was genau sind Custom Post Types?

WordPress ist das beliebteste Content-Management-System der Welt, weil es extrem anpassbar und flexibel ist. Grundsätzlich ist alles denkbare auch machbar, wobei die Funktion der Custom Post Types eine Art ist, mit WordPress das zu erreichen, was erreicht werden soll.

Serienmäßig kommt WordPress bereits mit einigen Post Types daher, zu nennen wären:

  • Post (Post Type: ‘post’)
  • Page (Post Type: ‘page’)
  • Attachment (Post Type: ‘attachment’)
  • Revision (Post Type: ‘revision’)
  • Navigation menu (Post Type: ‘nav_menu_item’)

Ein Custom Post Type ist also nicht mehr als eine Erweiterung, eine weiterer Bereich, um etwas zu posten. Dabei ist ein Custom Post Type nicht auf eine spezielle Inhaltsart, wie eine statische Seite oder einen dynamischen Blogpost festgelegt. Ein Custom Post Type kann also jede Art von Inhalt darstellen, auch wenn die Darstellung statischen Inhalts nicht viel Sinn ergeben würde, da Seiten hierfür wesentlich besser geeignet wären.

Besonders gut jedoch eignet sich der Custom Post Type für einen weiteren, dynamischen (neben den Blogartikeln) Inhaltsbereich. Ein idealer Einsatzbereich wäre zum Beispiel die Integration eines Portfolios in ein Theme. Ein Portfolio ist dynamisch, es werden von Zeit zu Zeit weitere Einträge angelegt. Auch wenn ein Portfolio anders aussieht, es verhält sich dynamisch wie ein Blog.

Custom Taxonomies

Custom Taxonomies sind sozusagen eine Unterfunktion der Custom Post Types. Sie sorgen dafür, dass Custom Post Types kategorisiert und mit Schlagworten versehen werden können. Es sind Kategorien und / oder Tags für die WordPress Custom Post Types. Das Erstellen der Custom Taxonomies geht recht leicht, wir werden weiter unten darauf zurückkommen. Allerdings sind Custom Taxonomies noch viel umfassender und vielseitiger als dieser Artikel aufzuzeigen vermag. Damit beschäftige ich mich in einem zukünftigen Beitrag.

Custom Post Types im praktischen Einsatz

Mit Hilfe der WordPress Custom Post Types wird es dir recht leicht fallen, ein funktionelles Portfolio anzulegen. Gehen wir die nötigen Schritte einmal zusammen durch:

Custom Post Type registrieren

Füge den folgenden Code an das Ende der functions.php deines Themes (wp-content/themes/ihr Theme).

/**
*
* Registration unseres Custom Post Types "Portfolio"
*
*/

function ah_custom_post_type() {

$labels = array(
'name' => 'Portfolio Einträge',
'singular_name' => 'Portfolio',
'menu_name' => 'Portfolio',
'parent_item_colon' => '',
'all_items' => 'Alle Einträge',
'view_item' => 'Eintrag ansehen',
'add_new_item' => 'Neuer Eintrag',
'add_new' => 'Hinzufügen',
'edit_item' => 'Eintrag bearbeiten',
'update_item' => 'Update Eintrag',
'search_items' => '',
'not_found' => '',
'not_found_in_trash' => '',
);
$rewrite = array(
'slug' => 'portfolio',
'with_front' => true,
'pages' => true,
'feeds' => true,
);
$args = array(
'labels' => $labels,
'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'comments', 'trackbacks', ),
'taxonomies' => array( 'category', 'post_tag' ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'can_export' => false,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'rewrite' => $rewrite,
'capability_type' => 'page',
);
register_post_type( 'portfolio', $args );

}

// Hook into the 'init' action
add_action( 'init', 'ah_custom_post_type', 0 );

Ein paar Worte zum Code

Der oberste Abschnitt bis hin zum $rewrite kümmert sich um das erweiterte Admin-Menü. Der weitere, mittlere, Teil sorgt für den Permalink mit dem Slug „portfolio“. Der untere Teil des Codes legt fest, welche Einzelteile unterstützt werden, wie zum Beispiel Titel, Editor, Excerpt, Beitragsbild und Kommentare.

Dein WordPress-Administrationsbereich zeigt dir nun den neuen Menüpunkt „Portfolio“, ebenso die Untermenü Punkte „Kategorien“ und „Schlagworte“.

Der neue WordPress-Admin Menüpunkt Portfolio

Um nun mit dem Portfolio arbeiten zu können, braucht es noch etwas mehr als diesen positiv angelegten Menüpunkt. Wir müssen noch Templates erstellen, um das Portfolio korrekt im WordPress-Theme anzuzeigen.

Nötige Templates für den Custom Post Type

Die WordPress Template Engine wird die Templates für diesen Post Type automatisch erkennen, wenn sie im Format single-posttype.php für den einzelnen Post und archive-posttype.php für die Übersichtsseite vorliegen. Je nachdem, wie umfangreich dein Projekt werden soll, musst du nun ein bis zwei Templates erstellen, eines nennst du single-portfolio.php und eines archive-portfolio.php.

In diesem Beispiel legen wir nun das Template archive-portfolio.php an, um die Portfolio-Einträge alle auf einer Seite zu zeigen.

Custom Post Type anzeigen

Erstelle mit dem Editor deiner Wahl eine neue leere Seite und nenne sie archive-portfolio.php. Kopiere nun den Inhalt deiner page.php (oder auch der index.php) in dieses neu angelegte Template. Ersetze anschliessend die Beschreibung des Templates mit folgendem:

<?php
 /**
 * Template Name: Archive Portfolio Template
 */

Nun ist es wichtig, dem Template mitzuteilen, welche Art von Inhalt angezeigt werden soll. Hierzu platziere oberhalb des Loop folgenden Code:

<?php query_posts(array('post_type'=>'portfolio')); ?>

Die archive-portfolio.php

Wichtig zu wissen

Bitte gehe nun zum Menüpunkt „Einstellungen => Permalinks“ und speichere deine Permalinks einmal erneut ab. Tust du das nicht, so wird es beim Aufruf von www.ihre-seite.de/portfolio/ höchstwahrscheinlich einen 404-Fehler geben. Nach dem erneuten Abspeichern der Permalinks kann die Seite ohne Probleme aufgerufen werden.

Ein Portfolio Eintrag

Da die Seite „Portfolio“ physisch nicht vorhanden ist (aber problemlos aufgerufen werden kann), sollte man diesen Menüpunkt händisch über die Funktion „Links“ aufsetzen.

Menüpunkt händisch hinzufügen

Alternativ kann man auch eine neue, leere Seite mit dem Titel Portfolio anlegen und das Template „Archive Portfolio Template“ auswählen. Damit wurde der nötige Menüpunkt automatisch generiert:

Den Menüpunkt Portfolio generieren

Fazit

Mit Custom Post Types ist es sehr leicht, die normale WordPress-Funktionalität um weitere Bereiche zu ergänzen. Grundsätzlich sind der Kreativität keine Grenzen gesetzt. Sogar sehr umfangreiche Aufgaben können hiermit gelöst werden. Ein gutes Beispiel hierfür ist die Website des Premium WordPress-Theme-Providers WooThemes.com, der dortige Menüpunkt „Themes“ wurde genauso – wenn auch sehr viel komplizierter – umgesetzt.

Links zum Beitrag

(Beitragsbild: Depositphotos)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Moderne Theme-Entwicklung mit Action Hooks

Richtig gute WordPress-Themes zu entwickeln ist eine echte Herausforderung. Doch auch das vermeintlich einfache Anpassen bereits vorhandener Themes kann schnell für graue Haare sorgen.

Kategorien
E-Business E-Commerce Tipps, Tricks & Tutorials WordPress

WooCommerce: Die besten Code-Schnipsel zum eCommerce mit WordPress

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.

[blaue-box text=“ 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.“] [promo-box headline=“Das könnte hilfreich für dich sein:“ linkeins=“https://docs.woocommerce.com/documentation/plugins/woocommerce/“ texteins=“Die WooCommerce Dokumentation“ linkzwei=“https://businessbloomer.com/category/woocommerce-tips/visual-hook-series/“ textzwei=“Der visuelle WooCommerce Hook Guide“ linkdrei=“https://docs.woocommerce.com/wc-apidocs/“ textdrei=“Die WooCommerce 3.0.x Code Reference“]

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.

<?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;
[promo-box headline=“Das könnte dich auch interessieren:“ linkeins=“https://www.drweb.de/e-commerce-wie-nutella-co-ihre-kunden-mit-personalisierten-artikeln-binden/“ texteins=“E-Commerce: wie Nutella & Co. ihre Kunden mit personalisierten Artikeln binden“ linkzwei=“https://www.drweb.de/das-auge-kauft-mit-wie-das-perfekte-produktfoto-entsteht-58438/“ textzwei=“Das Auge kauft mit: Wie das perfekte Produktfoto entsteht“ linkdrei=“https://www.drweb.de/webshops-klassische-conversion-killer-und-conversion-booster-im-ueberblick-46302/“ textdrei=“Webshops: Klassische Conversion-Killer und Conversion-Booster im Überblick“]
Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress-Snippets: Die 26 besten Code-Schnipsel für deine Website

WordPress wird erst so richtig gut durch die Plugins, denn damit kannst du deine Website genau auf deine Bedürfnisse ausrichten. Viele Funktionen lassen sich jedoch auch ohne den Einsatz eines Plugins einbauen. Ein einfaches Snippet reicht. Sich die benötigten Snippets zusammenzusuchen kann jedoch ziemlich mühsam sein.