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

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

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

6 1
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.

1 3

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).

 

2 2

Cliquer sur « Construire un corps personnalisé »

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

3

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>

4 3

Classe CSS :

dr-page-woo-image

Résultat final :

fiche produit avec galerie d'image vertical