image cap remove / image size

Hello @mejate,

Thanks for sending over the screenshots. It looks like the site is running a page builder of some type. The best option would be to use the builder’s built-in tools to adjust the width, padding, and margins to give you the fit you’d like to have. That would be preferable to overriding these with CSS. It’ll be easier to maintain if you can do that from inside the page builder. The maker of the builder may be able to assist you with that too.

If they’re not able to help out, you could hire a freelancer to fix this for you. There are ones at https://woocommerce.com/codeable/ who can help.

If you want to post the URL to these pages, someone may be able to take a look at them for you. People would need to be able to interact with the pages in order to make any CSS customizations. I can’t promise someone will be willing to help you make those changes, but if you send the URL, that does give an opportunity.

Take care

Hi thanks for reply!

Let me clarify what ive done.

I watched this video https://youtu.be/AoAG_ISBreY to remove woocommerce product zoom but im Very bad using css so only managed to remove the zoom. I put the code in my child theme php.

Hey @mejate,

Thanks for explaining. If you’d like to remove the product image zoom, I would suggest using the code in this post:

https://businessbloomer.com/woocommerce-disable-zoom-gallery-slider-lightbox-single-product/

It doesn’t require CSS and I just confirmed it works on my test site. You can add it to your theme’s functions.php file or include it with a plugin like Code Snippets.

If you have something else in mind, please let me know.

Thanks!

Hi! Ive manage to remove the zoom but zoom leaves cap in image. Cap was included to complete zoom. Now i remove zoom the cap remains. I did complete that video untill that part where that guy removes the cap. I stucked there.

My apologies, I’m not sure what a “cap” is in this context. Could you let me know what’s still remaining for you?

If you look the pictures i post,

On first pic theres big space between product picture and product content.

Second pic is how it should be but it doesnt. The space is there after publish

In the video i post. The guy talks about it and removes that gap/space

Gotcha. You can likely remove this via CSS. We’d have to be able to interact with the code on that page in order to adjust it though. It’s not possible to do just from the image, unfortunately.

If you’d like to send over the URL to a product page, I’d be happy to take a look for you.

https://www.mejate.fi/tuote/epoksi-kahvipoyta/

U can mark that url as a private after reading it.

Hey @mejate,

Give this a try. It doesn’t complete remove the space, but it should cause the image to grow to fill the available room.

• In your WordPress dashboard, go to Appearance and click on Customize.
• Look down for the Additional CSS section and click on it.?
• In the box there, paste this:

  
  .woocommerce div.product .woocommerce-product-gallery img {
      margin: 0;
      width: 100%;
  }
  

• Publish your changes.

When I tried that, it gave this result:

that worked! Thank you very much! Super support!