The brand new Woo Modules in Divi 5 provide you with a lot more keep watch over over how WooCommerce class pages glance and serve as. As an alternative of depending on WooCommerce’s default archive structure, you’ll be able to construct class templates visually inside of Divi’s Theme Builder.
On this educational, you’ll be told two sensible tactics to create a easy Woo class web page in Divi 5. The primary makes use of the Woo Merchandise module to generate a dynamic product grid temporarily. The second one makes use of particular person Woo modules to construct a extra customized product card structure for curated merchandise or featured sections. We’ll additionally display when it makes extra sense to make use of Divi 5’s Loop Builder for a completely dynamic customized archive.
Contents
What Are Woo Modules In Divi 5?
WooCommerce class pages determine of the field, however the default construction is restrictive. Product grids, card layouts, spacing, typography, and button kinds are most commonly managed via WooCommerce and your theme, so deeper customization continuously method enhancing templates or writing CSS.
Divi 5 adjustments that via turning WooCommerce components into visible development blocks. We launched new Woo Product Modules for Divi 5, overlaying product and class web page design whilst holding compatibility with WooCommerce’s core capability.
That implies you’ll be able to position product-related components precisely the place you need them and magnificence them with the similar design controls you already use all the way through Divi.
Subscribe To Our Youtube Channel
You’ll be able to use Woo Modules to customise product templates, class templates, and broader retailer reviews along Divi 5’s cart and checkout equipment.
For class pages in particular, probably the most related choices are the Woo Merchandise module for speedy dynamic grids and Divi 5’s Loop Builder when you need a completely customized repeating card structure that also updates mechanically in response to the present class.
Be informed The whole thing About Woo Modules
Construction A Easy Woo Class Web page In Divi 5
There are two just right tactics to manner a easy class web page in Divi 5.
- Use the Woo Merchandise module when you need the quickest setup and a dynamic grid that mechanically pulls merchandise from a class.
- Use particular person Woo modules when you need to design a customized product card for a couple of hand-picked pieces, featured merchandise, or a class touchdown segment.
If you need each and every product in a class to render mechanically inside of a completely customized card design, use the Loop Builder. This is the most suitable option for a dynamic customized archive structure in Divi 5.
Set Up Your Theme Builder Template
Each approaches get started within the Theme Builder. In Divi 5, Theme Builder means that you can assign one template to a selected workforce of WooCommerce pages, together with product classes.
Cross to Divi > Theme Builder and click on Upload New Template, then select Construct New Template.
Within the Use On settings, scroll to Merchandise, then select Merchandise in Particular Classes and make a choice the class you need to focus on, reminiscent of Decor. Click on Create Template.
Upload a brand new Customized Frame and edit it with the Visible Builder.
Design 1: Construct A Dynamic Class Grid With Woo Merchandise
That is the most simple and maximum sensible approach for many class pages. The Woo Merchandise module is designed to show a dynamic gallery of WooCommerce merchandise, and it will possibly filter out via class.
Upload a brand new Phase and insert a single-column Row.
Open the Row settings and upload 60px Padding to offer the structure respiring room.
Observe an 8px Border Radius.
Set the background to Black.
Click on the black plus button within the Row, open Woo Modules, and insert the Woo Merchandise module.
Within the module’s Content material tab, set Product Kind to Product Class, then select Decor below Integrated Classes. This makes the grid pull merchandise from that class dynamically.
From there, taste the module to compare your logo. Cross to Design > Overlay and set the Icon Colour to #FB7248. Set the Overlay Background Colour to #000000 at 50% opacity.
Underneath Symbol > Border, upload an 8px radius to the product pictures.
Taste the Identify Textual content and set the name colour to White so it sticks out towards the darkish background.
Then taste the Value Textual content the usage of your number one accessory colour to create more potent visible distinction.
At this level, you’ve got a dynamic class grid that updates mechanically as merchandise are added to or got rid of from that class.
Design 2: Construct A Curated Product Phase With Particular person Woo Modules
This manner offers you extra visible keep watch over, nevertheless it works another way. As an alternative of creating a dynamic archive grid, you create a customized card for explicit merchandise via combining separate Woo modules.
That makes this technique a greater have compatibility for featured merchandise, editorial class touchdown pages, or a small curated segment inside of a class template. If you need a completely dynamic repeating structure for each and every product within the class, skip to the word about Loop Builder underneath.
Upload a brand new Phase and insert a four-column Row. Observe 60px Padding, 8px Border Radius, and a White Background.
Within the first column, upload those modules so as:
- Woo Product Symbol
- Woo Product Identify
- Woo Product Value
- Woo Upload To Cart Button
Open the Woo Product Symbol settings and upload an 8px Border Radius to the Sale Badge. Trade its colour to #467040.
Then taste the name, worth, and button modules so the cardboard feels constant. Regulate typography, spacing, borders, and colours till the design fits your retailer.
As soon as the styling is completed, open the Content material tab in every module and assign the similar product to all 4 modules. On this instance, use Wood Chair Set. That connects the picture, name, worth, and button to 1 explicit product.
Your first card is entire. Reproduction all the column and paste it into the second one column so all styling carries over.
Repeat the method for the opposite columns, then trade the chosen product inside of every module so each and every card presentations a unique merchandise.
Sooner than publishing, transfer to pill and cellular perspectives to verify the spacing, stacking, and button alignment nonetheless paintings neatly.
Whilst you’re finished, save the structure and go back to Theme Builder. Click on Save Adjustments to post the template.
Necessary: When To Use Loop Builder As an alternative
The handbook card approach above isn’t your best option when you need a real product archive that mechanically repeats a customized card for each and every product within the present class.
For that, use Loop Builder. In Divi 5, the Loop Builder is a greater device for customized dynamic class pages as a result of you’ll be able to design a unmarried product card structure, question WooCommerce merchandise, and feature Divi repeat that structure mechanically around the class web page.
In different phrases:
- Use Woo Merchandise for the quickest dynamic class grid.
- Use particular person Woo modules for curated or hand-picked product sections.
- Use Loop Builder for a completely customized dynamic archive structure.
Sensible Pointers Sooner than You Submit
A couple of ultimate exams could make the variation between a class web page that appears just right within the builder and person who works neatly for consumers at the entrance finish. Sooner than you post, overview those main points to ensure your structure remains polished, readable, and simple to make use of throughout gadgets.
- Stay class templates easy first, then refine spacing and styling as soon as the construction is in position.
- Use constant symbol ratios to stay product playing cards balanced around the grid.
- Take a look at hover states, sale badges, and Upload to Cart buttons on cellular and desktop.
- Preview the template on a class with sufficient merchandise to check line breaks, pagination, and spacing.
- In the event you use a gloomy background, examine the distinction of the name, worth, and button for clarity.
Check out Divi 5 Woo Modules On Your Class Pages
Divi 5 offers you multiple method to construct WooCommerce class pages. The Woo Merchandise module is the fastest path to a blank dynamic grid, whilst particular person Woo modules provide you with extra keep watch over for curated featured-product sections. When you want a completely customized repeating archive structure, Loop Builder is the more potent choice.
That flexibility is what makes Divi 5 so helpful for WooCommerce shops. You’ll be able to get started easy, fortify the structure visually, and select the process that fits the kind of class web page you’re in fact development.
The publish How To Create A Easy Woo Class Web page With Divi 5 gave the impression first on Sublime Issues Weblog.
WordPress Web Design