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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: