Comment ajouter dynamiquement une barre de code de coupon à des pages de produits spécifiques avec Divi

Lorsque vous gérez une boutique en ligne que vous avez créée avec Divi et WooCommerce, vous souhaiterez parfois afficher des codes promo sur votre site Web pour augmenter le sentiment d'urgence. Sur le Web, vous remarquerez que de nombreuses boutiques en ligne partagent les codes de réduction dans une barre collée en haut de la page. Désormais, avec le générateur de thème de Divi, vous pouvez ajouter automatiquement une telle barre de code de coupon aux produits éligibles pour le code de coupon.

Dans ce tutoriel, nous allons vous montrer exactement comment faire cela. Ce didacticiel comprend plusieurs parties, de la configuration du code de coupon à la création d'un modèle de produit distinct pour les produits de la catégorie remise. Vous pourrez également télécharger gratuitement le fichier JSON du modèle ! Le style général que nous utilisons est basé sur la mise en page audacieuse de la page de produit que nous avons partagée dans le passé.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle de page produit GRATUITEMENT

Pour mettre la main sur le modèle de page produit, vous devrez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Présentation du didacticiel

• Assurez-vous que Divi et le plugin WooCommerce sont installés sur votre site Web
• Dans la première partie du tutoriel, nous allons créer une nouvelle catégorie de produits discount
• Nous attribuerons les produits éligibles à cette nouvelle catégorie de produits
• Ensuite, nous créerons un nouveau code de coupon et nous nous assurerons que le code de coupon s'applique uniquement à la catégorie de produits que nous avons créée.
• Dans le générateur de thème, nous allons créer un nouveau modèle pour cette catégorie de produits particulière
• Nous réutiliserons le corps de page de produit normal pour ce modèle et ajouterons une barre de code de coupon supérieure à l'aide des options intégrées de Divi

1. Créer une nouvelle catégorie de produits à prix réduit

Aller aux catégories de produits et ajouter une nouvelle catégorie de produits à prix réduit

Commencez par installer le plugin WooCommerce sur votre site WordPress et ajoutez une nouvelle catégorie de produits dédiée à tous les produits éligibles à la nouvelle remise. Si vous prévoyez d'utiliser le code promo sur des catégories de produits existantes, vous pouvez les utiliser à la place.

2. Attribuer des produits à une nouvelle catégorie de remise

Modifier le produit

Ensuite, ouvrez les produits que vous souhaitez inclure dans la vente.

Attribuer des produits à une nouvelle catégorie de remise

Et incluez-les dans la nouvelle catégorie de produits discount.

3. Créer un code de coupon WooCommerce

Aller aux coupons et ajouter un nouveau coupon

La partie suivante de ce didacticiel traite de la création d'un nouveau code promo. Allez dans votre tableau de bord WordPress > Coupons > Et cliquez sur 'Créer votre premier coupon' .

Ajouter un code de coupon et des données de coupon

Ajoutez le code promo en haut et sélectionnez les paramètres généraux que vous souhaitez appliquer à votre code promo.

• Code de réduction : ajouter un code de réduction
• Type de remise : Remise en pourcentage
• Montant du coupon : ajouter un pourcentage
• Date d'expiration du coupon : sélectionnez la date

Ajouter une restriction d'utilisation

Ensuite, passez à la restriction d'utilisation et assurez-vous que le code de coupon fonctionne uniquement sur les produits de votre catégorie de produits à prix réduit.

• Catégories de produits : Remise

4. Ajouter un nouveau modèle pour la catégorie de remise

Ajouter un nouveau modèle

Une fois que vous avez créé le code promo, il est temps de l'inclure sur les pages produits concernées ! Pour ce faire, accédez au Divi Theme Builder et ajoutez un nouveau modèle.

Utiliser sur

Utilisez ce nouveau modèle sur la catégorie de produits discount.

• Utiliser sur : Produit dans une catégorie de produit spécifique : Remise

5. Réutiliser le corps de la page produit globale pour le nouveau modèle

Faites glisser le corps du modèle de produit vers le corps du nouveau modèle

Vous pouvez réutiliser le corps de votre modèle de page de produit habituel en le faisant simplement glisser vers votre nouveau modèle. Dans ce didacticiel, nous utilisons la mise en page audacieuse de la page de produit que nous avons créée dans un autre didacticiel. Vous pouvez télécharger le fichier JSON de la mise en page dans l'article de blog.

6. Ajouter la barre de code de coupon supérieure au corps du nouveau modèle

Entrez dans l'éditeur de modèle de corps

Une fois que vous avez ajouté le corps de la page du produit à votre nouveau modèle, vous pouvez commencer à le modifier. Les modifications que vous apportez à ce modèle n'apparaîtront que sur les pages de produits faisant partie de la catégorie de produits à prix réduit.

Ajouter une nouvelle section en haut

Dans l'éditeur de modèles, la première chose que nous allons faire est d'ajouter une nouvelle section en haut.

Couleur de l'arrière plan

Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #e02b20

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Animation

Complétez les paramètres de la section en ajoutant une animation.

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 1500 ms
• Délai d'animation : 1000 ms
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et laissez la ligne occuper toute la largeur du conteneur de section.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez un rembourrage supérieur et inférieur.

• Rembourrage supérieur : 25px
• Rembourrage inférieur : 25px

Colonne 2

Couleur de l'arrière plan

Ouvrez également les paramètres de la colonne 2 et ajoutez une couleur de fond blanc.

• Couleur d'arrière-plan : #ffffff

Espacement

Ajoutez également des rembourrages haut et bas personnalisés à cette colonne.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Frontière

Et incluez des rayons de bordure en haut à gauche et à droite.

• En haut à gauche + en haut à droite : 30 px

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Le premier et le seul module dont nous avons besoin dans la colonne 1 est un module de texte. Entrez une copie de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : Montserrat
• Couleur du texte : #ffffff
• Taille du texte : 16px
• Alignement du texte : Centre

Ajouter un module de texte à la colonne 2

Ajouter un code de coupon à la zone de contenu

Dans la deuxième colonne, ajoutez un autre module de texte avec le code de réduction que vous avez ajouté dans la première partie du didacticiel.

Paramètres de texte

Modifiez les paramètres de texte du module comme suit :

• Police du texte : Montserrat
• Poids de la police de texte : lourd
• Couleur du texte : #000000
• Taille du texte : 19px
• Alignement du texte : Centre

Dimensionnement

Ensuite, modifiez les paramètres de dimensionnement.

• Largeur : 50 %
• Alignement du module : Centre

Espacement

Ajoutez également un rembourrage inférieur.

• Rembourrage inférieur : 10px

Frontière

Et complétez les paramètres du module en ajoutant une bordure inférieure.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #333333

7. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Une fois que vous avez terminé la page de produit modifiée, vous pouvez enregistrer les modifications apportées au modèle, quitter le générateur de thèmes et afficher le résultat sur les pages de produits à prix réduit !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer une barre de code promo et lui permettre de s'afficher automatiquement sur les pages de produits éligibles pour le code promo en question. C'est un excellent moyen d'inciter les visiteurs à acheter vos produits. Vous avez également pu télécharger le fichier modèle JSON gratuitement ! Si vous avez des questions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.