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.

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 ($37/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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: