How to Disable Click on Product Image WooCommerce

In a recent WooCommerce development project, I wanted to disable click on product image, I needed to create an easy and quick way to disable click on the product image.

Table of Contents

I created this solution that I will share with you in this quick guide and also WooCommerce disable click on product image code snippet that you can reuse in your WooCommerce development projects or customization of WooCommerce to help you save time and be more productive.

WooCommerce Disable Click on Product Image

You should add the following code to your custom CSS to disable the pointer events on the product image :

[php]

/**
* WooCommerce Disable Click on Product Image
*/
.woocommerce-product-gallery__image{
pointer-events: none;
}

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

[/php]

As you can see in the image below, I have added this code to the custom CSS section in the customizer and it works. You can also add this code to your child theme styles and it should work well.

Conclusion

I guess you can now comfortably disable click on product image by following the steps I have outlined in this quick guide. The take from this tutorial is to disable click on product image you need to add the custom CSS to the child theme or the additional CSS in your customizer section.

If you need further assistance in fixing this issue, I can quickly check and advise what is the best way to get this done in your specific WooCommerce theme. I would be glad to help you, feel free to reach out for further assistance, you can get in touch for free consultation.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Disable Click on Product Image WooCommerce

WooCommerce Disable Click on Product Image

Conclusion

Similar Articles

Related