Product Images in Popup Modal WooCommerce

This code works with any type of archive including the shop page loop, product categories and tags and any other archive page type in WooCommerce.

The code enables you to show your product images in a popup modal like this :

The code also disables the link to the single product page but not the add to cart button. You can use any conditional tag to target any type of product shop loop like product_cat and product_tag like this :

for product tags :

has_term( 'discount', 'product_tag' )

And this for product categories :

has_term( 'discount', 'product_cat' )

As seen in the demo video, once you install the code, you can click on product images in any shop loop archive and display them in a popup modal.

Demo Video

Installation

There’s 3 steps :

1. Copy and paste the PHP code to the end of your child themes functions.php file or custom code/snippets plugin.

2. Copy and paste the CSS to the end of your child themes style.css file and clear caching.

3. Upload the custom-modal.js file to your child themes js folder.

Download Folder