Comment personnaliser le bouton Ajouter au panier dans WooCommerce

 add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );
fonction 'QL_add_text_above_add_to_cart'() {
  echo 'Garantie de remboursement de 14 jours';
}

D'autre part, vous pouvez également ajouter du texte sous le bouton Ajouter au panier . Cela peut être utile pour informer les acheteurs qu'il peut y avoir des remises pour les achats en gros par exemple. Pour ajouter un texte sous le bouton Ajouter au panier, vous pouvez utiliser cet extrait de code :

 add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );
fonction QL_add_text_under_add_to_cart() {
  echo 'Contactez-nous pour les achats groupés';
} 

Comme vous pouvez le voir, ce sont des changements très simples que vous pouvez faire pour augmenter vos taux de conversion en un rien de temps.

3) Changez la couleur du bouton Ajouter au panier

Voyons maintenant comment modifier le bouton Ajouter au panier en changeant sa couleur. Même si la plupart des thèmes WordPress et WooCommerce sont livrés avec des couleurs par défaut pour les boutons, vous devez vous assurer qu'ils correspondent au style de votre boutique.

Pour personnaliser la couleur du bouton Ajouter au panier dans WooCommerce, vous devrez ajouter un extrait de code CSS au fichier style.css . Vous pouvez y accéder avec un client FTP ou depuis le tableau de bord WordPress en allant dans Apparence > Personnaliser > CSS supplémentaire . Ici, il y a deux options :

1. Changer la couleur du bouton Ajouter au panier sur les produits uniques
2. Changer la couleur du bouton Ajouter au panier sur les pages d'archives

3.1) Changer la couleur sur les produits uniques

Collez ce code dans le fichier style.css et changez les couleurs en celles que vous voulez. Dans ce cas, nous aurons un fond rouge et un texte argenté.

 .single-product .product .single_add_to_cart_button.button {
couleur de fond : #FF0000 ;
couleur : #C0C0C0 ;
}

3.2) Modifier la couleur du bouton Ajouter au panier sur la page Archive

Pour personnaliser le bouton Ajouter au panier et changer sa couleur sur la page d'archive WooCommerce, utilisez ce code et remplacez les codes hexadécimaux par ceux qui ont du sens pour votre boutique.

 .woocommerce .product .add_to_cart_button.button {
couleur de fond : #FF0000 ;
couleur : #C0C0C0 ;
} 

4) Supprimez le bouton Ajouter au panier et ajoutez un bouton d'achat direct sur la page de la boutique

Voyons maintenant une option plus avancée. Avoir un processus d'achat en plusieurs étapes augmente les chances que les acheteurs abandonnent à chaque étape. C'est pourquoi raccourcir l'entonnoir est un excellent moyen d'optimiser le passage à la caisse et d'améliorer les taux de conversion.

Dans cette section, nous vous montrerons comment supprimer le bouton Ajouter au panier et le remplacer par un achat direct à l'aide de Direct Checkout pour WooCommerce . Ce plugin a des versions gratuites et premium et est livré avec de nombreuses fonctionnalités pour vous aider à simplifier le paiement. De plus, il vous permet d'ignorer la page du panier et de rediriger les utilisateurs directement vers la page de paiement , ce qui raccourcit le processus d'achat. Voyons donc comment supprimer complètement le bouton Ajouter au panier et le remplacer par un bouton d'achat direct.

Modifier la fonction du bouton Ajouter au panier

Tout d'abord, vous devez installer et activer Direct Checkout. Vous pouvez télécharger la version gratuite à partir de ce lien ou consulter l'un des plans premium à partir de 19 USD (paiement unique).

Après avoir activé le plugin, dans votre tableau de bord WordPress , rendez-vous dans WooCommerce > Paiement direct > Général et renseignez les options comme suit :

Pour plus d'informations sur la personnalisation de la page de la boutique WooCommerce, consultez ce guide complet.

Modifier le texte du bouton Ajouter au panier

Après avoir configuré les options dans l'onglet Général, le bouton Ajouter au panier redirigera les utilisateurs vers la page de paiement. Cependant, vous devez également modifier le texte du bouton car vous avez modifié sa fonction. Le bouton n'ajoute plus de produits au panier, il est donc préférable de le remplacer par quelque chose comme Acheter maintenant, par exemple. Pour cela, rendez-vous dans l'onglet Archives et renseignez les options comme suit : Ici, vous pouvez modifier le texte du bouton pour des types de produits spécifiques. Nous appliquerons les modifications à tous les types de produits en les sélectionnant tous dans le champ correspondant. Après cela, il est temps de vérifier l'avant.

Comme vous pouvez le voir, nous avons personnalisé le bouton Ajouter au panier dans notre boutique WooCommerce et remplacé le bouton Ajouter au panier par un bouton Acheter maintenant qui amènera les clients de la page de la boutique directement à la page de paiement. En plus de cela, nous avons complètement supprimé la fonctionnalité de panier de notre boutique.

Pour plus d'informations sur la façon de supprimer le bouton Ajouter au panier, consultez ce guide étape par étape.

5) Personnalisez le bouton Ajouter au panier et ajoutez un bouton d'achat direct sur la page produit

Enfin, nous pouvons faire quelque chose de similaire et personnaliser le bouton Ajouter au panier pour rediriger les utilisateurs de la page du produit vers la caisse .

De cette façon, vous pouvez facilement créer un bouton Ajouter au panier personnalisé dans WooCommerce sur la page Boutique et Produits. Et la meilleure partie est que vous pouvez avoir différents boutons sur chaque page.

Comment personnaliser le message Ajouté au panier

Outre la personnalisation du bouton, vous pouvez également modifier le message Ajouté au panier. La façon la plus simple de le faire est de simplement changer le message en collant le script suivant dans le fichier functions.php .

 add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
fonction quadlayers_custom_add_to_cart_message() {
   $message = 'Votre produit a été ajouté au panier. Merci d'avoir fait du shopping avec nous !' ;
   retourner $message ;
}

Dans ce cas, nous modifions le message en Votre produit a été ajouté à votre panier. Merci d'avoir magasiné avec nous!

Pour le rendre plus personnalisé, vous pouvez afficher le nom du produit que le client vient d'ajouter au panier comme suit :

 add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 ); 
 
function quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) { 
    $message = sprintf(esc_html__('%s a été ajouté à votre panier. Merci pour vos achats !','tm-organik'), get_the_title( $product_id ) ); 
    retourner $message ; 
} 

Ce ne sont que quelques exemples, mais vous pouvez faire beaucoup plus et ajouter des liens et des boutons au message. Pour plus d'informations à ce sujet, consultez notre guide sur la façon de modifier le message WooCommerce Add-to-Cart.

Bonus : modifiez le texte du bouton Ajouter au panier pour différentes catégories

Supposons maintenant que vous ayez différentes catégories de produits et que vous souhaitiez disposer de boutons Ajouter au panier personnalisés pour chaque catégorie. Par exemple, vous souhaiterez peut-être avoir un bouton indiquant "Acheter maintenant" pour la catégorie de produits 1, mais afficher le texte "Télécharger" pour la catégorie 2.

Pour ce faire, vous devez utiliser la même fonction que nous avons utilisée au point 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

Vous devez obtenir les catégories de chaque produit, puis utiliser une condition pour modifier le texte en fonction de la taxonomie comme suit :

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

Mon bouton Ajouter au panier ne fonctionne pas. Que puis-je faire?

Il peut y avoir plusieurs raisons pour lesquelles le bouton Ajouter au panier peut ne pas fonctionner. Les plus courants sont :

• Incompatibilité plugin/thème
• Produits avec des informations incomplètes
• Problèmes avec le cache
• Points de terminaison de paiement
• Permaliens
• Problèmes de ModSecurity
• Et plus

Pour savoir comment résoudre chacun de ces problèmes, consultez notre guide sur la façon de réparer le bouton Ajouter au panier.

REMARQUES

• Les paramètres que vous enregistrez dans la section Archives du panneau d'options du plug-in s'appliqueront aux pages de base de la boutique et des catégories de produits, tandis que les paramètres de la section Produits s'appliqueront uniquement aux pages de produits.
• Pour cette démo, nous avons utilisé le thème Storefront mais vous pouvez utiliser n'importe quel thème compatible avec WooCommerce.
• Même si la plupart des thèmes s'intègrent sans aucun problème, certains thèmes peuvent modifier les fonctionnalités WooCommerce par défaut et peuvent causer des problèmes lors de l'utilisation de Direct Checkout.
• Nous avons couvert certaines fonctionnalités de base de Direct Checkout. Pour des fonctionnalités plus avancées, consultez les forfaits Premium qui vous aideront à faire passer votre boutique au niveau supérieur.

Conclusion

Dans l'ensemble, la personnalisation du bouton Ajouter au panier peut avoir un impact important sur votre entreprise. C'est pourquoi nous vous recommandons de l'adapter aux besoins de votre magasin. Dans ce guide, vous avez appris différentes manières de personnaliser le bouton Ajouter au panier à la fois par programmation et avec des plugins :

• Modifier le texte du bouton Ajouter au panier
• Ajoutez du texte au-dessus ou au-dessous du bouton Ajouter au panier
• Changer la couleur du bouton Ajouter au panier
• Supprimez le bouton Ajouter au panier et ajoutez un bouton d'achat direct sur la page de la boutique
• Personnalisez le bouton Ajouter au panier et ajoutez un bouton d'achat direct sur la page produit