Perhaps you wanted to add another (second) gallery to your Woocommerce product page in WordPress’ Flatsome theme? There are many gallery plugins available for WordPress, but in this article I will cover the one I found meets my goals for my online store. We needed another gallery in our store, displaying images sent to us by our customers, showing products being used (the default gallery was used for product images made in studio).

For our needs I picked Envira Gallery Lite, which even in its basic (free) iteration offers a nice set of options and customizations. In particular, the most handy part of this gallery is its wide variety of ready-made inclusion options – more specifically, options to add them anywhere on your site using either standard WordPress shortcodes or plain old PHP code. Best of all, you can do that from each individual gallery – there is no need to google for shortcode syntaxes, not to mention PHP code to add to your template files.

The most handy trick of all, I found, is the ability to hook up Envira’s slug values to galleries PHP code. This is useful in case your products use the same exact slugs. You can probably see where this is going – you can dynamically include Envira galleries into your template files and each product page will then use the corresponding gallery from Envira collection. Granted, you still need to make a gallery for each individual product, but if you need second gallery for your Woocommerce product page, this could be the solution you’ve been looking for.

STEPS TO REPRODUCE

1. Make note of your product’s slug value. You can find it the end of the permalinks field right under the title field in product edit page. Or you can open Screen Options dropdown (top right) and turn on Slug option, in which case your slug value will be displayed in options further down the screen.

2. Create a gallery in Envira and make sure you enter same slug value into Gallery Slug field, which you can access by clicking on Misc tab in gallery edit page (see image).

flatsome-woo-1

3. Now comes the most fun part!

a) First of all, do a reliable backup of your theme files (while you’re at it, you can just backup entire WordPress installation, database included!).

b) Second, make sure you’re using a child version of your theme – this should be mandatory for anyone serious about customizing their files and stores (and keeping said changes through many subsequent theme updates).

c) Copy file product-image.php from parent Flatsome theme folder to your child theme folder, closely following the folder structure described below:

source folder:
/wp-content/themes/flatsome/woocommerce/single-product

target folder:
/wp-content/themes/flatsome-child/woocommerce/single-product

d) Open this file in your server’s control panel or local editor (if you are using FTP) and find this code

<?php wc_get_template( 'woocommerce/single-product/product-gallery-thumbnails.php' ); ?>

Right after this line paste the following code:

<?php if ( function_exists( 'envira_gallery' ) ) { global $post; $prod_id = $post->ID;
		$terms = get_the_terms( $post->ID, 'product_cat' );
		foreach ($terms as $term) {
			$product_cat_id = $term->term_id;
		break;
	}
	/* skip from here if you do not need this category and/or product filtering */
	if ($product_cat_id === 16 && $prod_id != 171 && $prod_id != 107 ) {
		echo "<div><h3 class='custom-gallery-class'>Customer product gallery</h3>";
		echo envira_gallery( $post->post_name, 'slug' );
		echo "</div>";
		}
	/* skip to here */
	}
?>

e) Save the file (and upload it to your child theme’s folder, if you are using FTP).

WHAT DOES THIS CODE DO?

This code utilizes Envira’s default PHP code but with some extras. The most interesting part is this bit here

envira_gallery( $post->post_name, 'slug' );

. What it does is use product’s slug value to look for a gallery which uses same exact slug value.

We also added some more code, specifically we wanted to have a title above our customers’ images and we also wanted to exclude some products from showing this gallery block, but display it for every other product in this specific product category (line 7-13 in the big code snippet above – you should use your category and product ID numbers here OR if you don’t need this functionality, simply skip these lines).

This code has been tested on WordPress 5.2.3 and Flatsome 3.8. We used No Sidebar option for Woocommerce product page in Flatsome and also used “thumbnails below main image” option.