How To Use The Price Table Widget By Atomic Addons

The Price Table widget by Atomic Addons builds one pricing plan: a title, the price with its currency and period, a list of features, a button and an optional ribbon such as “Popular”. Place several side by side in columns to compare plans. This guide covers adding the widget and setting up each part of the table.

Enable the Price Table Widget

Price Table is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Price Table. You can also open the Content category.

4. 4

   Turn the Price Table widget on.

5. 5

   Click Save Settings.

Add the Price Table Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Price Table. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Layout

Open the widget and go to Content → Layout:

1. 1

   Layout: The order of the table's parts. Default shows the image, header, price and footer, with no feature list. One adds the features between the price and the footer. Two puts the features before the price, Three puts them at the very end, and Four puts them above the header. Six moves the image under the header, Seven under the features, Eight puts the header under the price, and Nine sets the header and price side by side on one line.

2. 2

   Overflow Hidden: Clips anything that sticks out of the table, such as a rotated ribbon.

3. 3

   Alignment: Left, center or right alignment of the table's text. Use the device icon to set it per screen size.

Image and Header

Content → Image adds an optional picture or icon to the table:

• Choose Image — the image. Leave it empty for no image.
• Alignment — left, center (the default) or right.
• Image Size — which image size WordPress serves, Thumbnail by default.

Content → Header names the plan:

1. 1

   Title: The plan name, “Service Name” by default.

2. 2

   HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.

3. 3

   Subtitle: A line under the title, “Service sub title” by default.

4. 4

   Sticky Heading: Keeps the header pinned to the top of the screen while the visitor scrolls through a tall table, until the table's end.

Pricing

Content → Pricing sets the price:

1. 1

   Currency Symbol: None (the default), one of 19 currencies such as Dollar, Euro, Pound Sterling, Rupee (Indian), Yen/Yuan and Taka, or Custom to type your own in Custom Symbol.

2. 2

   Price: The price, 49.99 by default. The part after the decimal separator is shown smaller, beside the main number. A zero fraction, such as .00, is left out.

3. 3

   Currency Format: Which decimal separator the price uses: 1,234.56 (the default, a point) or 1.234,56 (a comma).

4. 4

   Add Custom Attributes: Adds HTML attributes to the price number, one key|value pair per line in Custom Attributes, for example for tracking scripts.

5. 5

   Sale: Shows an Original Price (79 by default) struck through before the price, with the same currency symbol. It has its own Add Custom Attributes option.

6. 6

   Period: The billing period, “Monthly” by default. Leave it empty to hide it.

Whether the symbol sits left or right of the price, and whether the period sits below or beside it, is set on the Style tab under Pricing. The period is below by default.

Features

Content → Features lists what the plan includes. Click Add Item for each feature. Each item has two tabs:

1. 1

   Normal Text: Text is the feature, “List Item” by default. Icon goes before it, a check mark by default. Icon Color colors this item's icon, and Icon Hover Color sets its color while the pointer is over the table, so you can mark included and missing features differently.

2. 2

   Tooltip Text: Text adds a tooltip that appears when a visitor points at the feature. Placement puts it to the Right (the default), left, top or bottom.

Below the list:

• Read More Toggle — shows only the first features and a button to show the rest. Active Features Item sets how many show at first (3 by default); Show All Features and Less Features are the button's two labels, “- Show all features” and “- Less features” by default. If the list is not longer than that number, the button does not appear.
• Alignment — left, center or right alignment of the list.

Footer

Content → Footer holds the call to action:

1. 1

   Button Text: The button label, “Select Plan” by default. Leave it empty for no button.

2. 2

   Easy Digital Download Integration: With the Easy Digital Downloads plugin active, turn this on and pick a product in Easy Digital Download Item (the list shows your 10 newest downloads). The button then becomes that product's purchase button. Without the plugin, the list reads “Not found”.

3. 3

   Link: Where the button goes, # by default. Hidden while the Easy Digital Downloads integration is on. Use the cog icon to open the link in a new tab, add nofollow or add custom attributes.

4. 4

   Add Custom Attributes (Deprecated): An older way to add attributes to the button, one key|value per line. Use the Link field's own Custom Attributes instead.

5. 5

   Button ID: A CSS ID for the button, without the #, for example to track clicks. Use letters, numbers and underscores, and keep it unique on the page.

6. 6

   Additional Info: A short line under the button, “This is footer text” by default. Leave it empty to hide it.

Ribbon

Content → Ribbon adds a label to the corner of the table, to point out a recommended plan:

1. 1

   Show: Turns the ribbon on.

2. 2

   Title: The ribbon text, “Popular” by default.

3. 3

   Align: Left (the default), center, right or justify (full width).

4. 4

   Horizontal Position / Vertical Position: Moves the ribbon from its place, −150px to 150px. Use the device icon to set it per screen size.

5. 5

   Rotate: Turns the ribbon, −180° to 180°. Turn on Overflow Hidden in the Layout section to clip a rotated ribbon at the table's edge.

Style the Price Table

Everything below is on the Style tab. Sections that belong to a part you did not use are hidden.

• Price Table — the card's background, border, radius, padding and shadow.
• Image — the image's size, opacity, border, radius, padding and margin, with hover opacity and a hover animation.
• Header — the header area's background, padding and radius, and the title and subtitle colors and typography, with a Hover state.
• Pricing — alignment, colors and typography of the price; the currency symbol's size, Position (left or right) and vertical position; the fractional part; the original price; and the period, with its Position (below or beside).
• Features — the list's box, text colors, width and spacing, striped rows, dividers between items, and the tooltips' width, colors, arrow and border.
• Features Icon — the icons' color, border, radius, padding, margin and size, with a Hover state.
• Read More Toggle — the show-all button's alignment, colors, radius, padding and margin.
• Footer — the footer area, the Button with its Size and Normal and Hover states, and the Additional Info text.
• Ribbon — the ribbon's text and background colors, border, radius and padding.
• Header & Pricing Wrap — layout Nine only: the background, border, radius, padding and margin of the line that holds the header and the price.