STEP THREE OF FOUR
Placing cards in Divi
Two modules, and a few switches.
Open the page in the Divi Visual Builder and add a ShopCard module where the card should sit. The module only chooses which product to show and how much of it; the product itself always comes from the item.
STEP ONE
Add the module
Hover over the module above where the card should go, click the plus that appears below it, and search for shopcard. Choose ShopCard Item for one product, or ShopCard Collection for a grid of them.
STEP TWO
Choose the product
In the module’s Content tab, pick the item or collection from the list. Start typing to narrow it down. The card in the builder updates as soon as you choose.
STEP THREE
Choose what shows
Under Elements, switch the image, retailer, description, price, button and disclosure on or off for this placement alone. The item keeps everything; the module just decides what to show. Romy uses this on Shop My Picks, where one collection hides its descriptions and another hides the retailer too.
STEP FOUR
Set the grid for a collection
A collection lays its cards out as a grid. Set the number of columns and the gaps under Design › Layout, with separate values for tablet and phone - for example four across on a computer, two on a tablet and one on a phone.
STEP FIVE
The heading and the button
The product name is a heading: choose its level in the module so the page’s outline stays tidy - h3 under a section heading is usual. Under Design › Button you can add an icon to the button and have it slide on hover.
GOOD TO KNOW
Before you place more
Once one card looks right, Styling the cards shows how to save that look as a preset, so every card you add matches.
CARDS UPDATE EVERYWHERE
A module holds no copy of the product, so editing the item updates every card that shows it, on every page, at once.
MISSING OR UNPUBLISHED ITEMS
If an item is deleted or unpublished, its card quietly disappears for readers. Logged-in editors see a short notice in its place instead, so you know to choose another.
IN THE THEME BUILDER TOO
The modules work in Theme Builder layouts as well as in pages and posts, so a card can sit in a footer or beside every post.
NO DIVI BUILDER?
The [shopcard] shortcode places the same cards anywhere WordPress accepts a shortcode. The shortcode has the details.
Next