« Offre spéciale BLACK FRIDAY »  -50% sur FULL TEMPLATES  Du 01/11 au 30/11/22

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
Olivier Dufour

Olivier Dufour

0 commentaires

Soumettre un commentaire

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