WooCommerce class pages steadily glance the similar out of the field, however Divi 5 adjustments that. With the Loop Builder, you’ll be able to redesign how merchandise seem, the use of dynamic content material that attracts product information like titles, featured photographs, and costs for each merchandise in a class. Pair it with Divi 5’s CSS Grid, and also you get complete keep an eye on over the structure.
On this educational, you’ll learn to create a customized class web page that mechanically updates with merchandise from the best class, no code or additional plugins required past WooCommerce.
How To Create A WooCommerce Class Web page
Should you’ve ever arrange a WooCommerce retailer, you recognize what the default class pages seem like: merchandise organized in a elementary grid with a picture, identify, worth, and Upload to Cart button, all following the similar template regardless of which class you’re viewing.
Transfer subject matters, and the construction slightly adjustments. Your “New Arrivals” class seems similar to your “Sale” class, which seems similar to “Equipment,” although every class serves an absolutely other goal for your retailer.
It’s practical sufficient to get a shop operating, however it doesn’t provide the design flexibility you want for a branded buying groceries revel in. You may want your New Arrivals class to really feel editorial, with huge product photographs and beneficiant white area, whilst your Sale web page prioritizes reductions with a tighter structure that places pricing entrance and heart.
Those inventive selections normally require customized code or a developer who can regulate your theme information, turning what will have to be a design activity right into a technical undertaking. Divi 5 comprises two options that paintings in combination that will help you to design class pages visually: the Loop Builder and CSS Grid.
Use CSS Grid To Keep an eye on The Format
CSS Grid offers you keep an eye on over how merchandise are organized at the web page. You outline the collection of columns for your structure, the spacing between rows and columns, and the way the construction adapts throughout other gadgets.
Chances are you’ll arrange 4 columns on a desktop for a browsable grid view, drop that to 2 on pills the place display area is tight, and pass to a unmarried column on cell for simple thumb scrolling. All of this will get configured in a single position reasonably than writing separate layouts for every instrument.
Regulate the gaps between pieces to create an ethereal really feel, or tighten them up for a compact, catalog-style presentation. You’ll be able to even offset sure product playing cards the use of Grid Offset Regulations to create magazine-style staggered layouts that get a divorce the monotony of an excellent grid.
Grid handles the spacing, rhythm, and responsive habits, so you’ll be able to construct the whole lot from minimum editorial layouts to dense gross sales pages that pack in merchandise whilst keeping up visible hierarchy.
Be informed The whole thing About Divi 5’s Grid Machine
Use The Loop Builder To Construct Customized Class Pages
The Loop Builder populates your CSS Grid structure with precise product content material and makes it paintings throughout other classes. It acts as a template engine. You design one product card structure (the picture, identify, worth, and button association), and Divi mechanically repeats that design for each product within the class the customer is viewing.
When somebody lands to your Footwear class, the Loop Builder pulls in all of the shoe merchandise and shows them the use of your card design. Once they transfer to Equipment, it does the similar with accent merchandise, with out you construction separate layouts for every class.
This transforms your Grid structure right into a dynamic machine. You’re no longer manually hanging person product bins into your construction; you’re making a template that responds in your retailer’s are living stock and updates mechanically every time merchandise are added, got rid of, or changed.
Be informed The whole thing About Divi 5’s Loop Builder
Construct Your Dynamic Class Web page (Step Via Step)
We’ll construct a WooCommerce class structure that appears like this: a contemporary grid of goods beneath a daring name, with every merchandise styled as a person card that includes rounded corners, blank typography, and impressive CTA buttons.
Within the steps forward, you’ll design a unmarried loop structure in your product card, wrap it in a responsive grid, and assign it in your WooCommerce class template so it mechanically populates for each class.
1. Set Up Your WooCommerce Class Template
Get started through making a devoted template in your WooCommerce class pages. Out of your WordPress dashboard, pass to the Divi > Theme Builder and click on Upload New Template.
Select Construct New Template.
Make a selection Merchandise in Particular Classes and make a selection the class you need to show your structure in (those are your WooCommerce product classes).
As soon as the template seems within the builder, click on Upload Customized Frame and choose Construct Customized Frame.
This opens the Visible Builder, the place you’ll design the structure.
2. Upload A Grid Construction For Your Merchandise
The template begins clean. Let’s import a pre-designed class web page structure to hurry up the method. Seek for Product and choose between quite a lot of product templates:
Upload a brand new 2-column Multi-Row.
Outline the collection of columns you need on desktop. You’ll be able to additionally exchange the construction template to take a look at different layouts.
3. Flip The Grid Into A Dynamic Product Loop
Now that the grid construction is in position, flip this structure right into a dynamic product record. Delete the additional columns and go away a unmarried column. This column turns into your product card template from which the opposite playing cards inherit their designs.
Make a selection the Column inside of your Grid and open its settings. Within the Content material tab, pass to Loop and allow the toggle. Select Merchandise because the Put up Sort, then select your product class beneath Most effective Come with Posts With Particular Phrases.
This tells Divi to copy the content material of this column for each product returned through your loop question.
At this level, the loop is energetic, however not anything seems but for the reason that column stays empty. In the next move, you’ll design the product card (the template that repeats for each merchandise within the class).
4. Taste The Product Card Template
Start through including a 25px Border Radius to the column.
All of the different pieces within the loop replace mechanically. You design as soon as, and all genre adjustments follow to others mechanically.
Upload Product Featured Symbol
Subsequent, loop the product symbol within the background to offer our card construction. Move to Content material > Background > Symbol and hover over and click on at the Dynamic Content material possibility. Click on and make a selection Loop Product Featured Symbol.
Most effective the photographs of goods from the House class will populate. Now, upload a 2-column Row within the column.
Upload a black background colour to focus on the row.
Upload 80% best and 10% backside Margin and 20px left and proper Padding. Those spacing values make sure the product symbol stays obviously visual throughout the rounded card and forestalls it from touching the perimeters, particularly on darker backgrounds.
Upload 25px Border Radius to the Row to offer it a constant look.
Upload Product Name
Subsequent, upload a Heading module within the first column within the inserted row and loop the product’s name in it. First, customise the Heading module. We additionally added 12px best and backside Padding.
Loop the Product name. Move to Content material > Textual content and hover over the Heading box. Click on at the Dynamic Content material icon and choose Loop Product Name.
The related product titles inside respective fields populate mechanically.
(Divi additionally allows you to loop extra than simply the name. You’ll be able to pull in dynamic fields like worth, sale worth, inventory standing, rankings, brief description/description, customized fields, and extra. This permits you to create detailed product playing cards that mechanically replace every time the product information in WooCommerce adjustments. You’ll be able to loop extra fields; for our structure, we’ll stay it easy.)
Upload An Upload To Cart Button
Upload a Button module in the best column and magnificence it to compare the design.
To make it dynamic, open Content material > Hyperlink, click on the Dynamic Content material icon, and make a selection Loop Product URL. This connects the button immediately to every product within the loop. We additionally looped the product hyperlink to the Heading module.
Now, each card features a button that hyperlinks to the product web page, getting rid of the will for handbook updates when your merchandise exchange.
5. Customise The Grid Construction
The class web page is in a position. So as to add somewhat of favor to how your playing cards seem on display, transfer to every other pre-designed Grid row construction.
Or use the Grid Offset editor so as to add a customized rule. Move to Design > Format > Upload Offset Rule. Right here, we added a Column Span rule focused on each 3rd merchandise within the grid.
If you wish to design your personal Grid construction, watch this video:
Subscribe To Our YouTube Channel
6. Take a look at Responsiveness And Submit
Be sure your product playing cards glance excellent on desktop, pill, and cell. Grid settings are responsive, so test that the spacing, textual content measurement, and buttons really feel herbal on smaller monitors.
If the whole lot seems proper, go back to the Theme Builder and click on Save. Go out, and make sure you spot All Adjustments Stored sooner than leaving the builder.
Your customized class web page is now are living, and WooCommerce will mechanically populate it with merchandise from the class you assigned. Every time stock adjustments, the structure updates by itself.
Check out The Loop Builder In Divi 5 As of late
A default WooCommerce class web page is practical, however it hardly ever feels customized. Via combining Divi 5‘s Loop Builder with CSS Grid, you’ve created a structure that appears customized, works on each instrument, and updates itself as stock adjustments. The product card, spacing, and button styling are yours, however the content material remains dynamic.
From right here, replica the structure for different classes, alter the grid presets for various aesthetics, or upload extra dynamic fields like sale worth, rankings, or inventory badges.
The submit The use of Divi 5’s Loop Builder To Construct A Dynamic WooCommerce Class Web page gave the impression first on Chic Topics Weblog.
WordPress Web Design