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

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

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 :