Pictures on the left in WooCommerce

Support
#1

I am using the Pro theme. I have created a child theme so that I can change things.
I have found here How to move the WooCommerce product pictures to the left how the get the thumbnails to the left. But that is not what I quite want.

I came this far:
https://www.alcmariaflames.nl/product/wedstrijdshirt-thuis/

By adding the following CSS-code to Global CSS.

.single-product .woocommerce-product-gallery__image>a>img {
    width:100%;
}

.single-product .flex-control-nav.flex-control-thumbs li {
    float: left;
    width: 25%;
    margin-bottom: 8px;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(10) {
    margin-left: 0 !important;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top:8px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

So how do I get my thumbnails to the left and still have how it is working now?

#2

Hello @madref,

Thanks for writing to us.

I checked your given page URL, it seems that the given page is not working, Please recheck and send us concert URL so that can check it and provide you exact solution.

bv
bv868×402 24.6 KB

Thanks

#3

Due to an error in the website it did not work.
Now it does

#4

Hi @madref,

I just check your single product product and it seems that the picture is already on the left the same with the thumbnails. This is what I see in your product single page. If you are referring to something else, please let us know.

image
image1347×560 108 KB

If you want to customize your single product page, I suggest that you will use the Layout Builder. In that way it will eliminate some CSS customization and any issues. To know more about how to customize the Single Product page, please check this out.

Hope that helps.

Thank you.

#5

Is there an example how to recreate this in Pro with the Builder?

#6

Hi @madref,

Please check this out for an example of how the layout builder works.

Hope that helps.

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.