Comment aligner verticalement la galerie d’image d’un produit ? -Divi

par | Oct 17, 2022

Comment aligner verticalement la galerie d’image d’un produit ?

Déplacer sur la gauche et aligner verticalement la galerie d’image !

fiche produit avec galerie d'image vertical

Pour une question de design ou de goût, certains préférerons aligner la galerie d’image d’un produit sur le côté gauche.

Malheureusement, à ce jour, nous ne pouvons pas le faire directement avec le Divi builder.

Nous allons voir dans ce tuto comment déplacer sur la gauche et aligner la galerie d’image verticalement.

Dans le thème builder, ajouter un nouveau modèle.

Cocher la case « Tous les produits » (Cette opération permet d’avoir la même mise en page pour la totalité de vos produits).

 

Cliquer sur « Construire un corps personnalisé »

Créer votre page produit avec les modules woo (woo product image, woo product title…)

Appelé une ligne, puis un module « Code », puis copier le code CSS ci-dessous.

code CSS :

<style>

@media screen and (min-width: 981px) {

.woocommerce div.product div.dr-page-woo-image .flex-control-thumbs {

  position: absolute;

  top: 0;

  left: -120px;

  width: 100px;

  margin-top: 0;

}

  

.woocommerce div.product div.dr-page-woo-image .flex-control-thumbs li {

  width: 100%;

  margin-right: 0;

  margin-bottom: 20px;

}

}

  

@media screen and (max-width: 767px) {

.et_pb_wc_related_products.dr-page-related-products ul.products.columns-4 li.product{

  width: 100% !important;

  margin-right: 0 !important;

}

    

</style>

Classe CSS :

dr-page-woo-image

Résultat final :

fiche produit avec galerie d'image vertical

PARTAGEZ-NOUS VOS RÉFLEXIONS !

2 Commentaires

  1. Corinne Pic

    Heureusement que cette vidéo existe, car avec une mauvaise manip, j’avais tout viré….
    Et maintenant c’est all good….
    Merci Olivier

    Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

LES BONNES AFFAIRES

Full Divi Templates

DR PAGE ET VOUS

CONTACT

contact@dr-page.fr

+590 690 756 945