Créer un lien pour ajouter un produit au panier avec WooCommerce

Positionner un lien d’ajout au panier de WooCommerce où vous le souhaitez dans votre thème WordPress c’est possible en récupérant l’identifiant produit et en l’injectant dans votre URL.

Le principe est simple : lorsqu’une adresse de votre site contient le paramètre add-to-cart suivi de l’identifiant d’un produit, WooCommerce ajoute ce produit au panier du visiteur, puis affiche la page demandée. Pour le produit n° 123, par exemple :

• https://example.com/panier/?add-to-cart=123 ajoute le produit et affiche le panier ;
• https://example.com/commander/?add-to-cart=123 mène directement à la validation de la commande ;
• https://example.com/panier/?add-to-cart=123&quantity=3 ajoute trois exemplaires du produit.

Remplacez example.com par votre nom de domaine, et /panier/ ou /commander/ par l’adresse de vos pages Panier et Validation de la commande. Pour connaître l’identifiant d’un produit, ouvrez Produits > Tous les produits et survolez son nom : il s’affiche juste en dessous (« ID : 123 »). Ce lien fonctionne partout, sans code : dans un bouton créé avec le bloc Boutons, sur une page ou dans un modèle de thème à blocs, dans un menu ou dans une newsletter.

Ce lien vaut pour un produit simple en stock. Pour un produit variable, indiquez l’identifiant de la variation, affiché après le signe # en tête de chaque variation dans l’onglet Variations des Données produit. Si cette variation laisse l’un de ses attributs libre, précisez aussi sa valeur dans l’adresse, sans quoi WooCommerce affiche une erreur : par exemple &attribute_couleur=Rouge pour un attribut Couleur propre au produit, ou &attribute_pa_couleur=rouge (préfixe pa_ et slug du terme) pour un attribut Couleur global, créé dans Produits > Attributs.

Sachez enfin que tant que le paramètre figure dans l’adresse, chaque rechargement de la page ajoute de nouveau le produit au panier. Si l’option « Rediriger vers la page panier après un ajout réussi » est cochée dans WooCommerce > Réglages > Produits, WooCommerce renvoie en revanche le visiteur vers le panier, à une adresse sans paramètre, quelle que soit la page indiquée dans le lien.

Avec un thème à blocs, dont les modèles sont des fichiers HTML qui n’exécutent pas de PHP, ce lien dans un bloc Boutons est la solution la plus simple. Dans un thème classique, vous pouvez aussi le générer automatiquement pour chaque produit : à l’aide de votre éditeur de code favori, ouvrez le fichier PHP de votre thème, de préférence d’un thème enfant, dans lequel vous souhaitez rajouter un lien d’ajout au panier. Insérez ensuite les lignes de codes ci-dessous :

<?php
global $product;
if ( $product instanceof WC_Product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() ) :
	$wpc_buy_url = add_query_arg( 'add-to-cart', $product->get_id(), wc_get_checkout_url() );
	?>
	<a class="btn btn-success" href="<?php echo esc_url( $wpc_buy_url ); ?>" rel="nofollow"><?php esc_html_e( 'Buy it', 'wpchannel' ); ?></a>
<?php endif; ?>

Dans un premier temps, nous récupérons le produit en cours, puis son identifiant avec la méthode get_id() : l’ancienne écriture $product->id, abandonnée depuis WooCommerce 3.0, déclenche désormais une notice PHP (« appelée de façon incorrecte ») en mode débogage. Vous devez être positionné à l’intérieur de la boucle qui génère l’affichage de ce dernier. Le lien ne s’affiche que pour un produit simple, achetable et en stock : pour les autres, il mènerait à un message d’erreur.

Dans un second temps, nous construisons l’adresse de la page de validation de la commande avec la fonction wc_get_checkout_url(), qui reprend votre nom de domaine et le permalien réel de cette page. Puis nous créons un simple lien en HTML auquel nous attribuons une classe CSS – issue de Twitter Bootstrap en l’occurrence – et, comme WooCommerce pour ses propres boutons d’ajout au panier, l’attribut rel="nofollow". Modifiez à présent les éléments suivants :

• La page de destination : remplacez wc_get_checkout_url() par wc_get_cart_url() pour mener au panier plutôt qu’à la validation de la commande ;
• Les classes CSS du lien, selon votre thème ;
• Le domaine de traduction wpchannel, à remplacer par celui de votre thème ;
• L’intitulé du bouton qu’il vous faudra traduire avec Poedit ;

Dès lors que vous aurez ajusté ces lignes de code selon vos besoins, sauvegardez le fichier et ouvrez la page de votre site basée sur votre template PHP. Si tout fonctionne bien, un simple clic ajoutera le produit au panier et mènera le visiteur à la validation de sa commande.

Besoin d’aller plus loin dans la personnalisation du tunnel d’achat ? Mon offre de maintenance WooCommerce vous accompagne sur ce type d’évolution.

Pour envoyer l’acheteur directement au paiement, vous pouvez aussi supprimer la page Panier du tunnel d’achat.