How To Add a Filterable WooCommerce Product Gallery On Your Website

Do you have a WooCommerce Product Gallery on your website? Many people undermine their importance by adding dull static galleries. But did you ever wonder what would it take to build the Fancy Galleries you see on many big E-Commerce websites on your own?

Don’t worry! Today’s post focuses on how you can easily create filterable WooCommerce Product Gallery using Elementor and Essential Addons. Let’s find out.

WooCommerce Product Gallery

For your WooCommerce website, you might want to include a general product image gallery. But what good will it be if it is not responsive and filterable?

WooCommerce Responsive Gallery Plugin

To create a responsive Gallery for your WooCommerce site, you need Elementor. Elementor is the best Drag and Drop page builder out there for WordPress. Along with Elementor you need Essential Addons for Elementor. This elements library for Elementor offers 30+ additional top-notch elements.

WooCommerce Dynamic Gallery

After you have activated both the plugins, open your Elementor Dashboard and place your mouse on the Search Bar sitting at the top of the Side Panel. Then type in EA Filterable Gallery. 

Drag the element and drop it inside the Elementor blank canvas.

Content Settings

After you have added the element, it is ready to be customized. We shall start by adjusting the Content settings.

• Filterable Gallery Settings

Under the Content Tab, you will find the basic adjustment options for the Gallery. By default, the Number of Columns is set to three which works perfectly for the gallery I am going to create. But know that every option under Content is adjustable.

• Gallery Control Settings

The filterable Gallery will filter in response to the key-word(controller) you assign to each item on the gallery. It is advised to specify Category Names as the key-word for your items.

The Controller key-words will sit at the top of the gallery. And, each Category will be included in a separate card under Gallery Control Settings.

For my Gallery, I have used 4 Controller Key-Words which are nothing but the actual Category Names I have assigned to my Product Items.

1. Click the cross icon to remove a card.
2. Chick on ADD ITEM to add a new Controller Key-Word to the gallery.

By default, there will always be an ALL Controller Key-Word. This Keyword is common to every item on the Gallery.

• Gallery Item Settings

This is where you will have to spend most of your time. Every item you want to add to the gallery will be contained in a separate card under this tab. This is how the tab looks after I completed adding all the items to my gallery. But for your convenience, let’s see from the start.

This is how the tab will look after you add it inside the Elementor interface. You can see six cards already created. For my Gallery, I have added 19 items. You can add new item cards by clicking on the ADD ITEM button sitting at the very bottom of the Gallery Item Settings tab.

Now let’s see what is actually inside the cards.

1. Item Name- Type in the product name in this field.
2. Item Content- Add Description of your Product.
3. Control Name- Add the Category Name of your Product.
4. Image- Upload your Product Image.
5. Gallery Link- Paste the link to your original Product Gallery Page.

• Popup Settings

You will find two toggle bars inside this tab. First, decide whether you want to add a Popup feature to your gallery or not. If you want to add the feature, enable Show Popup. The second toggle bar lets the pop-up act like a gallery itself.

WooCommerce Product Gallery Slider

If you toggle on the Show Popup Gallery, your buyers can navigate through the product gallery from the pop-up box.

Product Description

Remember in the Gallery Item Settings you added a nice title and Description for your Gallery Items? To make the texts visible along with the Product Image head back to Content>Filterable Gallery Settings>Grid Style. 

Select Cards from the Dropdown and you will get something like this.

Wrapping Up!

The Elementor Interface is really easy. Additionally, all the Essential Addons elements are somewhat self-explanatory. But you can always check out our documentation page to get a jump start. Please comment below if you have any further queries.

In the meantime, here is a quick blog on how you can create Amazing Content Timeline for your WordPress website.