Skip to main content

Pourquoi modifier le libellé du bouton « Ajouter au panier » ?

Pour améliorer l’UX de votre boutique tout simplement !

Modifier le libellé du bouton « Ajouter au panier » sur WooCommerce peut sembler gadget, mais c’est en réalité une astuce simple et très efficace pour améliorer l’expérience utilisateur et augmenter vos ventes.

Dans le paysage actuel du commerce en ligne, l’expérience utilisateur est plus importante que jamais. En cherchant à améliorer l’UX, vous créez une expérience utilisateur positive qui laisse une impression favorable sur les visiteurs, les incitant ainsi à revenir fréquemment sur votre site.

Remplacer le libellé « Ajouter au panier » par « Acheter à nouveau »

La petite astuce ici consiste à replacer le libellé « Ajouter au panier » par « Acheter à nouveau » si le produit est déjà dans le panier. C’est une modification mineure qui peut avoir un impact significatif. Lorsqu’un client voit ce nouveau libellé après avoir ajouté un produit au panier, cela lui confirme que l’article a été ajouté avec succès, tout en l’encourageant à envisager d’acheter un autre produit.

Comment modifier le libellé « Ajouter au panier » sur WooCommerce ?

Parce que c’est toujours agréable de comprendre ce que l’on code, voici l’explication de cette partie du code.

  1. Je récupère la liste des produits présent dans le panier
  2. Je compare l’ID des produits avec l’ID du produit de la page ou je me trouve.
  3. Si l’ID d’un des produits correspond, je remplace le texte « Ajouter au panier » par « Acheter à nouveau »
  4. Si l’ID ne correspond pas, je laisse le texte « Ajouter au panier »
/* Modifier le texte du bouton "Ajouter au panier" si le produit est déjà dans le panier */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpm_custom_cart_button_text' );

function wpm_custom_cart_button_text() {
global $woocommerce;

// On récupère tous les produits présent dans le panier
foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
$_product = $values['data'];
// Si l'ID d'un des produits du panier correspond à l'ID du produit de la page produit sur laquelle on se trouve, on change le texte du bouton
if( get_the_ID() == $_product->id ) {
return __('Acheter à nouveau ?', 'woocommerce');
}
}
// Si les ID ne correspondent pas, on laisse le texte standard de WooCommerce
return __('Ajouter au panier', 'woocommerce');
}

Tout ce que vous avez à faire est de copier-coller ce bout de code dans votre fichier functions.php de votre thème.

Besoin d’un UX Designer ?

Contactez-moi pour concevoir ou améliorer l’UX de votre site web

Devis en ligne

Partager l’article

Leave a Reply