Question 30978 in Wordpress Question posted in
The official Wordpress documentation can be found here.

CSS for Vertical Woocommerce Gallery – WordPress

On my web page, I am changing the default woocommerce gallery to a vertical view. I use two columns of 70% gallery, 30% text. I tried the following CSS code, but I still need to make the thumbnails a bit bigger and move the main photo to the right, as I show in the attached photo
Could you guide me with a little more code?
Thanks!

.woocommerce-product-gallery {
    display: flex;}
.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
    padding-top: 0;
    padding-bottom: 5px;}
.woocommerce div.product .product_meta {
    border-top: 0px solid #ebebeb;
    padding-top: 1em;
    font-size: .9em;
    margin: 0 0 .8em;}
.woocommerce div.product div.images img {
    display: block;
    width: 80%;
    height: auto;
    box-shadow: none;}
Tags:

2

Answers


  1. 0

    I would try this:

    ol.flex-control-nav.flex-control-thumbs { width: 100%; }

img.wp-post-image { margin-left: 50px; }
    Login or Signup to reply.
  2. 0

    It could slightly differ depending on your installation but this works for me:

        .single-product div.product .woocommerce-product-gallery .flex- 
    viewport {
    width: 75%;
    float: right;
    }

    /* Make Gallery 25% width and place it beside the image */

    .single-product div.product .woocommerce-product-gallery .flex- 
    control-thumbs {
    width: 25%;
    float: right;
    }

    /* Style each Thumbnail with width and margins */

    .single-product div.product .woocommerce-product-gallery .flex- 
    control-thumbs li img {
    width: 90%;
    float: none;
    margin: -10px 0 0 10%;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search