Alter single product page image to 2/3 page width instead of 1/3 - Support

Tagged: image, Product, single, width, woocommerce

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 5, 2015 at 9:39 pm #406691
Sandie
Participant
Need to alter image on Single Product Page to a landscape format. Currently the image is 1/3 of the width of the page and the text beside it is 2/3. I need to flip this, so that I can display a landscape image on 2/3 width of the page, with the title and purchase button in the remaining 1/3. Can you advise the best way to do this in Enfold please?

Alternatively, a single product page layout more like Propulsion, with the image full width, and the other elements below.

Essentially, the square images really don’t work well with images that need to be landscape, and I’m looking for a better solution.
- This topic was modified 9 years, 9 months ago by Sandie.
March 6, 2015 at 6:59 pm #407209

Andy
Inactive Moderator

Hey Sandie!

can you show us a mockup/screenshot of what you want to achieve please? to make things clearer.
Sounds to me this plugin could be for you: https://wordpress.org/plugins/simple-image-sizes/

Hope this helps.

Best regards,
Andy

March 6, 2015 at 8:57 pm #407266

Sandie
Participant

Hi Andy,

Thanks for getting back to me.

I need a landscape rectangle shape for shop images, so the default enfold setup isn’t working too well for me (it’s all squares).

I can amend the shop overview page (the one that lists all the products) to rectangles, but I’m having difficulty getting the single product page to do anything. The images seem stuck at 1/3 width, which just isn’t working well.

Is it possible to unhook the product details, and move them below the image? Something like this – http://kriesi.at/themes/propulsion/shop/abundance-wordpress-theme/

Thanks, Sandie

March 9, 2015 at 1:29 am #407800
Ismael
Moderator
Hi!

It’s possible with CSS but you might need to disable the single product sidebar:
```
.single-product-main-image {
width: 100%;
}

.single-product-summary {
overflow: hidden;
clear: both;
}
```
Regards,
Ismael
March 9, 2015 at 3:28 pm #408161

Sandie
Participant

Ah, I thought perhaps it would be possible to move the segments to a new hook as is possible with the Product Description. Thanks for the assistance, please close topic.
Author

Posts