help center

Platinum Support

NEW!

Search
Close this search box.
Help / Elementor Editor / Creating an online store / Additional online store widgets / Price Table widget

Creating an online store

On this page

Price Table widget

Last Update: March 24, 2024

Add the widget

Price Table widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Price Table widget?

The Price Table widget helps you create neat and stylish pricing tables to display various pricing plans or packages. Within these tables, you can detail different features, pricing options, and descriptions, making it easy for visitors to compare and choose the option that best suits their needs.

Further, this widget offers various customization options, allowing you to adjust the layout, colors, fonts, and other design elements to match your website’s style and branding.

Common use case

Kiara is building a website for an art and craft studio that offers various workshops. To help potential customers understand the different workshop options and their associated costs, Kiara decided to showcase a price table. 

They created a dedicated pricing page on the website titled Workshop Pricing. On the page, they first created a 3-container layout and added the Price Table widget in each container. 

In the Price Table, Kiara listed the names of each workshop and its features and benefits. Next, they included the prices for each workshop. To make it easy for visitors to take action, Kiara also added a Book Now button below each pricing option. This button links directly to the studio’s booking page, where customers can sign up for their preferred workshop.

Price Table widget 19 Price Table widget 2

Additional use cases

  • Display subscription plans for a software service.
  • List different levels of membership for a gym or fitness center.
  • Showcase pricing options for a photography package.
  • Present pricing tiers for a web hosting service.
  • Highlight pricing options for online courses or educational programs.

Add a Price Table widget: Step-by-step

  1. Add the Price Table widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, you’ll find five sections: Header, Pricing, Features, Footer, and Ribbon, each with its own set of customization settings.
    Price Table widget 2
  3. Under the Header section:
    1. In the Title field, add the main title of your pricing plan, such as basic, standard, or premium.
    2. In the Description field, add additional information or a brief description of the pricing plan.
    3. In the Title HTML Tag, choose the HTML tag for the title from H2 – H6.
      Price Table widget 14
  4. Under the Pricing section:
    1. In the Currency Symbol, select the currency symbol you want to use (e.g., $, €, £), or set a custom symbol if needed.
    2. In the Price field, enter the exact pricing for the pricing plan, including any decimal points.
    3. In the Currency Format field, choose the format for displaying large numbers, such as adding commas for thousands.
    4. Slide the Sale button Yes to display the original price with a strikethrough and the discounted sale price.
    5. In the Period field, specify the period of time for each payment (e.g., per month, per year).
      Price Table widget 4
  5. Under the Features section, you’ll find a predefined list of features:
    1. Drag and drop them to change their order.
    2. Click on the Add Item button to add another item to the list.
    3. To duplicate or delete items, click on the item’s Duplicate or Delete Price Table widget 11 icon.
    4. Click on each item to customize their content and settings.
    5. In the Text field, describe the feature (e.g., 24/7 customer support).
    6. In the Icon field, select an icon to represent the feature. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.
    7. In the Icon Color field, choose the color of the icon.
      Price Table widget 1
  6. Under the Footer section:
    1. In the Button Text field, specify the text to display on the button, such as Buy Now.
    2. In the Link field, enter the URL the button should link to, generally a signup page or a checkout page. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
    3. In the Additional Info field, include any extra information or disclaimers below the button.
      Price Table widget 17
  7. Under the Ribbon section:
    1. Slide the Show button Yes to display or hide a ribbon element on the pricing table.
    2. In the Title field, input the text to be displayed on the ribbon.
    3. In the Position field, choose the position of the ribbon: top left or top right corner of the pricing table.
      Price Table widget 16

Settings for the Price Table Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Price Table widget 15

Enter the title of the price plan.

Add a brief description of the pricing plan.

Set the Header’s Title tag, choosing from H2 – H6.

Price Table widget 12 Price Table widget 12

Select the currency symbol or set a custom symbol if needed.

Set the exact pricing of your product or service, including cents.

Choose the thousands separator format.

Display the original price with a strikethrough and the new sale price.

Enter the period of time for each payment.

Price Table widget 18

A list of all the features you are offering.

  • Drag and drop them to change their order. 
  • Click on the Add Item button to add another item to the list.
  • To duplicate or delete items, click on the item’s Duplicate or Delete Price Table widget 11 icon.
  • Click on each item to customize their content and settings.

Enter the description of the feature.

Select an icon to represent the feature.

Choose a color for the icon.

Price Table widget 8 Price Table widget 16

Specify the text to display on the button.

Enter the URL the button should link to. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.

Include a line of additional info below the button.

Price Table widget 3

Show or hide a corner ribbon.

Enter the text to be displayed on the ribbon.

Choose the position of the ribbon: top left or top right.

Style tab

Price Table widget 5

Select the background color for the header area.

Adjust the padding of the header area.

  • Color: Set the color of the main title text.
  • Typography: Define the typography options for the main title, including font style, size, weight, and more. Learn more about Typography.
  • Color: Set the color of the subtitle text.
  • Typography: Define the typography options for the subtitle, such as font style, size, weight, and more. Learn more about Typography.
Price Table widget 10 Price Table widget 20

Choose a background color for the pricing area.

Adjust the padding of the pricing area.

Customize the color of the price text.

Set the typography options for the price text, including font style, size, weight, and more. Learn more about Typography.

  • Size: Change the size of the currency symbol.
  • Position: Determine whether the currency symbol appears to the left or right of the price.
  • Vertical Position: Specify the vertical alignment of the currency symbol.
  • Size: Adjust the size of the fractional part.
  • Vertical Position: Determine the vertical alignment of the fractional part.
  • Color: Set the color of the original price text.
  • Typography: Define the typography options for the original price text. Learn more about Typography.
  • Vertical Position: Specify the vertical alignment of the original price.
  • Color: Set the color of the period text.
  • Typography: Define the typography options for the period text. Learn more about Typography.
  • Position: Specify whether the period text appears below or beside the price.
Price Table widget 13

Select the background color for the features list.

Adjust the padding of the features list.

Customize the color of the text within the features list.

Set the typography options for the text within the features list, including font style, size, weight, and more. Learn more about Typography.

Align the text within the features list to the right, left, or center.

Adjust the width of the features list.

  • Style: Choose from various styles for the divider line, such as solid, dotted, double, or dashed.
  • Color: Set the color of the divider.
  • Weight: Adjust the thickness or weight of the divider.
  • Width: Specify the width of the divider.
  • Gap: Set the distance between the divider line and the features list content.
Price Table widget 7

Choose a background color for the footer area of the pricing table.

Adjust the padding of the footer area to control the space between the content and the edges of the footer.

This section provides options for customizing the appearance of the button within the footer.

Choose from button sizes, from extra small to extra large.

  • Text Color: Set the color of the button text.
  • Typography: Set the font style, size, and other typography options for the button text. Learn more about Typography.
  • Background Type: Choose the background type for the button.
  • Color: Choose button color.
  • Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
  • Border Radius: Set the border radius of the button to control corner roundness.
  • Text Padding: Set the distance between the button text and the border.
  • Text Color: Set the color of the button text when hovered over by the mouse cursor.
  • Background Type: Choose the background type for the button on hover.
  • Color: Set the background color of the button on hover.
  • Border Color: Specify the color of the button border on hover.
  • Animation: Add animation effects to the button when hovered over.
  • Color: Choose the color of the additional info text.
  • Typography: Set the font style, size, and other typography options for the additional info. Learn more about Typography.
  • Margin: Adjust the space around the additional info text.
Price Table widget 6

Choose the background color for the ribbon.

Use a slider to control the distance between the ribbon and the corner of the pricing table.

Set the color of the text displayed on the ribbon.

Customize the font style, size, and other typography options for the text displayed on the ribbon. Learn more about Typography.

Add a box shadow effect to the ribbon.

Advanced tab

The Advanced tab provides options to control price table position, adjust spacing, add custom code, and more.

Price Table widget 9 Price Table widget 25

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Contact Support
Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Related Content

WooCommerce Single: Product Content

eCommerce widgets

Stripe Button widget

Paypal Button widget

Call to Action widget
Platinum popup banner