Pour ajouter un produit au panier WooCommerce sans passer par sa fiche, il suffit d’un lien : ?add-to-cart= suivi de l’identifiant du produit, ou directement de l’identifiant de la variation. Vous pouvez placer ce lien sur n’importe quel bouton ou image, dans une page conçue librement avec Elementor, et envoyer le client au panier ou à la commande.
En bref
- Produit simple :
/?add-to-cart=ID, avec&quantity=si besoin. - Variation :
/?add-to-cart=ID_DE_LA_VARIATION, l’identifiant de la variation suffit. - Remplacez
/par l’adresse de votre panier ou de votre page de commande pour y envoyer le client. - Masquer la fiche du catalogue ne la rend pas inaccessible : redirigez-la vers votre page.
- Aucune modification du code de WooCommerce : vos mises à jour restent sans risque.
Le contexte
Pour un client, on vendait un seul produit, une box, en plusieurs versions : trois contenus possibles, et sept variations au total. Plutôt que la fiche produit standard de WooCommerce, on voulait une vraie page de présentation, dessinée librement, avec une image et un bouton par version.
Le tout sans modifier le code de WooCommerce, pour pouvoir continuer à faire les mises à jour sereinement. La solution : des liens d’ajout au panier.
Les formats de lien
WooCommerce documente ces formats, à adapter avec l’adresse de votre site :
- Produit simple :
https://votre-site.fr/?add-to-cart=174&quantity=1 - Variation :
https://votre-site.fr/?add-to-cart=220&quantity=1, où 220 est l’identifiant de la variation, pas celui du produit parent. - Produit groupé :
https://votre-site.fr/?add-to-cart=ID_DU_GROUPE&quantity[ID_DU_PRODUIT]=2, en répétantquantity[…]pour chaque produit du groupe.
Pour envoyer le client directement à l’étape suivante, mettez l’adresse de la page voulue avant le ? :
- au panier :
https://votre-site.fr/panier/?add-to-cart=220 - à la commande :
https://votre-site.fr/commande/?add-to-cart=220
Utilisez bien l’adresse de vos propres pages panier et commande, si elles ne s’appellent pas /panier/ et /commande/.
Trouver les identifiants
- Le produit : dans Produits, survolez le nom du produit, son identifiant s’affiche juste en dessous.
- Chaque variation : dans la fiche du produit, onglet Variations, chaque variation affiche son numéro (par exemple « #220 »).
Un cas particulier : si une variation accepte « n’importe quelle » valeur pour un attribut, WooCommerce ne peut pas deviner laquelle mettre au panier. Ajoutez alors l’attribut au lien, par exemple &attribute_pa_couleur=bleu. Le plus simple pour connaître le bon nom : ajoutez cette variation au panier depuis la fiche produit, et regardez le lien du produit dans le panier, qui contient ces paramètres.
Placer les liens sur votre page
Dans Elementor, mettez l’adresse dans le champ Lien d’un widget Bouton ou Image, un par variation. Pour sept variations, comptez sept liens : un peu fastidieux la première fois, rapide ensuite.
Ajoutez l’attribut rel="nofollow" à ces liens : les robots des moteurs de recherche n’ont pas à les suivre, et chaque visite d’un robot ajouterait sinon un produit à un panier.
Masquer la fiche produit
La fiche standard reste accessible : depuis le panier, le compte client ou l’e-mail de commande, le nom du produit y renvoie. Deux réglages complémentaires :
- La retirer du catalogue : dans la fiche du produit, bloc Publier, réglez « Visibilité du catalogue » sur Masqué. Le produit disparaît de la boutique et de la recherche du site.
- La rediriger vers votre page : la fiche reste joignable par son adresse. Redirigez-la, avec une extension de redirection ou ce code :
add_action( 'template_redirect', 'wycan_rediriger_fiche_produit' );
function wycan_rediriger_fiche_produit() {
if ( is_product() && 174 === get_the_ID() ) {
wp_safe_redirect( home_url( '/ma-box/' ), 301 );
exit;
}
}Remplacez 174 par l’identifiant de votre produit et /ma-box/ par l’adresse de votre page.
Besoin d’une page produit sur mesure ?
Une page de vente dessinée pour votre produit, des boutons qui ajoutent la bonne variation, un parcours d’achat court : c’est le genre de détail qu’on soigne dans nos boutiques.
Découvrir nos créations de sites ou nous parler de votre projet
