Changing Woocommerce Product Thumbnail Location

[powrider686]

Hi there,
On my site, spectrumcbdbotanicals.com, I am having an issue with Product photo placement. Woocommerce by default shows the product thumbnails below the product image

, but I cannot get that to work on my site. It seems there is something in the theme preventing this.

How can I move the location of the thumbnails from over the featured product image to below the featured product image as shown in the above screenshot?

Thanks for the help!

[jade]

Hi @powrider686,

Yes, there are CSS codes in the theme that sets the location of the product thumbnails which you can override by adding this code in X > Theme Options > CSS:

.flex-control-nav.flex-control-thumbs {
    bottom: -60px;
    top: unset;
    left: 0;
    right: unset;
    padding: 0;
    display: flex;
    width: 100%;
    justify-content: center;
}

.flex-control-nav.flex-control-thumbs img {
    height: 50px;
}

Hope this helps.

[powrider686]

That did the trick. Thank you!

[powrider686]

A problem arose. On mobile the thumbnails appear over the product title. See screenshot. How can I fix this?

Thanks so much!

[jade]

Hi @powrider686,

Please try this additional code which will add some more top margin to the top of the product title on mobile:

@media (max-width: 767px) {
    .woocommerce div.product .summary {
        margin-top: 75px;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.