WooCommerce Product Gallery Carousel with Lightbox in Oxygen

Updated on August 07, 2020

This members-only tutorial provides the steps to custom code the featured image and product gallery images on single WooCommerce product pages with support for lightbox and a carousel in Oxygen.

Details:

• Products with more than 4 images in the product gallery will be shown in a carousel. All the images i.e., featured image and the gallery images will be grouped in a lightbox meaning, they can be navigated using the left/right keys/arrows.
• Products will 4 or less images in the product gallery will appear static in columns i.e., no carousel. All the images will be grouped in a lightbox.
• Products with no product gallery will continue to show the featured image. Clicking on the magnifying glass icon will open the image in a lightbox.
• Sale badges will continue to appear where applicable.

Note: For variable products, selecting a variation will not replace the main product image with the selected variant. However, we can make some changes in the code to make this work. But with the main image appearing and behaving as before, the lightbox will be limited to the images appearing at the bottom thumbnail row. Steps on how to do this are given at the end of the tutorial.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

a) Upload glightbox.min.js to the plugin's assets/js directory.

b) Create a file named say, flexslider-init.js in the same location having the following: