LES BONS PLANS ALPA14

Créer une page boutique WooCommerce avec Divi sur un site WordPress

Alpa14 les tutoriels faciles !

Catégories

Créez une page boutique Pro avec Divi sur votre site WordPress !

Dans ce nouveau tuto WordPress Divi, je vous explique comment rémplacer la page boutique par défaut générée par le système WooCommerce à l’installation par une jolie page engageante réalisée grâce au Divi Builder. Dans ce tutoriel, nous repartirons d’un site sur le thème des bijoux que j’avais utilisé à l’occasion d’un tuto où je vous expliquais comment installer et paramétrer WooCommerce sur un site WordPress. Si vous n’avez pas vu cette vidéo, je vous invite à la voir, vous pourrez le faire ici sur cette page du Blog.
Bon visionnage à toutes et à tous ! 😊

Licence Divi
Amelia booking plugin

 1) Créer une bannière plein écran

Pour commencer, nous allons créer une nouvelle section et nous choisirons « Plein écran » puis nous choisirons le module « En-tête plein écran ».
Dans la fenêtre contenu, ajoutez votre titre, un sous-titre et un bouton si vous le souhaitez.
Dans « Fond » choisissez le 3ème onglet et appelez une image de votre galerie. Cette image assez grande devra faire au moins 1920 pixels de large et devra être bien optimisée pour que la vitesse de chargement de la page ne soit pas pénalisée par son poids. Toujours dans cette partie image de fond au bas, recherchez l’option « Fondu de l’image de fond » et choisissez « Multiplié » cela va permettre d’ajouter un filtre sur votre image afin que votre titre ressorte mieux.

Ensuite toujours dans « Fond » rendez sur l’onglet « Couleur » ou « Dégradé » selon votre goût afin de personnaliser votre filtre. Choisissez une couleur, puis cliquez sur la pipette et choisissez la tirette de droite « Alpha » pour ajouter de la transparence à votre couleur ou votre dégradé.
Vous pouvez ensuite dans la partie « Image » ajouter à votre bannière une image de logo ou une image d’en-tête. Pour un logo, préférez une image PNG à fond transparent pour ne pas avoir de contour. Si vous ne savez pas comment procéder pour réaliser une telle image, je vous invite à regarder cette autre vidéo où je vous explique comment procéder.

Ensuite rendez-vous dans l’onglet « Style » de votre module « En-tête » plein écran pour personnaliser votre contenu (police du titre, taille etc.)

Pour finir, dans notre exemple, nous avons ajouter un séparateur sur le bas de cette section bannière. Pour cela, allez sur les paramètres de la section et dans « Style » choisissez l’option « Séparateur ».

Bannière boutique WooCommerce
O2switch hébergeur web de qualité
Thinkific one month free
MalerLite

 2) Ajout des modules Divi WooCommerce « Barre latérale » et « Boutique »

Dans la section qui était présente à la création de la page ajoutez  une rangée 1/4 – 3/4 ou 3/4 -1/4 (selon vos goûts), puis déplacer par « Glisser/Déposer » cette section sous la section bannière. Dans la colonne 1/4 de la rangée, appelez le module « Barre latérale » et dans la colonne 3/4, appelez le module « Boutique ». Pour changer le contenu du module « Barre latérale » il faut vous rendre dans le menu WordPress dans « Apparence > Widgets » (enregistrer d’abord le brouillon de votre page), c’est ici que vous allez pouvoir supprimer et ajouter des éléments de votre barre (Widgets).
Revenez sur votre page boutique, vous pouvez maintenant aller dans les paramètres de votre module « Barre latérale » pour notamment lui apporter une mise en forme via l’onglet « Style ».
Vous pouvez ensuite aller dans les paramètres du module boutique. Dans l’onglet « Contenu » vous pouvez décider notamment de l’ordre d’affichage des produits, du nombre de produits par page et aussi du nombre de colonnes présentant vos produits. Dans notre exemple, nous sommes sur 3 colonnes mais vous pouvez sur 4 ou plus.

Ensuite vous pouvez dans l’onglet « Style » apporter une mise en forme de votre boutique selon vos goûts (titre, prix, image etc.)

 

 

 

Insertion des modules Divi WooCommerce
Canva design lilke a pro

3) Utiliser la fonction « Transformer » de Divi

Pour peaufiner le design de cette page boutique, nous pouvons utiliser une fonction très pratique de Divi qui permet de positionner, d’agrandir, de déformer etc. n’importe quel élément de Divi. Nous allons appliquer cette fonction à la rangée afin de la remonter et la faire mordre sur la section de la bannière.

Pour cela, rendez-vous dans les paramètres de la rangée qui a accueilli la barre latérale et la boutique. Choisissez l’onglet « Style » puis l’option « Déformation ». Choisissez ensuite le deuxième onglet (la croix) qui est l’option déplacement, puis faites glisser le carré vers le haut (comme on le voit sur l’image). Vous constatez alors que votre rangée remonte.

Une fois que vous êtes satisfait de la position de votre rangée, toujours dans Style, vous pouvez ajouter un peu d’ombre portée avec l’option « Boîte ombre » afin d’accentuer cet effet de flottaison sur la section bannière.

Vous allez suite à cette opération remarquer des petits problèmes esthétiques qu’il va être facile de régler.

1) Le fond de la section est transparent et la bannière va se voir entre les images de la boutique. Pour arranger cela, ajouter une couleur au fond de votre boutique (onglet Contenu puis « Fond », ici nous choisirons le blanc).

2) Il se peut que que le séparateur appliqué à la section bannière se voit sur la rangée. Pour corriger cela, toujours dans les paramètres de la rangée, allez sur l’onglet « Avancé » et choisissez l’option « Poste » et bougez la tirette « Z index » vers la droite jusqu’à ce que le séparateur disparaisse.  (C’est une fonction qui définit l’ordre des « couches »)

3) Vous remarquez également que les éléments de la barre latérale et de la boutique sont trop proches des bords. Il faudra ici ajouter de la marge Interne (~20 pixels). la marge interne se trouve dans l’onglet Style à l’option « Espacement ». Vous pouvez ajouter cette marge interne soit à chacune des colonnes de la rangée ou à chaque module (Barre latérale et Boutique). 

Une fois votre mise en forme terminée, il faut déclarer dans le système que cette nouvelle page est la page boutique de votre site.
Enregistrez tout d’abord le brouillon ou publiez votre page (en bas à droite de l’écran) puis dans le menu de gauche de WordPress, allez dans la partie WooCommerce > Réglages et dans « Page boutique » choisissez le nom de la page boutique que vous venez de créer avec le Divi Builder. Vous pourrez ensuite supprimer la page boutique par défaut de WooCommerce intitulée « Boutique ».

Fonction Divi Transformer
Déclarer la page boutique WooCommerce
Promotion UPDF - Modifier facilement vos fichiers PDF
Licence Divi
 LearnDash créer une formation sur un site WordPress
MailerLite free-trial

Vous serez peut-être intéressé par les articles suivants :

WooCommerce : créer une boutique de Produits affiliés

WooCommerce : créer une boutique de Produits affiliés

Vous envisagez de créer une boutique en ligne de produits affiliés mais ne savez pas par où commencer ? Ne cherchez pas plus loin ! Dans ce tutoriel, je vais vous montrer comment utiliser WooCommerce, le plugin gratuit de WordPress, pour y parvenir !

lire plus