A product grid provides customers a way to browse your catalog. Search, filters, and sorting be in agreement them narrow that catalog to products which can be appropriate their needs. In Divi 5, the Loop Builder means that you can create custom designed product enjoying playing cards and repeat them in a grid, while the Publish Clear out Module provides the controls customers use to refine the effects.
Beneath, we’ll assemble a product grid that buyers can search by way of keyword and narrow by way of magnificence and price. Along the easiest way, we’ll check out other controls you’ll be capable of add, at the side of stock status, evaluate ratings, product attributes, and sorting by way of value, recognition, or rating. You’ll need Divi 5, WooCommerce, and a few products for your catalog.
Get able Your Product Catalog
WooCommerce should be installed and have products ready to turn previous to you get started. If you wish to have be in agreement with that, our knowledge to putting in WooCommerce covers the setup, and the Divi and WooCommerce integration internet web page explains how the two artwork together.
Filters use wisdom that already exists. If you want to have customers to filter by way of magnificence, color, or size, the similar categories and attributes wish to be assigned for your products. Together with a filter regulate does no longer create that underlying knowledge.
Faster than building, examine that your product categories contain products. For international attributes, define the words and assign them to the right kind products. A lot of prices makes it easier to expose the associated fee slider, while products with different evaluate ratings will let you see how a rating filter affects the effects.
Sorting moreover is decided by means of the available wisdom. For example, Popularity (Product sales) uses product sales counts. Products with no product sales can however appear, then again a catalog where each and every product has the identical product sales depend isn’t going to supply an important recognition rating.
Assemble A Product Loop
Divi contains plenty of WooCommerce Modules for showing product knowledge during your store, at the side of in Theme Builder templates. For this educational, we’ll use explicit particular person Image, Heading, Text, and Button Modules, then allow a Loop on their mother or father container.
This technique provides us regulate over the product card’s building. We will be able to decide which knowledge to show, tips about how you can get ready it, and which parts need their own structure previous to connecting the modules to product wisdom.
Should you occur to would rather get began with a finished card design, 12 Store Loops For Divi 5 contains twelve free product-grid layouts. Import the JSON underneath Divi > Divi Library, add a structure for your internet web page, and continue with the query settings below.
Each way, assemble the Loop first and fasten the Put up Filter out Module afterward. This educational uses a custom designed Divi product Loop rather than the standard WooCommerce retailer grid.
Assemble The Product Card
Open the internet web page throughout the Visible Builder and add a Row or Workforce to hold the grid. Inside it, add a 2nd container for the product card.
Select the outer container and switch its Construction to CSS Grid. The outer container arranges the repeated enjoying playing cards into columns, while each interior card remains one unit. Set the column depend and gaps to suit your design.
Throughout the card container, add an Image Module for the product image, a Heading Module for the title, a Text Module for the associated fee, and a Button Module linking to the product.
We’ve moreover added Workforce Modules to organize parts of the card. The ones permit us to organize determined on parts horizontally while keeping the total card vertical. You’ll regulate that internal building without changing how the outer grid arranges the enjoying playing cards.
Allow The Loop And Set The Query
Remove any unused Columns from the grid so most simple the meant card building remains. Then select the card’s non-public container, the one retaining the Image, Heading, Text, and Button Modules, and allow its Loop.
Set Query Kind to Put up Kind, make a choice Products since the Put up Kind, and set Posts In step with Internet web page to the selection of products you want to show previous to pagination.
Pagination is handled by way of a separate module. A Pagination Module connected to the identical Loop follows its full of life filters and returns to the main internet web page once they alternate. Our knowledge to the use of the Loop Builder and Pagination Module in combination covers that setup.
As quickly because the query is set, Divi repeats the card container for the products it returns. The outer grid handles their affiliation, so you do not need to duplicate the card manually.
Bind The Modules To Dynamic Content material subject material
Next, connect the modules throughout the card to the current product’s wisdom. Open each module and use its dynamic content material subject material alternatives to assign the right kind worth:
- Image: The product’s featured image.
- Heading: The product title.
- Text: The product value.
- Button Link: The product URL.
Set the Button’s text separately to the label you want customers to seem.
Each repeated card receives the information for its non-public product. A Heading connected to the product title shows the right kind determine in each and every card, while the Image and price substitute within the identical way.
You configure the development and dynamic connections once. Changes to that shared card design then observe across the products displayed by way of the Loop.
Label The Loop
Give the two containers distinct labels underneath Meta > Element Label. Use Product Grid for the outer container and Product Card for the interior container with the Loop enabled.
The Put up Filter out Module’s Function Loop dropdown identifies Loops by way of their Element Labels. For this setup, the filter will have to purpose Product Card, because of that’s the phase repeating for each product.
Clear labels turn out to be specifically useful on pages with plenty of Loops. Moreover they will let you resolve parts throughout the Layers Panel and when choosing goals for Interactions.
Connect The Put up Filter out Module
With the product Loop in place, add a brand spanking new one-column Row above the grid and insert a Put up Filter out Module. Maintaining the form in its non-public Row approach the grid’s structure does no longer wish to account for the filter controls.
The starter form includes a Search field, a Elegance checkbox report, a Reset button, and an Follow button. Until you choose a purpose, the module shows a Select a Loop message.
Open Content material subject material > Function and set Function Loop to Product Card, the usage of the label assigned to the looped container.
Two additional settings regulate how the form works:
- Follow Mode: Submit waits for the shopper to click on on Follow. Auto applies changes as a field is adjusted.
- Relation: And requires all full of life filter prerequisites to check. Or shall we in products matching any full of life state of affairs.
For this assemble, use Auto and And. This lets customers combine a key term, magnificence, and price range to narrow the grid.
The example removes each and every buttons for a compact form. The Follow button is senseless in Auto mode, then again Reset can however provide a at hand way to clear choices. Keep it if you want to have that selection available to customers.
One Put up Filter out Module can contain the opposite field items sought after for this manner. We’ll keep them together proper right here, with the mummy or dad module controlling the target and the relationship between the full of life filters.
Set Up The Filter out Items
With the buttons removed, the Search and Elegance items keep. The default Search field searches product titles and content material subject material. It does no longer routinely search each and every worth displayed on a card, so use trustworthy controls for categories, attributes, and price.
The Elegance products initially refers to straightforward submit categories. Open it and change Field Chance to Product Categories so it fits the Products query used by the Loop.
Check out that the displayed alternatives now correspond for your product categories. In the event that they don’t, examine each and every the field’s provide and the products assigned to those categories.
Add The WooCommerce Filter out Items
When interested by a WooCommerce product Loop, you’ll be capable of use 3 product-specific field sorts:
- Price Range: Supplies customers a slider for narrowing products by way of value.
- Stock Status: Filters by way of availability, at the side of in stock, out of stock, and on backorder.
- Analysis Score: Filters products by way of large title rating.
The ones controls use the ideas saved at the side of your products. For this assemble, we’ll add most simple the Price Range slider, then again you’ll be capable of include the others after they’re useful on your catalog.
Click on on Add New Put up Filter out Products, set Field Kind to Price Range, and enter Price as its label. Check out the displayed value bounds against your catalog previous to moving on.
Filter out By means of Attributes, Tags, And Custom designed Fields
Attributes be in agreement customers read about products by way of details comparable to size, color, or matter subject material. For example, a jacket catalog may get pleasure from size and color filters alongside its product categories.
Use international product attributes with words assigned to the similar products. Filtering the grid helps customers to find matching products; deciding on a selected variation however happens right through the product’s variation controls.
To be able to upload an function filter, create a Put up Filter out Products, set Field Kind to Checkbox, and make a choice the function underneath Field Chance. Checkboxes allow customers to choose multiple available values.
The identical commonplace setup applies to product tags and supply classes: create a separate products and select the corresponding provide underneath Field Chance.
Custom designed fields can provide additional filtering requirements. Choose the similar field provide and make sure the filter values are compatible the information saved at the side of your products. The field type and comparison will have to pass smartly with that wisdom, particularly when operating with numeric values.
We’re leaving the ones now not necessary controls out of the finished example. Its search field, product categories, and price slider are enough to expose the setup without making the form unnecessarily long.
Let Consumers Kind The Grid
Sorting changes the order of the products returned by way of the Loop. An Order By means of products permits you to choose which sorting alternatives customers can use. For a product Loop, the ones include Price, Popularity (Product sales), and Score, alongside alternatives corresponding to call and date.
An Order products provides customers ascending and descending choices. A A couple of Order products lets them combine up to 5 sorting rules.
Sorting reads the underlying product wisdom rather than the visible card content material subject material. For example, customers can sort by way of rating despite the fact that your card design does no longer display a rating.
We don’t appear to be together with sorting to this particular form, then again these items are available within the identical module when your product grid needs them.
What Happens When A Filter out Is Used
The form applies its full of life prerequisites to the selected Function Loop. With And determined on, a consumer can enter a keyword, make a choice a category, and regulate the associated fee range to turn products matching those prerequisites together.
Follow Mode determines when those changes take have an effect on. In Auto mode, filters observe as the shopper adjusts the fields. In Submit mode, customers may make plenty of choices previous to clicking Follow.
A separate grid with a unique purpose isn’t controlled by way of this manner. That distinction means that you can place multiple collections on a internet web page without making each and every filter have an effect on each and every Loop.
The example moreover shows full of life filters throughout the internet web page URL. This makes filtered views useful previous the prevailing browsing session: customers can bookmark a spread, and also you’ll be capable of share a link to a selected set of results.
For example, a link to tents inside of a decided on value range may end up in the identical grid with those filters already applied. Open a copied filtered URL in a brand spanking new tab to make sure that it restores the meant selection.
Faster than styling the form, take a look at the controls in my opinion and together. Test that the effects suit your catalog, then clear the selections to return to the unfiltered view.
Style The Filter out Form
The mother or dad Put up Filter out Module’s Design tab provides shared styling for the form’s items. Its structure settings regulate the total affiliation, while groups for fields, alternatives, checkboxes, radio alternatives, and buttons imply you’ll be able to style the controls inside of it.
For this situation, we use off-white backgrounds, thin borders, and loyal label colors to connect the form visually with the product grid.
To reproduce the demonstrated affiliation, use a Flex structure with wrapping enabled. Each Put up Filter out Products has its non-public Column Class underneath Sizing, which determines its share of the available width.
Set Search to finish width, Product Categories to one-third, and Price to two-thirds. This places Search on its own line, with categories and price sharing the street beneath it.
A Measurement of Shrink to Are compatible may make an products observe its content material subject material width. Use it where that matches the structure, while leaving enough room for the associated fee slider to stick at ease to use.
Style Each Field In One Cross
With the affiliation in place, open the mummy or dad module’s Field group of workers. Set the background color, border width and color, and corner radius.
The ones shared settings be in agreement the quest field, magnificence regulate, and price slider in point of fact really feel like parts of the identical form. You’ll resolve the everyday styling proper right here previous to adjusting somebody exceptions.
Next, regulate the field padding and label typography. Padding provides the controls enough room, while the Label Text group of workers controls font weight, color, and line best.
A rather heavier label can distinguish it from input text without overpowering the form. In case your most well-liked font is helping variable weights, Divi 5 permits you to choose a weight between the usual commonplace and ambitious values.
Specific particular person Put up Filter out Items also have their own design settings. Use those when one products will have to range from the shared mother or father styling, rather than configuring each and every field separately from the start.
You’ll save reusable styling as Chance Workforce Presets and apply it to other forms. That turns out to be useful when plenty of filtered grids will have to share the identical field and label design.
Set The Filter out Construction For Small Screens
The one-third and two-thirds affiliation works on wider shows. On a phone, give the category and price items their own lines so neither regulate feels cramped.
Switch to the phone breakpoint and set each products’s Column Class to finish width. Search, categories, and price will then stack vertically.
Check out the product grid’s responsive column depend at the equivalent time. The form and enjoying playing cards will have to keep easy to use together, with readable text and enough room for the slider and sophistication alternatives.
Assemble A Product Grid Consumers Can Uncover
Your product grid in Divi 5 now lets customers search by way of keyword, make a choice a category, and narrow the associated fee range. The Loop Builder handles the repeated product enjoying playing cards, while the Put up Filter out Module controls which products appear. This setup uses Divi and WooCommerce without a separate filtering plugin.
You’ll assemble on the equivalent foundation with attributes, stock status, ratings, and sorting after they’re useful on your catalog. Get began with the controls customers need most, then add others since the product range requires them.
The Loop Builder moreover is helping other wisdom sources, at the side of custom designed submit sorts and custom designed fields. The identical commonplace way can be used for various filterable content material subject material, while WooCommerce provides the product-specific controls used in this educational.
The submit How To Construct A Filterable WooCommerce Product Grid In Divi 5 gave the impression first on Sublime Issues Weblog.
0 Comments