Using a product gallery can have a major impact on the success of your online store. Whether you’re selling clothes, beauty products, photos, artwork or anything really, a product gallery can really help you showcase and promote your products.

But what do we mean by a product gallery? And how is it different to any other gallery layout? We’re going to take an in-depth look at what works as a product gallery in WordPress, why you should use one, and how to set up your own WordPress product gallery.

Let’s begin by looking at what we mean by a product gallery. You may already be familiar with the term, especially in connection to WooCommerce or online shopping. Put simply, it is a collection of images, showcasing a single product or multiple products available in your online store.

Here’s a look at an example of a product gallery:

WooCommerce product gallery layout

The gallery could show different images of one product. For example, it could showcase a child’s drum set, showing an image of the complete drum set along with shots of the individual drums. It could even include an ‘action’ shot of a child playing the drums.

Or the product gallery could show a range of different products. In this scenario, you may have various musical instruments and each image would display a different instrument.

As you can see, the gallery is used to showcase the different items that you sell. But it should do more than just display the images. A good product gallery also needs to include certain features, all of which will make it easier for a customer to find and purchase items. Some of these essential features include:

  • A product gallery lightbox: while your gallery uses thumbnails, customers want to see a larger image of the product. A lightbox allows you to open this full-size image above the gallery, where you can include more product details.
  • Product variations: if you have different sizes, colors, or other product variations, you want these to show in the product gallery so that customers are aware of their options. But you don’t want to include each variation as a separate product. It’s preferable to show them as part of the description when the full-size image is opened in the lightbox.
  • Add to Cart buttons: having a buy button in the gallery itself, or in the lightbox, makes it easier to purchase. This means fewer steps in the buying process and less chance that a customer will change their mind.
  • Sale Ribbons: you want to be able to highlight promotional items. You can do this by using a sale ribbon on the gallery thumbnail, or showing a marked down price.
  • A product filter or a search bar: make it easy for customers to find what they’re looking for. Product category filters or a search function do just that and are essential for a product gallery.
  • A sort function: you want to be able to sort products to help streamline the shopping experience.

As you can probably tell, a gallery like this is designed for a specific purpose – to sell products! So if you’re using your WordPress site as an online store, then this gallery is ideal for you.

Your normal gallery layouts, such as a masonry, slider or justified gallery, would no doubt display your images beautifully. And if all you’re doing is showcasing your images, then these layouts are perfect for you. But if you want to sell your photos, or any other products, then you need a layout and the specific features that work for you.

Essentially, you should use a product gallery if you want to sell products from your site, whether these are digital downloads or products that you’ll ship. If you think that a product gallery is the right fit for you, then there are some tools that you’ll need, to ensure that you can create the best gallery for your customers. Let’s take a quick look at what you’ll need.

The Right Tools

There are a number of platforms that you can use to set to set up your ecommerce site, but we’ll be focusing on WordPress. This platform gives you control over your site and is fairly simple to get grips with. (If you’re looking for more info on setting up your own site with WordPress, take a look at this article on creating a portfolio site.)

Now if you’re using WordPress for your online store, then you should also be using WooCommerce to sell your products. These two make for a great combination when it comes to running an online store. But if you want to improve your customer experience even more, then you’ll also need a plugin that gives you a great product gallery, and one that integrates with WooCommerce. Why?

Because WooCommerce integration makes your life a lot easier. It means that (if you’re using the right gallery plugin) you can pull product images directly from WooCommerce. Plus, you’ll get product variation support and sale items will display a ribbon on the thumbnail. It also means that items added to the cart from the gallery will show up in your WooCommerce cart, which makes buying much simpler.

Your gallery plugin also needs to give you a great product gallery. There are a number of options available to you, but FooGallery PRO Commerce is one option that includes all of the features you’ll need to build the best galleries for your online store. Not only does it include WooCommerce integration, but it also has a product gallery layout already set up for you.

If you’ve reached this point, it’s safe to say that you need a product gallery on your ecommerce site, and that you’re using WordPress and WooCommerce to power your online sales. We’re now going to show you how to accomplish the final step – setting up your gallery to sell your products. We’ll be using FooGallery PRO Commerce to show you how to do this. Let’s get started:

Step 1: Get Set Up

To get started, you’ll need to have your WordPress site up and running, with WooCommerce installed and your products created in WooCommerce. (If you need a guide to setting up your WooCommerce products, check out this article.)

You’ll also need to install and activate FooGallery PRO Commerce.

Step 2: Create a Gallery

The next step is to add a product gallery. To do this, click on Add Gallery in the FooGallery menu. You’ll then see a new gallery page, where you’ll create your product gallery.

add new gallery

Here you can give your gallery a title – choose something clear so that it’s easy to find your gallery when adding it to a page. This also makes it easier to find a specific gallery if you have created multiple galleries.

You then need to add your media. For a product gallery, you want to add the images of your products from WooCommerce. (This is where that WooCommerce integration comes in very handy.) To do this, select the Add From Another Source button.

A new panel will open giving you a selection of datasources from which you can select your images. Select WooCommerce products.

select woocommerce as datasource

You’ll now see a range of options for setting up your gallery. For example, you can select one or more product categories (as set up in your WooCommerce products). You can also determine how the gallery is sorted, the stock status, how many products are included and the caption sources.

Product gallery settings for woocommerce

Once this is done, you can click on OK and the gallery will pull in the corresponding images from WooCommerce. You’ll see confirmation of these settings in the Gallery Items panel. If you need to change any of these settings, simply click on the Change button and update.

This is a dynamic gallery, so if you make changes to the selected product categories in WooCommerce, the changes will reflect in the gallery. Note that you made to wait several hours for this to reflect.

You can now also select the Product Gallery layout from the drop down list of gallery templates.

select product gallery layout

Step 3: Style the Gallery

Your product gallery is now set up and should be ready to go. This template has been designed to include all of the features you would need to effectively display and easily sell your products.

Below, we’ve given you a quick rundown of the specific features and settings included in the product gallery. You can also adjust these settings to suit your needs. (We’re not going to cover the general settings like appearance, hover and lightbox, but you can of course change these as well.)

Filtering – Simple frontend filtering is enabled for your product gallery, so that customers can filter the gallery by category (as set up in your WooCommerce products). You can add more advanced filtering features, or make use of the multi-level filtering.

The Search function is not enabled for the product gallery, but you can choose to enable it.

Simple filtering used in Product gallery

Ecommerce General Settings – Here you can adjust the existing settings for elements such as your Sale Ribbons and Add to Cart buttons. There are six different ribbons to choose from, with various positions and colors. You can also change the ribbon text. The button text can be changed and you can opt to hide this button for the gallery thumbnails.

There is also a View Product button which can be shown. This can be used to redirect customers to a product page or to open the product page in a lightbox. The Select Options button is used when there are product variations – you can show or hide this and you can change the text.

Ecommerce Lightbox Settings – The lightbox settings determine which features are included with the products when opened in the lightbox. Here you can choose on which side to display the product info. Plus you can show or hide the Add to Cart and View Product buttons.

So you could, for example, hide your Add to Cart buttons on the gallery, and just show them in the lightbox, or vice versa.

Step 4: Publish and Display

Once you have set up and styled your gallery, you can hit publish. You can then use the FooGallery block or the gallery shortcode to insert the gallery into your page. Once the page itself is live, your product gallery will be on display!

Final Thoughts

Selling products online can be a good way to earn an income, but for it to be effective, you need the right tools. If you’re using WordPress for your site, then these tools include WooCommerce and FooGallery PRO Commerce. This will allow you to easily create dynamic galleries to showcase your WooCommerce products.

Once your product gallery is on display, customers can browse through the products or filter them by category, ensuring that they find what they’re looking for. Sale ribbons help to highlight promotional items and Add to Cart buttons on the gallery thumbs, and in the lightbox, ensure customers have plenty of opportunity to purchase.

With WooCommerce integration, FooGallery PRO Commerce lets you set up your product galleries quickly, while taking promotions and product variations into account. So if you’re selling products online, it just makes sense to use a product gallery that makes your life easier.