How to Set Product Main Image Aspect Ratio to 16:9 (Landscape) on Product Page

Hi,

I’m using the Woodmart theme and would like to display all product main images in a 16:9 landscape aspect ratio on the single product page.

Also, I’d like the thumbnail gallery height to not exceed the height of the main image, and ensure that the overall product
image section does not exceed the user’s screen height.

Could you please advise how I can achieve this?

Thanks in advance!

Hello,

Navigate to Theme Settings > Single Product > Product page layout, You can choose different page layouts depending on the product image size you need: https://postimg.cc/3kmL39XW

For the gallery thumbnail height, navigate to Single product > Gallery > set the Thumbnails gallery height: https://postimg.cc/1fPXW3vT

Best Regards,

Hello,
Thanks for your reply.

I got the setting.
But the main image is too big and the height exceeds the screen.

How can I make the product image display in 16:9 or rectangular?

Thanks!

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Hi,

We hope to show video for our client. That why the rectangular (Youtube size) would be appeciated.

Here you are. (Extra information).
https://esupport.tw/demo-rihting1/product/rihting-products-1/
(The site is our testing site)

Thanks!

Hello,

Sorry to say, there are no options in the Woodmart theme settings to change the product image layout to a 16:9 aspect ratio by default.

Please add the below Custom CSS code to Theme Settings > Custom CSS.

.woocommerce-product-gallery__wrapper {
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
}

If this doesn’t fully meet your layout requirements or you want more control, I recommend referring to the official WooCommerce documentation on customizing image sizes:
https://developer.woocommerce.com/docs/theming/theme-development/image-sizes/

Best Regards,

Hello,

Please check out our test page.
The product images are arranged in the right size.
But the video seems to be showing only a portion of the content, not the full size of the video.

Hopefully this will be fixed.

Thank you!

Hello,

Try to change the video size in the product video gallery and check how it works. https://postimg.cc/N53dRsK0

Best Regards,

[Author]

Posts