Comment créer un bouton WooCommerce Ajouter au panier par identifiant de produit

Publié: 2021-02-24

woocommerce bouton ajouter au panier par identifiant de produit WiIl est possible de créer un bouton d'ajout au panier WooCommerce par identifiant de produit et d'utiliser le bouton sur des formulaires, des widgets, des publications ou des pages et même sur des modèles. Idéalement, le bouton Ajouter au panier de WooCommerce peut être personnalisé pour s'adapter à un large éventail d'options personnalisées.

Bouton Ajouter au panier WooCommerce par identifiant de produit

Dans un article précédent, j'ai expliqué comment changer le bouton Ajouter au panier de WooCommerce en un lien et aussi comment changer le bouton Ajouter au panier de WooCommerce pour en savoir plus.
Voici d'autres tutoriels précédents qui peuvent vous aider à en savoir plus sur la façon de personnaliser le bouton d'ajout au panier de WooCommerce :

Comment remplacer le bouton Ajouter au panier par un lien WooCommerce
Comment masquer le bouton En savoir plus et Ajouter au panier WooCommerce
Comment modifier le texte du bouton Ajouter au panier dans la page de la boutique WooCommerce
Comment modifier le guide WooCommerce du texte Ajouter au panier avec des exemples
Comment ajouter un produit au panier par programmation dans WooCommerce
Comment modifier l'avis "Ajouté au panier" de WooCommerce
Comment masquer le prix et l'ajouter au panier pour les utilisateurs déconnectés WooCommerce

Comme vous pouvez le voir dans la liste des didacticiels ci-dessus, il existe plusieurs façons de personnaliser le bouton Ajouter au panier de WooCommerce pour vous aider à obtenir différentes dispositions ou conceptions de contenu.

Par exemple, lorsque vous souhaitez créer un tableau de tarification WooCommerce, vous devrez peut-être créer des boutons d'ajout au panier que vous pourrez ajouter au bouton d'appel à l'action du tableau de tarification.

Bouton Ajouter au panier WooCommerce par identifiant de produit

Créer un bouton WooCommerce de produit simple Ajouter au panier par identifiant de produit

Pour créer le bouton d'ajout au panier de WooCommerce par ID de produit, vous devez connaître l'ID de produit du produit spécifique pour lequel vous souhaitez créer le bouton d'ajout au panier. L'ID de produit peut être trouvé facilement sur la page de présentation de tous les produits, comme expliqué dans ce didacticiel sur - Comment obtenir l'ID de produit WooCommerce .

Ajouter au panier Lien

Vous pouvez maintenant créer l'URL d'ajout de panier que vous n'ajouterez pas au code du bouton à l'endroit où vous souhaitez afficher le bouton. Dans ce cas, vous pouvez créer le lien Ajouter au panier du produit simple comme dans le code ci-dessous :

https://example.com/?add-to-cart=840

L'URL de votre site doit remplacer la partie example.com de l'URL et l'ID de produit spécifique doit remplacer l'ID de produit 840 utilisé dans l'exemple ci-dessus.

Vous pouvez l'ajouter dans un code de bouton HTML comme dans le code ci-dessous :

Créer un produit simple avec la quantité WooCommerce Ajouter au panier Bouton par identifiant de produit

Vous pouvez également ajouter la quantité à l'URL d'ajout au panier et vous pouvez le faire en utilisant les différents paramètres d'URL utilisés pour ajouter une logique aux URL.

Dans ce cas, vous pouvez étendre le code que nous avons créé à l'étape ci-dessus et créer un simple produit WooCommerce bouton d'ajout au panier par ID de produit avec la quantité de 2 comme suit :

https://example.com/?add-to-cart=840&quantity=2

Comme vous pouvez le voir, nous avons ajouté une esperluette et le mot quantité et l'avons assimilé à 2 le nombre d'articles que nous voulons ajouter au panier lorsque le bouton est cliqué sur le même produit.

Pour ajouter cette URL au code HTML et créer le bouton d'ajout au panier de WooCommerce par ID de produit avec la quantité, vous devez utiliser le code ci-dessous :

Créer un bouton WooCommerce Ajouter au panier par identifiant de produit avec redirection vers le panier

Pour permettre aux clients de votre boutique WooCommerce de naviguer plus facilement sur votre site, la création de redirections est très importante. Dans le passé, j'ai mis en évidence les nombreuses façons de créer des redirections WooCommerce.

Notamment, j'ai partagé sur ces articles de blog - WooCommerce crée une redirection après le paiement et une redirection WooCommerce après la déconnexion et a même créé le plug-in de redirection WooCommerce après le paiement pour vous aider à implémenter la redirection après le paiement.

Redirection WooCommerce vers le panier après l'ajout au panier

Vous pouvez également créer une redirection vers le panier avec le bouton Ajouter au panier de WooCommerce par ID de produit. Vous pouvez accomplir cela en modifiant le code que j'ai partagé à l'étape ci-dessus pour qu'il soit comme suit :

https://example.com/cart/?add-to-cart=840

Comme vous le voyez, nous avons ajouté le panier à l' URL pour nous assurer que l'utilisateur est redirigé vers le panier après avoir ajouté le produit au panier. Le code complet avec le code du bouton HTML est le suivant :

Redirection WooCommerce vers la caisse après l'ajout au panier

Vous pouvez également créer une redirection vers la caisse avec le bouton Ajouter au panier de WooCommerce par ID de produit. Vous pouvez y parvenir en modifiant le code que j'ai partagé à l'étape en ajoutant le paiement sur l'URL ci-dessus comme suit :

https://example.com/checkout/?add-to-cart=840

Comme vous le voyez, nous avons ajouté le paiement à l' URL pour nous assurer que l'utilisateur est redirigé vers le paiement après avoir ajouté le produit au panier. Le code complet avec le code du bouton HTML est le suivant :

Conclusion

Dans ce didacticiel, nous avons mis en évidence les différentes façons de créer le bouton Ajouter au panier WooCommerce par ID de produit. Nous avons également vu comment ajouter une redirection vers le bouton Ajouter au panier ainsi que la façon d'ajouter la quantité du produit à l'ajout. au bouton du panier.

J'espère que vous pouvez maintenant créer le bouton d'ajout au panier de WooCommerce par ID de produit et l'utiliser sur votre tableau de prix, vos formulaires et vos modèles. Vous pouvez également personnaliser davantage le bouton Ajouter au panier à l'aide de la classe de boutons que j'ai ajoutée au code ci-dessus. Si vous êtes encore en train de personnaliser votre site, vous pouvez bénéficier des idées que j'ai partagées sur Ultimate WooCommerce Hide Guide.

Pour les utilisateurs de WooCommerce qui ont installé le thème Storefront et qui souhaitent le personnaliser davantage, j'ai partagé une brillante collection de plus de 80 conseils de personnalisation du thème WooCommerce Storefront qui vous guideront sur la façon de créer une apparence personnalisée de votre site en utilisant le thème WooCommerce par défaut - Storefront .

Comment créer un bouton WooCommerce Ajouter au panier par identifiant de produit

Bouton Ajouter au panier WooCommerce par identifiant de produit

Créer un bouton WooCommerce de produit simple Ajouter au panier par identifiant de produit

Ajouter au panier Lien

Créer un produit simple avec la quantité WooCommerce Ajouter au panier Bouton par identifiant de produit

Créer un bouton WooCommerce Ajouter au panier par identifiant de produit avec redirection vers le panier

Redirection WooCommerce vers le panier après l'ajout au panier

Redirection WooCommerce vers la caisse après l'ajout au panier

Conclusion

Articles similaires