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 usage of dynamic content material that attracts product information like titles, featured pictures, and costs for each and every 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 instructional, you’ll learn to create a customized class web page that routinely updates with merchandise from the suitable class, no code or further plugins required past WooCommerce.

How To Create A WooCommerce Class Web page

For those who’ve ever arrange a WooCommerce retailer, you understand what the default class pages appear to be: merchandise organized in a elementary grid with a picture, title, worth, and Upload to Cart button, all following the similar template regardless of which class you’re viewing.

Transfer topics, and the construction slightly adjustments. Your “New Arrivals” class seems similar to your “Sale” class, which seems similar to “Equipment,” even supposing each and 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 enjoy. You may want your New Arrivals class to really feel editorial, with huge product pictures and beneficiant white area, whilst your Sale web page prioritizes reductions with a tighter structure that places pricing entrance and heart.

Those ingenious choices generally require customized code or a developer who can regulate your theme information, turning what must be a design job right into a technical mission. Divi 5 contains two options that paintings in combination that can assist you to design class pages visually: the Loop Builder and CSS Grid.

Use CSS Grid To Regulate The Structure

CSS Grid offers you keep an eye on over how merchandise are organized at the web page. You outline the selection of columns for your structure, the spacing between rows and columns, and the way the construction adapts throughout other units.

You could arrange 4 columns on a desktop for a browsable grid view, drop that to 2 on pills the place display screen area is tight, and move to a unmarried column on cellular for simple thumb scrolling. All of this will get configured in a single position fairly than writing separate layouts for each and every software.

Modify 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 positive product playing cards the usage of Grid Offset Laws to create magazine-style staggered layouts that get a divorce the monotony of a super grid.

Grid handles the spacing, rhythm, and responsive habits, so you’ll be able to construct the entirety from minimum editorial layouts to dense gross sales pages that pack in merchandise whilst keeping up visible hierarchy.

Learn Everything About Divi 5’s Grid System

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, title, worth, and button association), and Divi routinely repeats that design for each and every product within the class the customer is viewing.

When any person lands in your Sneakers class, the Loop Builder pulls in the entire shoe merchandise and presentations them the usage of your card design. After they transfer to Equipment, it does the similar with accent merchandise, with out you development separate layouts for each and every class.

This transforms your Grid structure right into a dynamic gadget. You’re no longer manually putting particular person product containers into your construction; you’re making a template that responds on your retailer’s are living stock and updates routinely each time merchandise are added, got rid of, or changed.

Learn Everything About Divi 5’s Loop Builder

Construct Your Dynamic Class Web page (Step By way of Step)

We’ll construct a WooCommerce class structure that appears like this: a contemporary grid of goods underneath a daring identify, with each and every merchandise styled as a person card that includes rounded corners, blank typography, and ambitious CTA buttons.

Within the steps forward, you’ll design a unmarried loop structure to your product card, wrap it in a responsive grid, and assign it on your WooCommerce class template so it routinely populates for each and every class.

1. Set Up Your WooCommerce Class Template

Get started by way of making a devoted template to your WooCommerce class pages. Out of your WordPress dashboard, move to the Divi > Theme Builder and click on Upload New Template.

Select Construct New Template.

Make a choice Merchandise in Particular Classes and make a choice 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 make a choice 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 selection of columns you need on desktop. You’ll be able to additionally trade the construction template to check out 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 choice the Column within your Grid and open its settings. Within the Content material tab, move to Loop and permit the toggle. Select Merchandise because the Put up Sort, then pick out your product class underneath Most effective Come with Posts With Particular Phrases.

This tells Divi to copy the content material of this column for each and every product returned by way of your loop question.

At this level, the loop is energetic, however not anything seems but for the reason that column stays empty. In your next step, you’ll design the product card (the template that repeats for each and every merchandise within the class).

4. Taste The Product Card Template

Start by way of including a 25px Border Radius to the column.

The entire different pieces within the loop replace routinely. You design as soon as, and all genre changes practice to others routinely.

Upload Product Featured Symbol

Subsequent, loop the product symbol within the background to provide our card construction. Pass to Content material > Background > Symbol and hover over and click on at the Dynamic Content material possibility. Click on and make a choice Loop Product Featured Symbol.

Most effective the pictures of goods from the House class will populate. Now, upload a 2-column Row throughout the column.

Upload a black background colour to spotlight the row.

Upload 80% best and 10% backside Margin and 20px left and proper Padding. Those spacing values make certain the product symbol stays obviously visual inside the rounded card and forestalls it from touching the perimeters, particularly on darker backgrounds.

Upload 25px Border Radius to the Row to provide it a constant look.

Upload Product Name

Subsequent, upload a Heading module within the first column throughout the inserted row and loop the product’s identify in it. First, customise the Heading module. We additionally added 12px best and backside Padding.

Loop the Product identify. Pass to Content material > Textual content and hover over the Heading box. Click on at the Dynamic Content material icon and make a choice Loop Product Name.

The related product titles inside of respective fields populate routinely.

(Divi additionally means that you can loop extra than simply the identify. 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 routinely replace each 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 suitable column and elegance it to check the design.

To make it dynamic, open Content material > Hyperlink, click on the Dynamic Content material icon, and make a choice Loop Product URL. This connects the button at once to each and every product within the loop. We additionally looped the product hyperlink to the Heading module.

Now, each and every card features a button that hyperlinks to the product web page, getting rid of the desire for guide updates when your merchandise trade.

5. Customise The Grid Construction

The class web page is able. So as to add a little bit of fashion to how your playing cards seem on display screen, transfer to some other pre-designed Grid row construction.

Or use the Grid Offset editor so as to add a customized rule. Pass to Design > Structure > Upload Offset Rule. Right here, we added a Column Span rule focused on each and every 3rd merchandise within the grid.

If you wish to design your individual Grid construction, watch this video:

Subscribe To Our YouTube Channel

6. Check Responsiveness And Post

Ensure that your product playing cards glance excellent on desktop, pill, and cellular. Grid settings are responsive, so test that the spacing, textual content measurement, and buttons really feel herbal on smaller monitors.

If the entirety seems proper, go back to the Theme Builder and click on Save. Go out, and make sure you notice All Adjustments Stored prior to leaving the builder.

Your customized class web page is now are living, and WooCommerce will routinely populate it with merchandise from the class you assigned. Each time stock adjustments, the structure updates by itself.

Check out The Loop Builder In Divi 5 These days

A default WooCommerce class web page is practical, however it infrequently feels customized. By way of combining Divi 5‘s Loop Builder with CSS Grid, you’ve created a structure that appears customized, works on each and every software, 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, modify the grid presets for various aesthetics, or upload extra dynamic fields like sale worth, rankings, or inventory badges.

The publish Using Divi 5’s Loop Builder To Build A Dynamic WooCommerce Category Page seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more