Full-width product image on WooCommerce single product page

[bilievesser]

How can I accomplish a full-width product image in the best way? Screenshots to show what I have in mind:

Default:
Full-width:

[XSupport]

Hi there,

First, please add the CSS code below to X > Launch > Options > CSS

.woocommerce div.product .images {
    position: relative;
    float: left;
    width: 100%;
}

That’ll make the image full width.

Then, to make product summary left aligned and full width, add this code underneath the previous code:

.woocommerce div.product .summary {
    float: left;
    clear: right;
    width: 100%;
    padding-top: 25px;
}

Hope that’ll do it.

Best regards.

[bilievesser]

Thanks, that works. One small question: why are my thumbnails for the images in the upper right of the main picture, and not below like the previous screenshots show from your templates? See secure note for URL.

[christopher]

Hi there,

That is because the new version of the Woocomemrce changed the single page gallery and the new gallery thumbnails are like that. To force the thumbnails to go to the bottom of the gallery kindly add the CSS code below to X > Launch > Options > CSS:

.single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "FontAwesome";
    content: "\f065";
    color: white;
}

Kindly open up new threads for additional questions to help us focus on the matter, maintain the thread correctly and give you a better support.

Thank you.