Back to blogHow To Create a WooCommerce Product Gallery Slider Using Bricks Builder

How To Create a WooCommerce Product Gallery Slider Using Bricks Builder

Looking for a simple way to create a WooCommerce Product Gallery Slider using Bricks Builder? Well, look no further because we have got you covered!

One of the most effective ways to enhance your product pages is by adding a product gallery slider. These sliders make your website look professional and improve the navigation experience by allowing visitors to browse product images seamlessly.

In this guide, we’ll walk you through the process of creating a WooCommerce product gallery slider using Bricks Builder and Max Addons – that too without worrying about any code.

Yes, you heard it right! Max Addons’ Product Gallery element lets you build a perfect slider showcase for your WooCommerce Product Gallery. 

So let’s get started!

Why Choose Max Addons’ WooCommerce Product Gallery element for Bricks Builder?

You might be wondering why you should choose the Max Addons Product Gallery element to create a slider in WooCommerce.

Below, I have listed some key features that will help you clarify your confusion and better understand the functionality of the Max Addons Product Gallery element.  

✅ Seamless Integration with WooCommerce and Bricks Builder

  • Max Addons’ Product Gallery element is fully compatible with WooCommerce and Bricks Builder. This compatibility means you can easily add product galleries to your existing WooCommerce store without worrying about compatibility issues or technical glitches.

✅ Versatile Layout Options for Product Display

  • The element offers multiple layout options, such as a Thumbnail Slider, Carousel, and Grid. You can choose the layout that suits your product presentation needs and design preferences.

✅ Customizable Options Based on Chosen Layout

  • Max Addons’ Product Gallery element offers various customization options depending on your chosen layout. This flexibility ensures you can tailor each product gallery to match your brand’s style and provide the best user experience.

✅ Lightbox Feature for Enhanced Viewing

  • The lightbox option lets users view product images in an enlarged format without leaving the current page. This enhances customers’ shopping experience by allowing them to see product details more clearly.

✅ Responsive Design for Any Device

  • The Product Gallery element works seamlessly on all device types, making your product galleries look great and function well on desktops, tablets, and mobile devices.

Create a WooCommerce Product Gallery Slider Using Bricks Builder and Max Addons

Now that we’ve learned about the features of the Product Gallery element, without any further ado, let’s create a WooCommerce Product Gallery Slider with Bricks Builder and Max Addons.

Follow these simple steps, and you’ll have a beautiful, functional product gallery.

1. Install and Activate Max Addons

First things first, make sure you’ve got Max Addons installed and activated on your WordPress website.

install and activate max addons

2. Create a New Template

Now that Max Addons is ready, let’s create a new page for our product gallery. Go to Bricks >> Templates in your WordPress dashboard, and give your new template a catchy title. Something like “Product Gallery Slider” works perfectly.

After naming your page, click the EDIT WITH BRICKS button.

3. Choose a Pre-Built Template or Start from Scratch

Here, you have two options. You can choose a pre-built community single-product template if you want a head start or design your page from scratch using Bricks Builder. 

woocommerce single product template

4. Add the Max Addons’ Product Gallery Element

Once you choose your template, add the Max Addons’ WooCommerce Product Gallery element to the template. Verify that the “MAX” tag is displayed on the upper left corner of the icon.

add the product gallery element

5. Enable Query Loop in Container

Next, we need to enable the Query Loop in the container where you added the Product Gallery element. This ensures that your gallery dynamically pulls in your WooCommerce products.

enable query loop

6. Set Query Loop Parameters

Now, let’s set up the query loop parameters:

  • Choose Type: Select “Posts.”
  • For Post Type: Choose “Products.”
define query type

7. Customization Options in the Product Gallery Element

The Max Addons’ Product Gallery element comes with many options to customize your gallery just how you want it.

8. Choose the Layout

The first option is the Layout. You have three choices: Grid, Carousel, and Thumbnail Slider. Since we’re creating a WooCommerce Product Gallery Slider, we’ll go with the Thumbnail Slider option.

Thumbnail Slider layout displays a large main image with smaller thumbnail images beneath it. Users can click on thumbnails to view the main image, making it perfect for showcasing multiple product angles.

slider layout

9. Select Image Sizes

Now, let’s choose the image sizes for different parts of your gallery:

  • Product Image Size: Pick the size for the main product image.
  • Thumbnail Image Size: Choose the size for the thumbnail images.
  • Lightbox Image Size: Define the size for product images when viewed in the lightbox.
product image sizes

10. Customize the Slider

Let’s make your slider look and function just right:

  • Type: Choose between Loop, Slide, or Fade transitions.
  • Direction: You can set the slider’s direction — left to Right, Right to Left, or even Vertical.
  • Start Index: Define which slide appears first.
  • Speed: Set the transition speed in milliseconds.
slider options

11. Enable Autoplay (Optional)

Want your slider to move automatically? Enable the autoplay feature.

If you enable the Autoplay feature, you further get options such as:

  • Pause on Hover: Pause the slider when the user hovers over it.
  • Pause on Focus: Pause the slider when the slider is in focus.
  • Interval: Set the time interval between slides in milliseconds.
enable autoplay

12. Thumbnails Customization Options

You even get plenty of options to fine-tune the look and behaviour of your thumbnails, including:

  • Position: Place the thumbnails at the top, right, bottom, or left of the main image.
  • Spacing: Adjust the space between thumbnails.
  • Items to Show: Define how many thumbnails are visible at once.
  • Items to Scroll: Set how many thumbnails scroll at a time.
  • Opacity & Opacity (Active): Adjust the transparency of thumbnails and the active thumbnail.
  • Border & Border (Active): Customize the border of thumbnails and the active thumbnail.
woocommerce product gallery slider thumnail customization

13. Arrow & Pagination (Optional)

Sliders are all about providing smooth navigation to users. Thus, we have included both Arrows and Pagination (Dots) options in our Product Gallery element. You can enable any navigation type.

If you enable arrow navigation, you can customize:

  • Height & Width: Set the size of the arrows.
  • Background: Choose a background color for the arrows.
  • Border & Color: Customize the border and color of the arrows.
  • Size: Adjust the size of the arrow icons.
  • Text Shadow: Add a shadow effect to the arrow text.
  • Customization for Disabled, Prev Arrow, and Next Arrow: Style the appearance of arrows when disabled, and customize the previous and next arrows separately.

If you want pagination dots, here are the customization options:

  • Margin: Adjust the space around the pagination dots.
  • Height & Width: Set the size of the dots.
  • Color & Border: Customize the color and border of the dots.
  • Active Dot: Customize the appearance of the active dot with options for height, width, color, and border.

And there you have it! You’ve created a stunning WooCommerce Product Gallery Slider using Bricks Builder and Max Addons. 

Here’s an example showcasing how the WooCommerce product gallery slider will appear on the live page:

woocommerce product gallery slider

Next Read: How to Create WooCommerce Product Tables With Bricks Builder

Next, if you’re looking for a simple way to create a WooCommerce product table with Bricks Builder, check out our easy guide on creating WooCommerce product tables. 

In addition to the Product Gallery element, Max Addons offers 20+ unique elements designed to supercharge your website-building process. These elements can streamline your workflow, saving you valuable time and resources. Are you ready to elevate your website creation journey? Get Max Addons today!

If you found this helpful tutorial, feel free to share your thoughts by commenting below!

Leave the first comment