Single product image element way to large (woocomerce)

Comments

• Phil

  January 2022

  Hello,

  1) Please, try the following CSS code:

  .single-product .flex-viewport,
  .single-product .woocommerce-product-gallery__image img{
     height: 500px!important;
     width: auto!important;
  }
  

  2) Please, go to Appearance -> Customize -> WooCommerc -> Product Images, and change the Thumbnail cropping to 1:1.

  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• jeffreyvm1

  January 2022

  Hi Phil,

  Thnx for your fast reply. Although it's not the solution i'm looking for.

  Your solution limits the height of the image, witch results in not showing the complete image. The Thumbnails still have different sizes. The settings suggested in your step 2 only affects images in the product category page. My problem is at the single product page.

  
  

  Option 1

  Due to the different image sizes i'm looking for a solution that:

  • Fixed size for the product image element (so it is not much bigger than content on the right)
  • Fixed 1:1 ratio Thumbnails (right now it is very messy due to the different image sizes)
  • complete Main image fitted in the border (portrait photo's will have empty space left+right)

  In mine opinion this should be part of the standard functionality...

  
  

  Option 2

  I think that the image grid is a nice second option if the element has an option to give it a fixed size. The thumbnails should be automatically cropped in the available space.

  
  

  Thnx in advance.
• Phil

  January 2022

  You copied the code wrongly.

  Look at the following screenshot:

  

  About the thumbnails, please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

  Notice!

  Please attach a link to this forum discussion.

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• jeffreyvm1

  January 2022

  You are right, i changed the code and the product is resizing like it should.

  I send you login credentials in PM to check the Thumbnails issue.

  
  

  Also checked the quick view function. There doesn't work the fix....

  

  
  
• Phil

  January 2022

  One of the unsupported plugins causes a problem with the thumbnails.

  I have left only supported plugins active, and the issue was resolved. However, when I activated them back, the thumbnails were still fine.

  For the preview, please try the following code:

  .woocommerce .mfn-popup .slick-slide img{
     height: 500px!important;
     width: auto!important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next