Vous êtes ici : Accueil | Snippets WordPress | WooCommerce | Comment personnaliser le fil d’Ariane de WooCommerce

Comment personnaliser le fil d’Ariane de WooCommerce

woocommerce snippet

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 pas exemple au dessus des produits :

accueil fil ariane woocommerce snippet wpmarmite

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 :

modif fil ariane woocommerce snippet wpmarmite

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 :

delimiteur woocommerce snippet wpmarmite

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" itemprop="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 voila, plus de fil d’Ariane :

suppression fil ariane woocommerce snippet wpmarmite

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 le fil d’Ariane de votre boutique ? Dites-nous tout en commentaire 🙂

Source: Woocommerce.com

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    0c7600e1c2dd44b885ccf90aa750b13b?????????????
    Partagez
    Tweetez
    Partagez