Si vous vendez un produit WooCommerce qui a une description détaillée du produit sur sa page de produit, le bouton Ajouter au panier descend sur la page, par défaut. Cette courte description du produit décrit les caractéristiques du produit et est généralement placée juste en dessous du prix du produit.

Lorsque le bouton Ajouter au panier descend sur la page, cela peut réduire vos chances de conversion. Par conséquent, dans de telles situations, il est toujours préférable d’avoir le bouton Ajouter au panier en haut pour faciliter le clic des clients.

Dans cet article, je vais montrer comment vous pouvez déplacer le bouton Ajouter au panier au-dessus de la description courte du produit dans WooCommerce.

Déplacer le bouton ajouter au panier

Pour ce faire, ajoutez l’extrait de code suivant à la fin du fichier Themes Function(functions.php) du thème de votre site Web actuellement activé. Vous pouvez localiser ce fichier dans Apparence> Éditeur> cliquez sur le fichier functions.php parmi les fichiers répertoriés à droite.

Code pour déplacer le bouton ajouter au panier

remove_action( 'woocommerce_single_product_summary', 
'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 
'woocommerce_template_single_add_to_cart', 15 );

Voici les crochets pour une page de produit unique et ses priorités associées :

woocommerce_template_single_title - 5
woocommerce_template_single_price - 10
woocommerce_template_single_excerpt - 20
woocommerce_template_single_add_to_cart - 30
woocommerce_template_single_meta - 40
woocommerce_template_single_sharing - 50

Vous pouvez modifier la priorité des autres crochets de la page pour les personnaliser selon vos besoins.

Conseil : Vous pouvez également utiliser cet extrait de code pour les produits simples, groupés et externes.

Par conséquent, de cette manière, vous pouvez déplacer le bouton Ajouter au panier au-dessus de la description courte du produit dans WooCommerce.

Pour savoir plus sur les hooks woocommerce et comment placer les elements sur votre boutique woocommerce vous pouvez voir notre article qui liste les hooks les plus utilisés avec des exemple.