Docs

[tahaabbasi]

Hi I want to move the image thumbnails of the products to the left.

Here is what I want them to look like:
http://www.asos.com/ASOS/ASOS-Full-Soft-Ruffle-Midi-Dress/Prod/pgeproduct.aspx?iid=6320131&cid=2623&sh=0&pge=0&pgesize=36&sort=-1&clr=Mauve&totalstyles=598&gridsize=3

My default page looks like this.
https://www.ministryofadventure.com/product/single-product-template/

Any tips? can this be accomplished simply with CSS?

[Rue Nel]

Hello There,

Thanks for writing in! To make your product page with the same layout in the example url, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

@media(min-width: 980px) {
    .single-product.woocommerce div.product .summary {
        width: 40%;
    }

    .single-product.woocommerce div.product .images {
        width: 57%;
    }

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

    .single-product.woocommerce div.product .images .thumbnails{
        float: left;
        width: 28%;
    }

    .single-product.woocommerce div.product .images .thumbnails>a {
        width: 75%;
        margin-top: 0;
        margin-bottom: 15px;
    }
}

This is the resulting look of the page: http://prnt.sc/axq67y

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for understanding.

[tahaabbasi]

Hi, I just wanted to say thank you, and that this worked perfectly!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts