C’était autrefois Page Boutique WooCommerce prendre Divi n’était pas vraiment attrayant, il faut l’admettre.

Maintenant c’est un jeu d’enfant Personnalisez cette page pour la rendre sexy et attirante!

Nous voyons cela dans ce nouveau tutoriel qui peut être réalisé en seulement 3 étapes!

Annonce: Cet article contient des liens d’affiliation que vous repèrerez facilement. Les cravates classiques sont en violet et les liens sponsorisés sont en Rose.

1 – À quoi ressemble la page WooCommerce / Divi Store sans personnalisation?

Voici une capture d’écran d’un Page Boutique WooCommerce qui n’a pas encore été ajusté avec le Générateur de thèmes Divi.

page de la boutique classique
Affichage de la page de la boutique sans ajustement

Le thème Divi lui-même n’a pas non plus été ajusté.

Alors tu en vois un page de la boutique « basique »disponible lors de l’installation WooCommerce avec certitude WordPress et Divi.

En-têtes de site c’est classique, le logo personnalisé n’a pas été ajouté, mais surtout ça Partie principale de la page n’est pas attrayant et présente cette barre latérale si … Comment dites-vous ? Vilaine!

Bref, nous réglerons tout cela immédiatement!

2 – Créer un modèle de thème « Boutique »

Tout se passera à partir de l’onglet Divi> Générateur de thèmes disponible dans votre back office.

C’est très simple ici, il ne vous reste plus qu’à cliquer « + Ajouter un nouveau modèle » (Ajouter un nouveau modèle).

Une fenêtre s’ouvrira dans laquelle vous pourrez choisir le type de modèle que vous souhaitez créer: Activer « Boutique ».

Créer un modèle de thème "boutique"
Ajouter un nouveau modèle de thème « Boutique »

Un nouveau modèle de thème (nouveau modèle) vient d’être créé. Si vous avez déjà défini un « En-tête global » (En-tête global) et un « Pied de page global » (Pied de page global) ceux-ci sont affichés en vert.

Sinon, ne vous inquiétez pas, vous pourrez vous en occuper plus tard. C’est même facultatif.

En-tête et pied de page de la boutique de page personnalisée
Affichage de la page de la boutique avec un en-tête et un pied de page qui ont été adaptés grâce au « global header » et au « global footer ». La partie principale de la page n’est pas encore personnalisée.

Dans la capture d’écran ci-dessus l’apparence de la page de la boutique a déjà développé à partir de la capture d’écran du chapitre 1 de cet article.

C’est normal depuis le mien « En-tête global » et mon « Pied de page global » a été défini.

Dans cette image est le « En-tête global » est encadrée de vert, le « Pied de page global » est encadrée en violet et le corps du côté ou « Corps personnalisé » est encadrée de rose.

Et c’est exactement ce que c’est Corps personnalisé (Corps personnalisé) qui nous permettra Personnalisez l’apparence de notre boutique.

Saviez-vous que vous pouvez essayer Divi gratuitement? Aller sur cette page et cliquez sur « ESSAYER GRATUITEMENT »

3 – Ajouter un corps personnalisé

Revenez ensuite à l’onglet Divi> Générateur de thèmes et ajoutez un Corps personnalisé (Corps personnalisé) Avec vous Modèle de thème « Boutique ».

Cliquer sur « Ajouter un nouveau modèle » (ajouter un corps personnalisé).

Ajoute un "corps personnalisé"
Ajouter un « texte personnalisé » au modèle de thème

Choisir « Ajouter un corps personnalisé » dans la fenêtre contextuelle.

L’éditeur visuel s’ouvre et vous pouvez commencer à ajouter Module Divi au Construisez le corps de cette page de boutique.

4 – Option 1: ajouter un module de blog à la partie principale de la page boutique

Bien entendu, vous pouvez insérer tous les modules que vous souhaitez: modules de texte, modules d’image, Code du module etc.

Cependant, si vous souhaitez que les produits de votre boutique apparaissent sur votre page, vous pouvez inclure l’une des solutions Module de blog.

Ajouter un module de blog à la page du magasin
Ajouter un module de blog dans le « texte personnalisé » de la page de la boutique

le Module Blog de Divi permis ‘Affichez les produits de votre boutique dans certaines circonstances …

Doit lire: Comment créer une fiche produit WooCommerce personnalisée avec Divi?

définir ça "Type de poste" du module blog
Définissez le type de publication du module de blog: Sélectionnez « Produits ».

Depuis l’onglet « Contenu » Dans le module de blog, vous pouvez définir le type de contenu à afficher (type de publication). Choisir « Des produits ».

Vous pouvez alors Configurer ce module comme tu l’as fait quand tu l’as utilisé Afficher vos articles de blog.

Améliorer l'apparence du module de blog
Améliorez l’apparence du module Blog dans l’onglet Contenu et style: choisissez Grille.

Vous pouvez choisir le nombre de produits, catégories, date, image, etc. à afficher.

Depuis l’onglet stylevous pouvez changer l’apparence du Module de blog ::

  • Montrez-le selon un « Grille »,
  • Ajoutez une couleur et une icône de superposition.
  • Ajouter une ombre ou une animation,
  • Lissez-le
  • Ajouter une bordure
  • etc.
Enregistrez le modèle de conception
N’oubliez pas d’enregistrer le modèle de conception

N’oubliez pas d’enregistrer vos modifications avant de quitter l’éditeur de texte personnalisé.

5 – Option 2: Ajouter un module boutique dans la partie principale de la page

La solution ci-dessus serait une solution appropriée si le Module de blog autorisé à Consultez les prix de chaque produit sur la page de la boutique.

Malheureusement, ce n’est pas le cas: cela peut, selon le projet, mais dans la plupart des cas, les magasins afficheront les prix des produits avant même de visiter la liste.

Donc si ce module n’est pas pour vous, il vaut mieux insérer un module boutique dans le Corps personnalisé De votre modèle.

Module Boutique Divi

Voici comment personnaliser toutes les options offertes par ce module:

  • taille de police
  • Taille, police et couleur des prix
  • Type de produit à afficher
  • Badge de vente
  • Etc.

Remarque: vous pouvez créer toutes sortes de modèles avec le générateur de thèmes! Découvrez également comment Créez un modèle d’article élégant.

6 – Apparence finale de la page de la boutique WooCommerce

Après avoir configuré le module boutique (ou le module blog) dans votre modèle de conception (modèle de boutique), vous pouvez découvrir que nouveau look de votre page boutique.

Pour cela il faut bien sûr que des produits soient disponibles, sinon vous ne verrez rien …

Présentation de la page custom shop
Présentation de la page custom shop

Dans la capture d’écran ci-dessus, vous pouvez voir que toute la page de la boutique a été personnalisée: l’en-tête, la partie principale de la page et le pied de page.

Pour commencer avec Divi, Découvrez tous les articles commencez calmement!

7 – Personnalisez davantage la page de la boutique

Comme je vous l’ai suggéré plus tôt dans cet article, votre page commerciale peut faire plus que simplement afficher vos produits.

N’hésitez pas à ajouter d’autres modules sur cette page au fur et à mesure que vous construisez le vôtre Corps personnalisé.

Cela peut être l’occasion d’ajouter un appel à l’action, des images, du texte, des vidéos, des formulaires, etc.

Bref, maintenant rien n’est impossible!

Besoin de plus de ressources Divi? Visitez le blog ElegantThemes C’est plein d’idées et de tutoriels!



Source link

Recent Posts