Comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce

Vous voulez savoir comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce ?

La personnalisation des boutons de votre boutique WooCommerce peut vous aider à capter l'attention, à améliorer les taux de conversion et les ventes.

Dans cet article, nous vous montrerons étape par étape comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce.

Pourquoi personnaliser votre bouton Ajouter au panier WooCommerce ?

La modification de votre bouton d'ajout au panier vous aide à l'aligner sur les produits WooCommerce que vous vendez. Si vous vous en tenez au bouton de panier par défaut, il se peut qu'il n'ait aucun rapport avec le type de produit.

Par exemple, vous pouvez modifier le texte d'ajout au panier et le remplacer par une icône ou une case à cocher pour plusieurs produits. Vous pouvez également modifier la couleur du bouton pour vous démarquer davantage sur votre site.

Vous pouvez également afficher des boutons de panier ailleurs sur votre site WooCommerce, tels que votre page de paiement, vos catégories et votre page de panier.

Pour faire l'une des choses ci-dessus, vous aurez besoin d'un moyen de personnaliser facilement votre bouton d'ajout au panier, avec un minimum de tracas.

Comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce

Heureusement, nous partageons 2 méthodes pour créer un bouton d'ajout au panier personnalisé WooCommerce. La première méthode utilise un plugin WordPress simple et puissant, et la deuxième méthode vous montre comment personnaliser manuellement les boutons de votre panier sans plugin.

Méthode 1 : Ajouter un bouton d'ajout au panier personnalisé avec SeedProd

Pour la première méthode, nous utiliserons SeedProd, le meilleur constructeur de site Web pour WordPress.

Ce plugin puissant comprend un générateur de page par glisser-déposer qui vous permet de personnaliser n'importe quelle partie de votre site Web sans code. Vous pouvez créer des thèmes WordPress personnalisés, créer des pages de destination à forte conversion et personnaliser n'importe quelle mise en page avec pointer-cliquer.

Étant donné que SeedProd inclut le support WooCommerce, vous pouvez l'utiliser pour concevoir et lancer des sites WooCommerce entiers sans développeur. Suivez les étapes ci-dessous pour utiliser SeedProd pour ajouter un bouton d'ajout au panier personnalisé à votre site WooCommerce.

Étape 1. Installer et activer SeedProd

Tout d'abord, rendez-vous sur la page de tarification SeedProd et choisissez votre plan SeedProd. Pour accéder aux fonctionnalités de WooCommerce, vous aurez besoin du plan SeedProd Elite .

Ensuite, connectez-vous à votre compte SeedProd, cliquez sur l'onglet Téléchargements et téléchargez le fichier .zip du plugin. Vous pouvez également copier la clé de licence sur la même page.

Vous pouvez maintenant télécharger le plugin sur votre site Web WordPress. Si vous avez besoin d'aide, suivez ce guide sur l'installation et l'activation d'un plugin WordPress.

Après avoir installé SeedProd, accédez à la page Paramètres de SeedProd et collez la clé de licence que vous avez enregistrée précédemment.

Assurez-vous de cliquer sur le bouton Vérifier la clé avant de passer à l'étape suivante.

Remarque : SeedProd vous permet d'ajouter des boutons d'ajout au panier personnalisés à WooCommerce de 2 façons :

• Utilisation d'une page de destination
• Créer un thème WooCommerce personnalisé

Pour ce didacticiel, nous allons créer un thème WooCommerce personnalisé car il crée automatiquement toutes les pages de votre boutique WooCommerce.

Étape 2. Choisissez un kit de site Web

Pour l'étape suivante, accédez à la page SeedProd » Theme Builder . C'est ici que vous pouvez créer les différentes parties de votre thème WooCommerce et personnaliser la conception de chaque modèle.

Vous pouvez le faire soit en construisant chaque partie à partir de zéro, soit en utilisant un kit de site Web préfabriqué. Nous allons opter pour la deuxième option car c'est plus facile et plus rapide.

Pour choisir un kit de site Web, cliquez sur le bouton Thèmes .

Sur l'écran suivant, vous verrez les kits de sites Web disponibles. Les kits compatibles WooCommerce auront "WooCommerce" à côté de leurs titres.

Vous pouvez ensuite survoler un design que vous aimez et cliquer sur l'icône de coche pour l'importer dans votre générateur de thèmes.

Pour ce guide, nous utilisons le kit de site Web Pottery Shop WooCommerce .

Après avoir importé votre kit de site Web, vous verrez les différentes parties de votre thème dans une liste comme celle-ci :

SeedProd crée automatiquement des pages de contenu, telles que vos pages à propos, panier, paiement et contact. Vous pouvez afficher ces pages en accédant à Pages » Toutes les pages de votre tableau de bord WordPress et les personnaliser avec le générateur de pages par glisser-déposer de SeedProd.

Commençons le processus de personnalisation en personnalisant votre bouton d'ajout au panier WooCommerce.

Étape 3. Personnalisez votre bouton Ajouter au panier

Ci-dessous, nous vous montrerons comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce sur vos pages Boutique, Produit, Archives de produits et Blog.

Ajout d'un bouton d'ajout au panier à la page de la boutique personnalisée

Tout d'abord, nous commencerons par modifier votre page de boutique WooCommerce. Pour ce faire, recherchez la partie du modèle de page d'achat et cliquez sur le lien Modifier le design .

Votre page de boutique WooCommerce s'ouvrira dans le générateur de page par glisser-déposer de SeedProd, où vous pourrez personnaliser votre conception sans code.

Vous pouvez cliquer sur l'aperçu en direct pour modifier n'importe quel élément de la page et personnaliser ses paramètres. De même, vous pouvez faire glisser des blocs depuis le panneau de gauche et les déposer sur votre page pour ajouter plus de contenu.

Par défaut, le modèle Shop Page utilise le bloc Products Grids . En cliquant dessus, vous verrez les paramètres pour contrôler l'apparence de vos listes de produits.

Par exemple, vous pouvez modifier le nombre de colonnes, filtrer les produits par ID de produit, requête ou type, et modifier l'ordre dans lequel ils s'affichent.

Vous pouvez également cliquer sur l'onglet Avancé pour voir plus d'options de personnalisation, y compris les styles de police, les couleurs, les bordures, etc.

Dans la section Boutons, vous pouvez personnaliser votre bouton d'ajout au panier WooCommerce en quelques clics. Par exemple, dans la liste déroulante Style de bouton, vous pouvez choisir :

• Appartement
• 2D
• Ancien
• Fantôme
• Lien

De plus, vous pouvez modifier la couleur, la typographie, la taille et le rayon de la bordure du bouton.

Expérimentez avec les options de personnalisation pour trouver un look qui correspond aux besoins de votre entreprise. Ensuite, appuyez sur le bouton Enregistrer dans le coin supérieur droit pour enregistrer vos modifications, puis cliquez sur l'icône X pour revenir au générateur de thèmes.

Modification du bouton d'ajout au panier de la page produit

Voyons maintenant comment personnaliser le bouton d'ajout au panier sur les pages de produits uniques. Vous devrez trouver le modèle de page produit et cliquer sur le lien Modifier le design pour l'ouvrir.

Cette fois, vous verrez les détails d'un seul produit dans l'éditeur visuel de SeedProd.

Par défaut, il affichera :

• Image du produit
• Titre du produit
• Prix ​​du produit
• brève description
• Bouton Ajouter au panier
• Onglets de données produit

Vous pouvez personnaliser chaque élément en cliquant dessus pour afficher leurs paramètres. Par exemple, cliquer sur le bouton Ajouter au panier vous permet de changer le texte du bouton en quelque chose de plus engageant.

Vous pouvez également modifier l'alignement des boutons et ajouter une icône à partir de la bibliothèque d'icônes Font Awesome.

L'onglet Avancé vous permettra de modifier les couleurs, la typographie, les ombres et l'espacement de vos boutons comme auparavant.

Modification de votre bouton de panier d'archives de produits

La modification de votre bouton d'ajout au panier sur vos archives de produits suit un processus similaire à celui de votre page de boutique. Recherchez simplement la partie du modèle Archives de produits et cliquez sur le lien Modifier la conception pour l'ouvrir dans l'éditeur visuel.

Le bloc que SeedProd utilise sur cette page est le bloc Archive Products . Les utilisateurs verront cette page s'ils cliquent sur l'en-tête d'une catégorie de produits ou s'ils utilisent la barre de recherche de votre boutique.

Ce bloc n'affichera pas d'aperçu dans l'éditeur visuel en direct ; cependant, vous pouvez toujours personnaliser ce que le bloc affiche sur le front-end en ouvrant ses paramètres.

Par exemple, vous pouvez modifier le nombre de colonnes, afficher les éléments par nombre et trier par filtre. De plus, vous pouvez activer le filtrage par requête, par exemple :

• Interroger par attribut
• Sélectionner par balises
• Sélectionner par catégorie
• Sélectionner par SKU de produit
• Sélectionner par groupe
• Sélectionner par visibilité

Ensuite, dans l'onglet Avancé , vous pouvez personnaliser le bouton d'ajout au panier en modifiant ses couleurs, sa police, son espacement, sa taille, etc.

Ajout d'un bouton d'ajout au panier personnalisé sur la page de blog

Votre page de blog est un autre endroit où vous pouvez afficher un bouton d'ajout au panier. De cette façon, vous pouvez recommander des produits après les articles de blog pour augmenter les ventes.

Pour ce faire avec SeedProd, recherchez le modèle de page de blog et cliquez sur le lien Modifier le design .

Par défaut, votre page de blog affichera une liste de vos derniers articles de blog, mais vous pouvez la personnaliser pour inclure tout autre contenu que vous aimez.

Ajoutons une section à cette page présentant un nouveau produit. Tout d'abord, faites glisser un bloc de colonnes sur la page et choisissez une disposition de colonne.

Ensuite, choisissez le bloc Image et ajoutez une image de produit.

Dans la deuxième colonne, vous pouvez utiliser les blocs Titre et Paragraphe pour le titre et la description de votre produit. Ensuite, faites glisser le bouton Ajouter au panier pour que les utilisateurs puissent ajouter le produit à leur panier.

Maintenant, cliquez sur le bloc pour ouvrir ses paramètres et ajoutez le texte de votre bouton d'ajout au panier personnalisé.

Vous aurez également besoin de l'ID de produit pour ce produit spécifique. Vous pouvez le trouver en accédant à Produits »Tous les produits de votre tableau de bord WordPress et en copiant la valeur de l'ID.

Ensuite, vous pouvez coller l'ID dans le champ ID du produit sur votre bouton d'ajout au panier. Cela garantira que le produit spécifique est ajouté à votre panier après avoir cliqué sur l'URL Ajouter au panier.

N'oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos modifications.

Étape 4. Enregistrez et publiez vos modifications

Lorsque vous êtes satisfait de l'apparence de vos pages WooCommerce, vous êtes prêt à faire vivre votre boutique. Pour ce faire, revenez au générateur de thèmes et, dans le coin supérieur droit, activez la bascule Activer le thème SeedProd sur la position "Activé".

Jetons un coup d'œil à certaines des pages que nous avons personnalisées :

Boutique

Fiche produit

Page d'archives

Blog

Méthode 2 : ajouter un bouton d'ajout au panier personnalisé avec du code

La méthode suivante que nous vous montrerons consiste à modifier le code sur votre site Web WordPress. Nous vous déconseillons généralement de le faire si vous êtes débutant, car cela peut casser votre site Web.

Cela dit, nous comprenons que certaines personnes ne souhaitent pas écraser complètement la conception de leur site Web existant.

Avant de commencer, nous vous suggérons de créer un thème enfant pour vous assurer de ne pas perdre vos modifications lorsque vous mettez à jour votre thème WordPress. Vous devez également sauvegarder votre site WordPress pour le restaurer en toute sécurité en cas de problème.

Parce que nous allons gérer des extraits de code pour cette méthode, c'est une bonne idée d'installer un plugin d'extraits de code, comme WPCode. Cela signifie que vous n'aurez pas besoin de modifier directement vos fichiers de thème.

Lorsque tout est prêt, vous pouvez commencer à ajouter manuellement des boutons d'ajout au panier personnalisés dans WooCommerce.

Modifier le texte du bouton Ajouter au panier sur les pages de produits

Tout d'abord, nous verrons comment modifier le texte du bouton d'ajout au panier dans WooCommerce. Par exemple, vous pouvez remplacer le texte du bouton par "Acheter cet article".

Pour ce faire, créez un extrait de code personnalisé dans WPCode et collez le code PHP suivant :

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

Enregistrez vos modifications, puis lorsque vous afficherez un seul produit, vous verrez le nouveau texte du bouton d'ajout au panier.

Changer la couleur du bouton Ajouter au panier

Si vous souhaitez modifier la couleur de votre bouton d'ajout au panier, vous devrez ajouter du CSS personnalisé. Vous pouvez le faire en allant dans Apparence » Personnaliser » CSS supplémentaire depuis votre tableau de bord WordPress.

Collez maintenant le code CSS suivant :

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Vous pouvez faire de même pour vos pages d'archives de produits en collant l'extrait de code CSS suivant :

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Voilà!

Nous espérons que cet article vous a aidé à apprendre comment ajouter un bouton d'ajout au panier personnalisé dans WooCommerce.

Vous aimerez peut-être aussi cet article : Comment modifier un menu dans WordPress pour une navigation personnalisée.

Prêt à personnaliser vos boutons d'ajout au panier WooCommerce ?

Merci d'avoir lu. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.