Comment ajouter un bouton d'achat rapide dans WooCommerce ? Avec et sans plugins

Publié: 2020-06-01

Si vous exploitez une entreprise en ligne, vous recherchez peut-être des moyens d'augmenter les ventes, les conversions et les revenus. Vous pouvez capturer les adresses e-mail des visiteurs, activer les fenêtres contextuelles d'intention de sortie ou envoyer des newsletters, mais il existe quelque chose de beaucoup plus puissant. Dans cet article, nous allons vous montrer comment ajouter un bouton d'achat rapide dans WooCommerce !

Qu'est-ce qu'un bouton d'achat rapide ?

Un bouton d'achat rapide, également appelé bouton d'achat immédiat, permet à vos acheteurs d'acheter plus rapidement les produits qu'ils souhaitent et d'éviter les étapes supplémentaires du processus de paiement. Ainsi, au lieu d'avoir à ajouter des articles au panier, à accéder à la page du panier, puis à la page de paiement, ils peuvent passer de la page du produit à la page de paiement en un clic. De cette façon, vous réduisez les abandons et les abandons de panier.

La plupart des grandes entreprises de commerce électronique telles qu'Amazon ont un bouton d'achat rapide sur leur page produit qui vous permet d'acheter en un clic. Ainsi, lorsqu'un acheteur clique sur le bouton acheter maintenant, il est automatiquement redirigé vers la page de paiement. Comme vous pouvez l'imaginer, c'est un excellent moyen d'augmenter les ventes.

Pourquoi devriez-vous utiliser un bouton d'achat rapide WooCommerce ?

Plus de 75% des acheteurs quittent les boutiques en ligne avec des produits dans leur panier. L'une des principales raisons à cela est que le processus d'achat est long et déroutant. Plus ce processus est long, plus les utilisateurs ont de chances de se retirer. L'une des meilleures solutions consiste donc à ajouter un bouton d'achat rapide à votre boutique WooCommerce. Cela ne signifie pas que vous devez vous débarrasser du bouton Ajouter au panier. Tous vos visiteurs ne sont pas prêts à acheter au moment où ils visitent votre site.

Cependant, donner aux utilisateurs qui sont prêts à acheter immédiatement la possibilité de le faire en un clic vous aidera à augmenter vos conversions. De plus, les boutons d'achat rapide sont une bonne idée pour les sites Web d'abonnement ou d'adhésion. Lorsqu'un utilisateur s'inscrit à un abonnement, tout ce que vous avez à faire est de le rediriger vers la page de paiement au lieu de le diriger vers la page du panier, puis vers le paiement.

Comment ajouter un bouton d'achat rapide dans WooCoommerce ?

Il existe trois méthodes principales pour ajouter un bouton d'achat rapide dans WooCommerce :

  1. Brancher
  2. Par programmation (codage)
  3. Codes abrégés

Toutes ces méthodes sont 100% adaptées aux débutants, vous pouvez donc choisir celle qui vous convient le mieux.

1) Plug-in

Il existe de nombreux plugins WordPress disponibles pour ajouter un bouton d'achat rapide à votre site. Cependant, nous recommandons WooCommerce Direct Checkout de QuadLayers, l'un des meilleurs modules complémentaires légers pour simplifier le processus de paiement.

Direct Checkout pour WooCommerce est un outil freemium qui a une version gratuite et trois plans premium qui commencent à 20 USD (paiement unique). La version gratuite compte plus de 70 000 installations actives et de nombreuses fonctionnalités intéressantes. Mais si vous voulez des fonctionnalités plus avancées, la version pro est votre meilleur choix.

Installation et activation du plugin

1) Installez le plugin sur votre site.

2) Ensuite, activez-le.

Si vous utilisez certains des plans premium, à partir de la même page, vous pourrez télécharger les fichiers de plugin téléchargés. Ensuite, cliquez sur Installer maintenant .

Après l'installation, activez le plugin.

Maintenant que le paiement direct pour WooCommerce est activé, examinons la configuration.

Activer la licence

Sous WooCommerce > Paramètres > Paiement direct , vous pourrez voir les options de configuration pour simplifier le processus de paiement.

ajouter un bouton d'achat rapide dans woocommerce - Configuration de paiement direct

La prochaine chose que vous devez faire est d'activer la copie premium du plugin avec une clé de licence valide.

La clé de licence se trouve sur votre compte QuadLayers. Copiez simplement la clé de licence et collez-la dans les paramètres de vos plugins avec l'adresse e-mail qui lui est associée. La vérification de votre clé est importante car elle vous permettra d' obtenir des mises à jour automatiques. Chaque fois qu'il y a une nouvelle version du plugin, vous pouvez la mettre à jour directement depuis votre tableau de bord WordPress.

Configuration

Avant d'ajouter un bouton Acheter maintenant à WooCommerce, vous devez configurer et personnaliser vos options de paiement. Tout d'abord, assurez-vous d'avoir des produits disponibles dans votre boutique afin de pouvoir tester la personnalisation. Dans notre cas, nous avons un produit de test et, comme vous pouvez le voir, la page du produit ne comporte qu'un bouton Ajouter au panier .

Chaque fois qu'un visiteur clique sur ce bouton, le produit sera ajouté à son panier. Le client devra se rendre sur la page du panier, puis sur la page de paiement. Ainsi, avec Direct Checkout, vous pouvez diriger l'acheteur de la page du produit vers la page de paiement en sautant la page du panier. De cette façon, vous pouvez augmenter les conversions.

L'utilisation de ce plugin est très simple. Dans la section Paramètres de paiement direct, vous verrez l'option de désactiver la page du panier. Tout ce que vous avez à faire est d'activer la redirection et d'ajouter la page de paiement comme destination.

Après cela, assurez-vous d'enregistrer les modifications.

ajouter un bouton d'achat rapide dans woocommerce - configuration de paiement direct WC

Maintenant, vous êtes prêt à partir. Lorsque les acheteurs cliquent sur le bouton d'achat, ils sont automatiquement redirigés vers la page de paiement. À partir de là, le client pourra ajouter des informations de facturation, des adresses de livraison et effectuer le paiement.

Le plug-in WooCommerce Direct Checkout vous permet également de supprimer les champs de paiement, les adresses de facturation, les adresses de livraison, etc.

Tarification de paiement direct WooCommerce

Direct Checkout pour WooCommerce a une version gratuite avec des fonctionnalités de base et trois plans premium. Comment ajouter un bouton d'achat rapide - Tarification WooCommerce Direct Checkout

  • Personnel – Paiement unique de 20 USD – Clé de licence unique
  • Agence – 40 USD paiement unique – 5 clés de licence
  • Développeur – Paiement unique de 80 USD – Clés de licence illimitées

La version gratuite est excellente et contient tout ce dont vous avez besoin pour commencer. Mais si vous voulez des fonctionnalités plus avancées, nous vous recommandons d'essayer le plan Personnel ou Agence.

Vérifiez le paiement direct WooCommerce

Si vous souhaitez jeter un œil à d'autres outils, consultez notre liste des meilleurs plugins d'achat rapide. Si, en revanche, vous souhaitez personnaliser encore plus votre page de paiement en ajoutant et en modifiant des champs de paiement, vous pouvez consulter WooCommerce Checkout Manager.

2) Par programmation (codage)

Si vous ne souhaitez installer aucun plugin, vous pouvez ajouter un bouton d'achat rapide dans WooCommerce par programme. Cette méthode nécessite des connaissances techniques et de la patience. Cependant, si vous suivez ces étapes, vous pourrez le faire même si vous êtes débutant. Nous allons vous montrer comment créer un bouton d'ajout au panier, modifier son URL et comment l'insérer pour des produits simples, variables et groupés.

1- Créer une URL de paiement

Tout d'abord, vous devez ajouter le lien au bouton d'ajout au panier. Vous devez remplacer PRODUCT_ID par le code du produit que vous souhaitez inclure dans le panier.

 https://votredomaine.com/cart/?add-to-cart=PRODUCT_ID

Comme nous voulons que les utilisateurs ignorent la page du panier et les redirigent vers la page de paiement, nous devons modifier l'URL comme suit :

 https://votredomaine.com/checkout/?add-to-cart=PRODUCT_ID

2- Créer un lien produit

Après cela, vous devez modifier l'URL en fonction du type de produit : unique, variable et groupé. A) Produit unique L'URL des produits uniques est :

 https://votredomaine.com/checkout/?add-to-cart=PRODUCT_ID

Vous devez remplacer PRODUCT_ID par votre ID de produit. Par exemple, pour un seul produit avec ID = 10, le lien sera :

 https://votredomaine.com/checkout/?add-to-cart=10

B) Produit variable Pour les produits variables, vous devez obtenir l'ID de la variation depuis Produits > Variations et utilisez cet ID de variante dans l'URL comme suit :

 https://votredomaine.com/checkout/?add-to-cart=VARIATION_ID

Donc, si votre ID de variation = 29, le lien sera :

 https://votredomaine.com/checkout/?checkout=29

Vous pouvez également créer le lien à l'aide de l'ID de produit et de l'ID de variante :

 https://votredomaine.com/checkout/?checkout=PRODUCT_ID&variation_id=VARIATION_ID

Cependant, nous vous recommandons d'utiliser uniquement l'ID de variante, car c'est plus simple.

REMARQUE : Cela ne fonctionnera que pour les variations qui ont tous les attributs générés. Pour les autres variantes, vous devez ajouter la définition de l'attribut manquant au lien. Par exemple, supposons que vous souhaitiez créer l'URL pour l'ID de variation = 30. La couleur de l'attribut est définie (vert) mais pas la taille. Donc, si nous voulons ajouter la taille = moyen, l'URL sera :

 https://votredomaine.com/checkout/?checkout=30&pa_size=medium

C) Produit groupé Pour les produits groupés, au lieu d'ajouter l'ID de variation, vous devez ajouter l'ID de produit groupé avec l'ID de produit des sous-produits et les quantités pour chacun d'eux.

 https://votredomaine.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

Par exemple, nous inclurons ici l'ID de produit groupé = 1900 et l'ID de sous-produit = 10 et 15.

 https://votredomaine.com/checkout/?add-to-cart=1900&quantity[10]=1&quantity[15]=1

3- Définir la quantité

De plus, vous pouvez également définir le nombre de produits que vous souhaitez inclure. Pour cela, vous devez utiliser le paramètre quantité . Si vous ne précisez pas le nombre de produits, par défaut ce sera 1.

Voyons maintenant comment inclure la quantité de paramètres dans des produits uniques, variables et groupés.

A) Produit unique Vous ajoutez le paramètre quantité après le product_id :

 https://votredomaine.com/checkout/?add-to-cart=PRODUCT_ID&quantity=1

Donc si vous voulez ajouter l'ID produit = 10 x2, le lien sera :

 https://votredomaine.com/checkout/?add-to-cart=10&quantity=2

B) Produit variable Pour les produits variables, la logique est la même :

 https://votredomaine.com/checkout/?add-to-cart=VARIATION_ID&quantity=1

Pour la variation ID = 29 et la quantité = 3, le lien sera :

 https://votredomaine.com/checkout/?add-to-cart=29&quantity=3

C) Produits groupés Enfin, pour les produits groupés, l'URL standard est :

 https://votredomaine.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

Ainsi pour le produit groupé ID = 1900, le lien avec le produit ID = 10 x3 et le produit ID = 15 x2 sera :

 https://votredomaine.com/checkout/?add-to-cart=1900&quantity[10]=3&quantity[15]=2

Une fois que vous avez fini de personnaliser l'URL, si vous vérifiez la page depuis le frontend, vous pourrez voir une URL d'ajout au panier qui redirigera les utilisateurs directement vers la page de paiement. Cela fonctionne fonctionnellement mais n'a pas l'air génial. Vous devez maintenant transformer ce lien en un joli bouton, en ajoutant un peu de style avec un peu de CSS.

4- Définir le style du bouton

Après avoir modifié toutes les URL, vous devez créer le bouton acheter maintenant. Comme nous dirigerons les clients directement vers la caisse, nous appellerons le bouton Acheter maintenant au lieu d' Ajouter au panier .

Dans WooCommerce, il existe deux styles de boutons :

1. Style de bouton par défaut

 <a class="button" href="#">Acheter maintenant</a>

2. Style de bouton alternatif

 <a class="button alt" href="#">Acheter maintenant</a>

De plus, vous pouvez créer votre style de bouton personnalisé :

 <a class="button my-button" href="#">Acheter maintenant</a>

Le code suivant affichera un bouton rouge avec des lettres blanches et une fine bordure bleue.

 .mon-bouton {
Couleur blanche;
couleur de fond : rouge ;
bordure : 1 pixel bleu uni ;
rayon de bordure : 3 px ;
boîte-ombre : 0px 0px 22px 0px rgba(0,0,0,0.75);
}

Copiez et collez simplement le code dans le tableau de bord WordPress > Apparence > Personnaliser > CSS personnalisé. ajouter un bouton d'achat rapide dans woocommerce - Style de bouton

Ensuite, personnalisez-le pour lui donner l'apparence de votre site en modifiant les couleurs, les bordures, la taille, etc. Si vous souhaitez personnaliser votre boutique avec un peu de codage, nous vous recommandons de consulter certains des guides suivants :

  • Comment personnaliser le bouton Ajouter au panier
  • Comment modifier la page de la boutique
  • Personnalisez la page de paiement étape par étape

3) Codes abrégés

La dernière méthode que nous verrons pour ajouter un bouton acheter maintenant consiste à utiliser des codes abrégés. Même s'il n'y a pas de shortcode pour un bouton d'achat rapide dans WooCommerce, il existe des solutions de contournement pour faire quelque chose de similaire. Cette méthode est utile si, par exemple, vous souhaitez promouvoir un de vos produits sur un article de blog, vous pouvez ajouter un article en option d'achat rapide sans avoir à le lier au produit.

WooCommerce est livré avec de nombreux codes abrégés que vous pouvez utiliser n'importe où sur votre site. La grande chose à propos de l'utilisation de shortcodes est que vous n'avez pas besoin de modifier les fichiers principaux ou quoi que ce soit. Copiez et collez simplement le shortcode où vous voulez l'afficher et c'est tout.

Ajouter au panier un shortcode

Comme il n'y a pas de shortcode pour un bouton d'achat rapide, nous allons ajouter un bouton Ajouter au panier, puis modifier l'URL pour rediriger l'utilisateur vers la caisse. Tout d'abord, connectez-vous à votre site WordPress et accédez à l'éditeur de contenu où vous souhaitez afficher le bouton Ajouter au panier. Ici, vous ajouterez le bouton à l'une de vos publications d'avis de produits par exemple.

L'éditeur Gutenberg est livré avec le bloc de code court, alors ajoutez le bloc à votre zone de contenu. ajouter un bouton d'achat rapide dans woocommerce - shortcode Le shortcode que nous utiliserons pour le bouton est :

 [ add_to_cart ]

Vous devez remplacer l' ID par l'ID de votre produit. Vous pouvez récupérer votre identifiant de produit unique dans la section Produits WooCommerce .

Dans notre cas, l'ID du produit est 10, nous allons donc modifier le shortcode comme suit :

 [ add_to_cart ]

En suivant cet exemple, collez le shortcode dans votre zone de contenu et publiez ou mettez à jour la publication.

Ainsi, lorsque vous vérifiez votre article depuis le frontend, vous verrez un bouton élégant qui permettra à vos clients d'ajouter le produit avec ID=10 à leur panier. ajouter un bouton d'achat rapide dans woocommerce - Exemple de shortcode

Vous pouvez également personnaliser le shortcode avec certains attributs. Outre l'ID, le shortcode prend en charge d'autres attributs tels que la classe, la quantité, le SKU, le style et affiche le prix. Par exemple, vous pouvez modifier le bouton Ajouter au panier avec un shortcode comme celui-ci :

 [ add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” ]

Écrivez simplement les valeurs correctes pour votre produit dans chaque attribut. De plus, vous pouvez personnaliser le style du bouton. L'un des avantages de cette méthode est que vous pouvez également insérer un bouton d'ajout au panier dans l'une des zones du widget.

Modifier l'URL pour diriger les utilisateurs vers la caisse

Une fois que vous avez placé le shortcode, n'oubliez pas de modifier l'URL du panier pour diriger l'utilisateur vers la caisse.

 href="http://votredomaine.com/checkout/?add-to-cart=10″

Pour ce faire, il existe deux options :

  1. Dans votre tableau de bord WP, ​​accédez à WooCommerce > Paramètres > Produits > Général . Ici, cochez l'option " Activer les boutons d'ajout au panier AJAX sur les archives " et désactivez "Redirection vers la page du panier après un ajout réussi". ajouter un bouton d'achat rapide dans woocommerce - Dirigez les utilisateurs vers la caisse

  2. Installez Direct Checkout pour WooCommerce pour ignorer la page du panier et rediriger les acheteurs de la page du produit vers la page de paiement.

Dépannage

Si vous avez modifié le bouton CSS et que le changement ne se reflète pas dans votre interface, il s'agit probablement d'un problème concernant le cache. Donc, pour le réparer, videz simplement le cache de votre navigateur et le cache de WordPress. Si le bouton n'apparaît toujours pas, revérifiez le code.

Conclusion

Dans l'ensemble, l'ajout d'un bouton d'achat rapide à votre boutique WooCommerce peut vous aider à augmenter les conversions. Vous avez appris 3 façons différentes d'y parvenir :

  1. Avec un plugin
  2. Par programmation (codage)
  3. Avec des codes abrégés

Le moyen le plus simple consiste à utiliser le plug-in Direct Checkout . En quelques clics, vous pourrez diriger vos utilisateurs de la page produit vers la page de paiement. Si vous ne souhaitez utiliser aucun plugin, la méthode de codage est un excellent choix mais nécessite quelques compétences techniques.

enfin, une autre option intéressante pour raccourcir le processus de paiement et booster la conversion consiste à créer des liens de paiement direct sur votre boutique. Pour plus d'informations à ce sujet, vous pouvez consulter notre guide étape par étape.

Nous espérons que vous avez trouvé ce guide utile et appris comment ajouter un bouton d'achat rapide dans WooCommerce. Si vous l'avez fait, pensez à partager ce message sur les réseaux sociaux.

Quelle méthode allez-vous essayer sur votre site ? Que faites-vous d'autre dans votre magasin pour augmenter les taux de conversion ? Faites-nous savoir dans les commentaires ci-dessous!