I have a WooCommerce widget on my website that has several options for user interaction, one of which is by the user clicking on a product picture that is displayed.
I don't want the user to be able to select the picture, so I added custom CSS to disable the pointer events for the ahref DIV of the image. This worked for the desktop version but the picture is still clickable on mobile browsers. I've tested on Safari and Chrome iOS browsers.
After some research, I discovered that touch-action is supposed to disable mobile touch events. I tried adding the following items with my pointer-events CSS to disable mobile interaction, but the image link is still selectable.
-touch-action: none;
-user-select: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Old version of Firefox */
-ms-user-select: none; /* Internet Explorer or Edge */
user-select: none; /* All modern browsers */
I have tried CSS actions both with and without the - prefix.
I have referenced the following questions without any luck:
Are there any other CSS actions that I am missing?
It seems that this might be able to be accomplished with a script in the functions.php folder of the site, but the few attempts I've made there haven't been successful.
Script Reference: https://wordpress.stackexchange.com/questions/33724/remove-links-from-images-using-functions-php
Open to other solution methods as well. Thanks!
