Docs

[Shaun N]

Is it possible to change the single product page layout from the existing site (http://sfashion.co.za/product/jacket-frills-piping/) to this (https://www.spree.co.za/only-cut-out-lace-detail-dress-black/product/21V1862)

Would prefer the product image gallery to be left aligned next to the featured image instead of below the featured image.

Thanks.

[Paul R]

Hi Shaun,

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

.single-product .images .woocommerce-main-image {
    width: 88%;
    float: right;
}

.single-product .images .thumbnails {
    width: 10%;
    float: left;
}
.single-product div.product .images .thumbnails>a {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 10px;
    padding: 2px;
}

Hope that helps.

[Shaun N]

Thanks, but the thumbnails have completely dissapeared after making use of the css provided.

[Thai]

Hi There,

Please also add the following CSS:

.woocommerce div.product .images .thumbnails>a {
    width: 100%;
    margin: 4px 0;
    padding: 0;
}

Hope it helps 🙂

[Shaun N]

Thanks, is it possible for the product thumbnail images to load into the main (featured) image container (as per standard woocommerce styling) instead of opening up in a lightbox?

[Paul R]

Hi,

Regretfully, it could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts