In this tutorial, we’ll go through how we can to get WPGridBuilder’s facets to work with Zion Builder’s repeaters. For example, for adding different product filters, product search & load more functionality to a shop page or products archives.
WPGridBuilder is a popular WP plugin for adding real-time faceted searches & filters to posts and pages. The results load immediately on the page, so it’s great for filtering products or search without disrupting the user flow by needing to reload the page.
Using Templates in Zion Builder
With Zion Builder Pro, for displaying the product grids on product archives and the shop page, we use the repeater provider and repeater consumer functionality.
If you’re new to the repeaters, view the first 6 minutes of this tutorial walking through exactly how to create product archives in Zion Builder using repeaters providers and consumers.
We’ll need to make sure the ‘Active page query‘ option in the repeater provider. This will ensure that Woocommerce will always be showing the correct products for each archive page.
Note that there is no need to add the pagination element if using the ‘load more’ facet from WPGB.
Adding in the Facets
Once we have a template created for the product archives, the way we need to add WPGB’s facets to our templates is via the shortcode element. As we create the different facets in the WPGB’s settings, it gives us the shortcodes for each one to copy and paste.
Changing the Facet Shortcodes
As we’re not using a pre-made Grid from WPGB, to make this work with archive templates built with repeaters, we need to change the shortcodes. Instead of having grid=”X” where X is a number that be the ID of a grid, we instead use grid=”wpgb-content”
Adding the wpgb-content Class
Next, we need to tell WPGB which container to add the posts in when it’s adding new posts or displaying the results of filtering.
Important – This will need to be the direct parent of the container that we’re setting as the repeater consumer. Note that this means that if the repeater consumer is directly inside of a section, it’s not the section itself that is the direct parent, it’s the ‘inner content’ of the section.
Thanksfully, Zion Builder allows us to add classes directly to child elements from the styling tab. If it’s just a regular container, then we can add the class to the container directly.
The class to add is ‘wpgb-content’.
That’s it
Now WPGridBuilder will correctly filter the products inside of the repeater.
