#47549 Changing Product Image Height

Landing Forums JupiterX WordPress Theme Changing Product Image Height

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • Chia Chiu

    I found that with different JupiterX themes on the single product page, the product image height varies.  Some are tall and some square (attached are two template images showing the difference).  Im using the Flowerpot template and the product image aspect ratio is portrait.  I need it to be a 10:8 instead.  How do I change that size?

    When I use the inspect tool, the element that controls the height is part of the flex-viewport class.  How can I change the height parameter?

    Thanks,

    Chia

    Amir Rather Support Team

    Product images size can be set from Appearance > Customize > WooCommerce > Product Images, have you tried this before?
    You can set Uncropped if you want to display images without a crop or you can also use custom size for custom image size.

    However, after changing value if changes don’t show up, try regeneration of thumbnails using Force Regenerate Thumbnails Plugin once you changed this setting.

    Please check and let us know 🙂

    Chia Chiu

    Yes I’ve tried that.  It’s been set at 1000×800 ratio before and after I loaded the theme through Jupiter X.  That setting changes the Woocommerce Product Widget for featured products and such however doesn’t change the Elementor Product Image Widget used in Flowerpot or Candleshop themes on the single product page.  When I load the Candleshop theme the Elementor Product Image Widget is changed to the aspect ratio defined by that theme.

    Amir Rather Support Team

    Did you try these settings in the Customizer here https://prnt.sc/r528pw in Jupiter X > Customize > Shop > Product Page > Styles > Image?

    Regards

    Chia Chiu

    Yes I tried that and no change in the dimensions of the product image size.

    Amir Rather Support Team

    Please provide login details(in private reply) and mention the dimensions you require 🙂

    Private
    Chia Chiu
    This reply has been marked as private.
    Private
    Chia Chiu
    This reply has been marked as private.
    Nodari Support Team

    Hi Chia

    Sorry for asking but can you please share the url of the product page that has a square image? I tried almost all your 21 products and can’t see the problem, is this already fixed or did I miss something?

    Private
    Chia Chiu
    This reply has been marked as private.
    Private
    Chia Chiu
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    As I see the image is not square https://take.ms/PD0dnZ .

    If you want to have the image container 1000px, then the content container (title, description) should be decreased in this case.  Do you agree?

    Also you can try other template where the image is horizontal https://take.ms/Cvkiey .

     

    Looking forward to your reply.

    Regards.

    Chia Chiu

    How can I change the container size?  Using the same template, I see that the Jupiter X Candle Shop theme was able to be a different aspect ratio.  How did they change that?  See attached image

    Chia Chiu

    Here’s the link to other themes that has the landscape aspect ratio.  Can you make the changes and then describe what you did on my site?

    https://jupiterx.artbees.net/candle-shop/product/flower-vanilla/

    https://jupiterx.artbees.net/pollux/product/product-02/

    Tatyana Hutsol Support Team

    Hello,

     

    Only the height is different in those images, the width is the same – 528px for both.

    So do you want to change the height of your image or increase its container width, so the image width is 1000px and decrease the content container width?

     

    Regards.

    Chia Chiu

    A 528px container width is okay.  I’m assuming that whatever size the images are, they will fit into the container.

    I would like the container as shown in the attached image.  I photoshopped the image it to show you what I’m looking for.  Keeping a 1000×800 aspect ratio, the container would be 528px width x 422px height.  The image should automatically resize to fit inside the container.

    Thanks

    Tatyana Hutsol Support Team

    Hello,

     

    I added this code in Jupiter X > Customize > Additional CSS:

    .woocommerce:not(.jupiterx-product-template-9):not(.jupiterx-product-template-10) div.product div.woocommerce-product-gallery .flex-viewport, .woocommerce:not(.jupiterx-product-template-9):not(.jupiterx-product-template-10) div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: auto !important;
    }
    
    .woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    min-height: 422px !important;
    }

     

    Please check single product pages now.

    Thank you.

     

    Regards.

    Chia Chiu

    That works, thanks!

    Private
    Tatyana Hutsol Support Team
    This reply has been marked as private.
Viewing 19 posts - 1 through 19 (of 19 total)
You must be logged in to reply to this topic. Login