Das WordPress Theme Avada hat bereits WooCommerce integriert. Betreibt man den Shop allerdings nicht als Home-Seite, kommt es unweigerlich zu einem Problem mit der Breadcrumb-Navigation von Avada: Klickt man in WooCommerce in eine Katagorie und möchte über den Breadcrumb-Pfad auf die Startseite des WooCommerce Shops wechseln, so landet man statt dessen auf der Startseite von WordPress.

Der folgende Beitrag zeigt, wie sich das BreadCrumb-Problem elegant mit JQuery lösen lässt.

WooCommerce Breadcrumb-Pfad in Avada korrigieren

Googled man das Avada Breadcrumb-Problem, so findet man einige Lösungswege wie z.B. Aufsetzen eines Avada Child Themes, Anpassen der PHP-Dateien von Avada, Anpassen der PHP-Dateien von WooCommerce, Installation eines Plugins zum Injizieren von Custom Code in die functions.php von WordPress. Deutlich einfacher ist die folgende Lösung. Avada bleibt zudem 100% updatefähig:

Über ein JQuery Script werden der Name und die URL des 1. Knoten im Breadcrumb-Pfad angepasst:

<script>
jQuery(document).ready(function() {
    
    // Fix WooCommerce Breadcrumb
    // Set .fusion-breadcrumbs to display:none first, for smoother changes here
    //
    if( jQuery('body').hasClass('woocommerce-page')) {
        jQuery('.fusion-breadcrumbs span:first-child a').text('My-Shop')
        jQuery('.fusion-breadcrumbs span:first-child a').css('text-decoration', 'none')
        jQuery('.fusion-breadcrumbs span:first-child a').attr('href', "/shop")
    }
    jQuery('.fusion-breadcrumbs').fadeIn(1000);
});
</script>

Damit das ganze nicht unter den Augen des Besuchers geschieht, wird der komplette Breadcrumb-Pfad zuerst per CSS ausgeblendet, dann über das o.g. Script angepasst und sanft eingeblendet:

.fusion-breadcrumbs {
    display: none;
}

Das Ergebnis ist ein perfekt angepasster Breadcrumb-Pfad für WooCommerce in Avada:

Avada: Wohin mit den Anpassungen ?

Die CSS-Anpassungen werden in Avada unter Custom CSS eingefügt:

Das JQuery Script landet in Avada unter “Advanced / Code Fields” im Feld “Space before </body>”:

In diesem Sinne: Viel Spass mit Avada und WooCommerce :-)