Meld je aan voor mijn gratis online mini-workshops

Ja, vertel mij meer!

Kruimelpad toevoegen bij WooCommerce webshops


Dit artikel is onderdeel van de serie "Geavanceerd" en is alleen bedoeld voor mensen die (technische) kennis hebben van WordPress, HTML, CSS, etc.

Voor mijzelf en voor klanten gebruik ik niet zo vaak een kruimelpad (ook wel breadcrumbs genoemd). De voornaamste reden daarvoor is dat de websites die ik bouw meestal niet zo ingewikkeld zijn qua pagina’s en menustructuren. Een kruimelpad heeft dan niet echt een meerwaarde. Alle pagina’s zijn immers al makkelijk te vinden en de menustructuur is vrij simpel.

Waar ik echter wél vaak een kruimelpad gebruik is bij WooCommerce webshops. Deze structuren zijn meestal iets ingewikkelder, vooral wanneer je veel product hebt en deze zijn verdeeld over categorieën. Een kruimelpad zorgt er dan voor dat men zich makkelijk kan navigeren in jouw WooCommerce webshop.


Hoe voeg je een kruimelpad toe bij een WooCommerce webshop?

Een kruimelpad is eigenlijk súper makkelijk om toe te voegen haha. Je plaatst heel simpelweg een stukje code in het woocommerce.php bestand van je thema. Dit is dus zeg maar de reden dat ik dit artikel heb geclassificeerd als “Geavanceerd” 😉 Je moet wel écht kennis hebben van techniek als je dit wilt doen. Heb je geen technische kennis? Probeer dit dan alsjeblieft niet zelf. Rommelen in codes is nóóit een goed idee als je niet weet waar je mee bezig bent.

Goed, dat was dus de waarschuwing 😉 Weet jij waar je mee bezig bent? Lees dan gerust verder haha.

De eerste stap is dus het toevoegen van een stukje code in het woocommerce.php bestand van je thema. De betreffende code vind je hieronder.

<?php woocommerce_breadcrumb(); ?>

Plaats deze code bóven de WooCommerce content. Althans, dat is logischer dan het eronder plaatsen 😉 Wil je het plaatsen IN je WooCommerce content, dan zal je in een andere bestand moeten zijn. In dit artikel ga ik daar niet verder op in, sorry 😉

Het plaatsen van bovenstaande code is in principe het enige wat je hoeft te doen. Er zal vervolgens automatisch een kruimelpad komen te staan. Hoera! Maar…. Misschien is het kruimelpad (nog) niet helemaal naar wens.


Het kruimelpad aanpassen

Je kunt nog allerlei wijzigingen doen in het kruimelpad. En dat doe ik dan meestal ook 😉 Bij vrijwel alle WooCommerce webshops die ik bouw is de homepagina niet de startpagina van de webshop. De webshop is meestal een onderdeel van een website en heeft een apart item in het menu.

Maar in de breadcrumbs komt automatisch de “echte” homepagina te staan als home. Erg verwarrend voor een bezoeker 🙂

Gelukkig kunnen we dat aanpassen! Door onderstaande code in je functions.php bestand te plaatsen, vervang je de homepagina URL door een URL die je zelf kunt invullen.

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
return 'https:/www.boonwebdesign.nl’;
} 

En wellicht wil je dat de tekst ook wordt aangepast naar een tekst die je zelf kunt kiezen. Ook dat kan gewoon! Plaats onderstaande code in de functions.php file en kies het woord dat je wilt gebruiken.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text' );

function jk_change_breadcrumb_home_text( $defaults ) {

// Vul hieronder het woord in voor de startpagina van je shop

$defaults['home'] = ‘Webshop’;
return $defaults;
} 

Of misschien wil je de “separator” aanpassen, het symbooltje dat tussen de verschillende items wordt weergegeven. Raad eens… Dat is óók heel simpelweg aan te passen door middel van een simpele code in het functions.php bestand. 😉 Onderstaande zorgt daar voor. &gt kun je vervangen door de HTML code van het symbooltje dat jij graag wilt gebruiken.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter' );
function jk_change_breadcrumb_delimiter( $defaults ) {

// Change the breadcrumb delimeter from '/' to '>'
$defaults['delimiter'] = ' &gt; ';
return $defaults;
} 

Zo simpel is het dus al om het kruimelpad van een WooCommerce webshop aan te passen. 😀


Gratis workshops van Boon Webdesign

Ik geef regelmatig gratis online mini-workshops in mijn groep op Facebook over onder andere WordPress en internet marketing. Wil jij ook een website met meer succes? Meld je dan gratis aan.

Gratis aanmelden

Sinds 2008 bouw ik (Sandra Boon) WordPress websites en WooCommerce webshops. In de afgelopen jaren heb ik behoorlijk wat kennis opgedaan tijdens alle avonturen die ik heb beleefd in het WordPress wereldje. Via mijn tips en adviezen deel ik een gedeelte van deze kennis met jou.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *