Select Page

We want to help those out there that develop their own web sites, wordpress blogs, and have eCommerce sites, and recently, we ran into an issue and couldn’t find any documentation on how to resolve the issue… until now! Below you will find out how to customize the product image size on the Woocommerce (v 3.3.5) Single Product Page AND remove the zoom icon. If you have any questions, please contact us, as we have turned off commenting on our posts.

Locate your custom CSS area either in your WordPress editor or custom CSS location of your them and add the following at the end of your file:

To customize the width of the main image, place this code…

.woocommerce-product-gallery__image { margin: 30px 0 0 30px; width: 300px; }

You can add margin as well as you see to better customize the image to suit your page needs. Now, to the zoom icon…

 

Remove the zoom icon by doing the following:

.woocommerce-product-gallery__trigger { display: none; }

Tada!

CONTACT