Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How remove emoji Magnifying glass in Woocommerce

What I tried:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

in css:

.woocommerce-product-gallery__trigger img {
display: none !important; ---///this works in chrome but not in mozilla

}
in js i tried without and with setTimeout:

 setTimeout(() => {
    $('woocommerce-product-gallery__trigger').find('img').removeAttr('alt');
    $('woocommerce-product-gallery__trigger').empty() ---////this tried when remove supports emoji in WP(see first 2 remove_action())
    $('woocommerce-product-gallery__trigger').contents().remove()---////this tried when remove supports emoji in WP(see first 2 remove_action())
  },2000)

Also i went to woocommerce plugin assets/js/single-product.js and remove this glass from this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">HERE IT WAS</a>')

But still I have this:magWoo

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This what i did, not ideal, but...

    setTimeout(() => {$('.woocommerce-product-gallery__trigger').find('img').detach();
$('.woocommerce-product-gallery__trigger').text(' ');
},1000)

    setTimeout() is needed, maybe better put this into after_setup_theme hook, without setTimeout, but this works for me.


  2. 0

    If you want to remove Magnifying glass icon and disable zoom function on product page Woocommerce, you can follow this full tutorial Remove Magnifying glass icon and disable zoom function on product page Woocommerce:

    Edit woocommerce.css

    Connect to your website using FTP protocol, then go to /youwebsite.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

    Edit this file with text editor tool and find class: .woocommerce div.product div.images .woocommerce-product-gallery__trigger, add display:none; to this class and it will be like this:

    .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: 2em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: #fff;
    text-indent: -9999px;
    border-radius: 100%;
    box-sizing: content-box;
}

    You can also hide Magnifying glass icon using your child theme’css file

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search