• Resolved Stefan

    (@svlieger)


    Hi guys,

    I recently updated my website with a new theme and now I want to change the image size of single images on product pages. I also did that with my previous theme, but the same CSS code doesn’t work anymore.

    Images in portrait mode look pretty fine on my product pages, but landscape mode images are too small. So is there a code to change this?

    For some reason I cannot do it the easy way (via Appearance > Customizer > WooCommerce) because there I can only change the thumbnails of shop page images.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hello @svlieger ,

    It’s possible that your theme is using a custom image size for the single product page.

    WooCommerce comes with these three image sizes by default:

    woocommerce_thumbnail
    woocommerce_single
    woocommerce_gallery_thumbnail

    To let users change image sizes WooCommerce provides this function –

    add_theme_support( 'woocommerce', array(
    'thumbnail_image_width' => 200,
    'gallery_thumbnail_image_width' => 100,
    'single_image_width' => 500,
    ) );

    You will find more details on WooCommerce images here – Image Sizes for Theme Developers

    As you are using Elementor to create the single product page, they can have their own settings for the image sizes so getting their suggestion will be helpful.

    Thank you 🙂

    Hi there,

    We’ve not heard back from you in a while, so I’m marking this thread as resolved.

    Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

    Thank you 🙂

    I’d like a solution for this, too.

    Here’s what what I think could be an easy-to-implement feature that could help a lot of people. Create a field, let’s call it aspect. When the main image is selected for Product, examine it. For height>width, then “portrait”. For height<width, “landscape”. And for height=width, “square”.

    This aspect value can then be written as a selector to the product image wrapper and we can then use it to style with CSS as desired.

    For extra credit, allow the user to enter any string value in place of the computed one, to allow for even more detailed control.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Change image size on product page’ is closed to new replies.