Comment personnaliser le fil d’Ariane de WooCommerce

Comme l’extension Yoast SEO, WooCommerce intègre un fil d’Ariane pour que les visiteurs puissent comprendre où ils se trouvent et naviguer aisément sur votre boutique.

Vous le trouverez par exemple au-dessus des produits :

Par défaut, le libellé des éléments est généré automatiquement mais parfois, cela n’est pas optimal. Nous allons voir comment corriger ça grâce à plusieurs snippets.

Comme d’habitude, il faudra les insérer dans le fichier functions.php de votre thème enfant 🙂

On commence de suite avec …

Comment modifier le texte “Accueil” du fil d’Ariane

Si vous souhaitez renommer le texte “Accueil” de votre fil d’ariane WooCommerce par autre chose, par exemple “Entrée de la boutique”, utilisez le code suivant.

Modifier la valeur de la variable $defaults['home'] entre guillemets par ce que vous voulez.

/* Modifier le texte "Accueil" du fil d'Ariane de WooCommerce */

add_filter( 'woocommerce_breadcrumb_defaults', 'wpm_change_breadcrumb_home_text' );

function wpm_change_breadcrumb_home_text( $defaults ) {
    // Modifie le texte "Accueil" par "Entrée de la boutique"
	$defaults['home'] = 'Entrée de la boutique';
	return $defaults;
}

Le résultat :

Modifier le séparateur du fil d’Ariane

Le séparateur utilisé par défaut dans le fil d’Ariane est / . Vous pouvez cependant très bien utiliser - ou encore |.

Pour cela, copiez-collez le snippet suivant dans le fichier functions.php de votre thème enfant, et modifiez la valeur entre guillemets de la variable $defaults['delimiter']:

/* Modifier le séparateur du fil d'Ariane de WooCommerce*/

add_filter( 'woocommerce_breadcrumb_defaults', 'wpm_change_breadcrumb_delimiter' );

function wpm_change_breadcrumb_delimiter( $defaults ) {
	// Modifie le délimiteur du fil d'ariane de '/' à '|'
	$defaults['delimiter'] = ' | ';
	return $defaults;
}

Le résultat :

Modifier plusieurs paramètres en même temps

Ce snippet regroupe les deux précédents mais offre des options supplémentaires. Vous pouvez par exemple modifier les balises HTML englobant le fil d’Ariane ainsi que les classes CSS utilisées.

Vous pouvez l’utiliser pour modifier tous les paramètres d’un seul coup :

/* Modifier les options du fil d'Ariane de WooCommerce */

add_filter( 'woocommerce_breadcrumb_defaults', 'wpm_woocommerce_breadcrumbs' );

function wpm_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' | ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" ="breadcrumb">', // Modifie la balise HTML ouvrant le fil d'ariane
            'wrap_after'  => '</nav>', // Modifie la balise HTML fermant le fil d'ariane
            'before'      => '', // Ajoute une chaine de caractère avant chaque item du fil d'ariane
            'after'       => '', // Ajoute une chaine de caractère après chaque item du fil d'ariane
            'home'        => _x( 'Entrée de la boutique', 'breadcrumb', 'woocommerce' ), // Modifiez ici le texte "Accueil"
        );
}

Remplacer le lien de l’élément “Accueil” par une autre URL

Si vous souhaitez modifier l’URL cible de l’accueil du fil d’Ariane par l’URL de votre choix, copiez-collez le snippet suivant dans le fichier functions.php de votre thème enfant :

/* Remplacer le lien de l'élément Accueil du fil d'Ariane de WooCommerce */

add_filter( 'woocommerce_breadcrumb_home_url', 'wpm_custom_breadrumb_home_url' );
function wpm_custom_breadrumb_home_url() {
    return 'https://www.monsite.fr/boutique';
}

Supprimer le fil d’Ariane de WooCommerce

Et si vous n’avez pas envie d’utiliser le fil d’Ariane de WooCommerce, vous pouvez tout simplement le supprimer grâce à ce snippet (inutile de vous redire où le placer) :

/* Supprimer le fil d'Ariane de WooCommerce */

add_action( 'init', 'wpm_remove_wc_breadcrumbs' );
function wpm_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Et voilà, plus de fil d’Ariane :

Conclusion

Grâce à ces snippets, vous pourrez totalement personnaliser le fil d’Ariane de WooCommerce pour proposer une expérience de qualité à vos visiteurs.

Quelles modifications avez-vous effectuées sur le fil d’Ariane de votre boutique ? Dites-nous tout en commentaire 🙂

Source: Woocommerce.com

Devenez un freelance WordPress accompli

Trouvez les bons clients, vendez des sites rentables, et libérez-vous de vos contraintes​

Découvrir la formation