The Price Grid widget by Atomic Addons shows a grid of cards, each with an image, a name, a price, a short text, a rating and a time, such as the dishes on a restaurant menu or the services of a salon. You type every card yourself, so it needs no shop: for WooCommerce products use the Product Grid widget instead. Each card can also get its own colors. This guide covers adding the widget, writing the cards and the layout settings. For the same cards in a sliding row, see the Price Carousel widget.
Enable the Price Grid Widget
Price Grid is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Price Grid. You can also open the Content category.
- 4
Turn the Price Grid widget on.
- 5
Click Save Settings.
Add the Price Grid Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Price Grid. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Product Items
Content → Product Items holds the cards: six samples, from Pizza to Pasta, to start with. Click a card to open it, use Add Item for a new one, and drag cards to change their order. Each card has two tabs. The Content tab holds what it shows:
- 1
Image: The card's picture, a placeholder by default.
- 2
Title: The item's name. It also names the card in the list.
- 3
Price: The price as you want it to read, such as “$204” (the default) or “From €12”. It is plain text, so you write the currency yourself.
- 4
Text: A short description, written in a text editor.
- 5
Link: Where the card leads,
#by default. The cog icon opens Elementor's link options. - 6
Rating: A score from 0.5 to 5 in half steps, 4.5 by default.
- 7
Rating Count: Text beside the rating, such as the number of reviews: “(10,678)” by default.
- 8
Time: A duration shown with a clock icon, such as a preparation time: “1 hour 10 mins” by default.
- 9
Badge Text: The label in the corner of the image, “Sale” by default. It shows only while Badge is on; leave it empty for no badge on this card.
The Style tab of a card overrides the widget's colors for that card alone, for example to make one item stand out: Title Color, Price Color, Text Color, Read More Color, Read More Background Color, Rating Color, Rating Text Color, Time Color, Badge Color and Badge Background Color.
A part you leave empty is skipped on that card. The title and price share a line, with the price on the right; the rating and time share the bottom line of the card.
Additional Options
Content → Additional Options sets the layout and what every card shows:
- 1
Columns: How many cards sit in a row, 1 to 6: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.
- 2
Column Gap: The space between cards side by side, 20px by default, per screen size.
- 3
Row Gap: The space between rows, 20px by default, per screen size.
- 4
Show Name: Shows the titles. On by default. Title HTML Tag sets their markup: H1 to H6, div, span or p, H3 by default.
- 5
Show Price: Shows the prices. On by default.
- 6
Show Time: Shows the times. On by default.
- 7
Show Text: Shows the descriptions. On by default.
- 8
Link to: Which part of the card opens its link. Button, the default, adds a Read More button under the text. Title or Image make that part clickable instead, with no button.
- 9
Show Rating: Shows the rating and its count. On by default. Rating Type shows it as a Number with one star, such as “4.5 ★” (the default), or as five Star icons filled to the score.
- 10
Badge: Shows each card's Badge Text. Off by default.
- 11
Show Iamge: (spelled this way in the panel) Shows the images. On by default. Image Resolution picks which size WordPress serves, Medium by default.
- 12
Alignment: Left, center, right or justified text in the cards, per screen size.
Read More
With Link to set to Button, Content → Read More sets up the button: Read More Text (“Read More” by default), an optional Icon, its Icon Position (Left or Right, the default) and Icon Spacing (8px by default). A card whose Link is empty shows no button.
Badge
With Badge on, Content → Badge places the labels:
- 1
Position: Where the badge sits on the card: Top Right by default, or any corner, edge center or the center.
- 2
Offset: Click the pencil and choose Custom to fine-tune the badge: Horizontal Offset and Vertical Offset move it up to 300px either way, and Rotate tilts it, −360° to 360°. Each can differ per screen size.
Style the Price Grid
Everything below is on the Style tab and applies to every card; a card's own Style tab colors win over it. Sections that belong to a part you turned off are hidden.
- Items — the card: content padding, background, border, radius, padding and shadow, with a Hover state.
- Image — border, radius, padding and the spacing below it, with a Hover state.
- Title, Price and Text — color, hover color, spacing and typography; the title also has a text shadow.
- Read More — the button's colors, background, border, radius, padding and margin, with a Hover state and a hover animation.
- Rating — star colors, or for the Number type the number's colors, background, radius and padding; plus the count's color, typography and spacing.
- Time — color, hover color, typography and the space between the clock icon and the text.
- Badge — text color, background, border radius, padding, margin and typography.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.