I try to prevent the clickable image event on WooCommerce by adding the following code. It works fine but after adding it, in the single product page, it shows a text ("open" in this case) above the image. How can I solve this problem?
function e12_remove_product_image_link( $html, $post_id ) {
return preg_replace( "!<(a|/a).*?>!", '', $html );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'e12_remove_product_image_link', 10, 2 );
You could try adding: pointer-events: none; to the class or image tag in css, it will make the container unclickable through CSS.
Regarding the "open" text, it could be coming from a title tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) in the image. Which you could try to remove with javascript to remove the text.
I don't know what WooCommerce adds to it's links by default, but one of those defaults might be your issue.