The Price List widget by Atomic Addons shows items and their prices in a menu-style list, like a restaurant menu or a list of services. Each row can have a thumbnail, a title, a short text, an old price, a badge and a link. This guide covers adding the widget, filling the list and setting up the layout.
Enable the Price List Widget
Price List 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 List. You can also open the Content category.
- 4
Turn the Price List widget on.
- 5
Click Save Settings.
Add the Price List Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Price List. 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).
List Items
Open the widget and go to Content → List. The widget starts with three items; click Add Item for more, and open an item to edit it:
- 1
Price: The price as you want it shown, such as
$20orFrom 9 €. It is printed as typed. - 2
Old Price: A former price, shown struck through before the price. It appears only while Old Price is on in the Additional section.
- 3
Title: The item's name, “First item on the list” by default.
- 4
Text: A short description under the title.
- 5
Badge: A small label such as “New” or “Spicy”, in the top-left corner of the row. It appears only while Badge is on in the Additional section.
- 6
Image: An optional thumbnail at the start of the row.
- 7
Link: Makes the whole row a link,
#by default. Clear it for a row that is not clickable. Use the cog icon to open the link in a new tab or addnofollow.
On screens 768px and wider, a dotted line runs from the title toward the price.
Additional Settings
Content → Additional sets up the layout and the extras:
- 1
Image Size: Which image size WordPress serves for the thumbnails, Thumbnail by default.
- 2
Image Hide On: Hides the thumbnails on the screen sizes you pick: Desktop (1025px and wider), Tablet (768px to 1024px) or Mobile (767px and narrower). Mobile is picked by default.
- 3
Vertical Align: How the image, text and price line up in a row: Middle (the default), Top or Bottom. You see the difference when a row has an image or a long text.
- 4
Columns: 1 (the default), 2 or 3 columns. Use the device icon to set other numbers for tablets and phones.
- 5
Column Gap: The space between columns. Shown when you use more than one column.
- 6
Row Gap: The space between rows.
- 7
Item Counter: Numbers the rows: 1., 2., 3. and so on.
- 8
Add to Cart: Adds an icon at the end of each row, a cart by default. Pick another in Cart Icon and set the gap before it in Cart Space (14px by default). The icon is decoration: a click on it follows the row's link.
- 9
Old Price: Shows each item's old price. Old Price Space sets the gap between the old and the new price, 10px by default.
- 10
Badge: Shows each item's badge. Turn on Badge Offset to move it with Horizontal Offset and Vertical Offset (−300px to 300px) and turn it with Rotate.
Style the Price List
Everything below is on the Style tab:
- Items — the rows: background, border, radius, padding and shadow, with a Hover state.
- Title and Text — colors, hover colors, spacing and typography.
- Price and Old Price — color, background, radius and size of the price boxes, in Normal and Hover states.
- Separator — the dotted line: style (solid, dotted, dashed, double or none), width, spacing, color and hover color.
- Image — the thumbnail's size, radius, padding and spacing, with a hover border color.
- Counter — the numbers' color, radius, padding, spacing and typography, with a Hover state.
- Cart Icon — the icon's color, radius, padding and size, with a Hover state.
- Badge — the badge's color, hover color, background, border, radius and padding.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.