Menu
I'm working on a site that uses this bootstrap theme. When the mouse hovers over any image a zoom icon appears - how do I remove it?
I have tried removing class="zoomIcon" and looked on this site as well as searching on Google.
HTML:
<div class="product-main-image-container">
<img src="../../images/products/prod1.png" alt="" class="product-loader" style="display: none;">
<span class="thumbnail product-main-image" style="position: relative; overflow: hidden;">
<img src="../../images/products/prod1.png" alt="">
<img src="../../images/products/prod1.png" class="zoomImg"
style="position: absolute; top: -0.0456852791878173px; left: -1.23350253807107px; opacity: 0; width: 400px; height: 400px; border: none; max-width: none; max-height: none;">
</span>
</div>
241
To remove it, Create a child theme . Open functions. php file of the child theme and add following code: function remove_image_zoom_support() { remove_theme_support( 'wc-product-gallery-zoom' ); } add_action( 'wp', 'remove_image_zoom_support', 100 );
Zoom images/videos on all your favorite websites (Facebook, Amazon, etc). Simply hover your mouse over the image to enlarge it. Hover your mouse over any image on the supported websites and the extension will automatically enlarge the image to its full size, making sure that it still fits into the browser window.
In order to disable product Image Zoom, simply paste this snippet into your functions. php file, within the theme folder: remove_theme_support( 'wc-product-gallery-zoom' ); This one line magic code will disable image zoom feature on the single product page in WooCommerce.
To change the width and height of the hover box in the Wix editor, go to the “Settings” tab and click on “Site Settings.” Then, click on the “Customize” tab and select “Advanced Settings.” In the “Advanced Settings” window, scroll down to the “Hover Boxes” section and adjust the “Width” and “Height” settings.
You can add this to your CSS:
<style>
img:hover {
cursor: default;
}
</style>
I hope this helped you!
99
You can override this cursor behavior by either modifying the CSS that is making it happen (it looks like a CSS file called style.css) or by writing your own rule to make it stop.
The rule is on .product-main-image in line 432 of the style.css file, and to overwrite it, you would need a rule like this:
.product-main-image{cursor:default;} or any other cursor style you wish
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
