Pricer - Price List and Price Table for Elementor

The Price is flexible and easy to use Elementor widget for creating attractive price-lists and price tables. The clear Pricer widget settings allow you to display the prices of your products or services in any style solution. It will bring you impressive results without any coding knowledge.

The plugin is perfect for creating an outstanding customizable price block, where you can add the necessary fields with information and display it both horizontally and vertically. There are available seven field types with different display styles. Adding the price section is useful for different kinds of sites Corporate Website, eCommerce Project, Creative Agency, Real Estate, a Restaurant, or Retail Company.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

The Pricer widget has very flexible settings. You can change the colors, fonts, background, gradient, paddings, and margins for each element. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

Pricer for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

Features of the Pricer widget for Elementor

• Perfect for Elementor 2.5 and higher
• 5 Pricer templates included
• Customizable fonts, colors, borders, backgrounds, gradient, etc.
• Customizable pricer layout
• Text and background gradient
• Flexible style settings for price elements
• Responsiveness settings
• Works well with all WordPress themes built on Elementor
• Totally Seo Friendly
• Included pot file for quick translation on any language
• Perfect for RTL direction
• Fast and smooth installing
• Tested and compatible up to WordPress 5+
• Lightweight and Fast
• All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
• Easy to use and customize with modern User Interface
• Installation Guide and detailed Users Manual
• Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

STEP 2

Go to Plugins > Add New

STEP 3

Click Upload Plugin Button

STEP 5

Choose archive with Plugin and press Install Now Button

STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Installation the plugin through FTP or build-in File manager

STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

STEP 2

Upload archive with plugin to /wp-content/plugins

STEP 3

On next step Unzip the archive with the plugin

STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

The Pricer is a flexible and easy to use Elementor widget for creating a price list. The clear Pricer widget settings allow you to display the prices of your products or services in any style solution. It will bring you impressive results without any coding knowledge.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks. Read more about using templates.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Pricer widgets. You will find the widget at the end of the general section.

Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

• Content
• Style
• Advanced

Content Tab

You can change the layout list and manage each block field separately on the Content tab.

Layout settings

manage the price list layout by adding/deleting/editing different types of fields. There are available 7 types of fields: Header, Price, Period, Divider, Features, Description, Button.

Header settings

• Title – enter the title text of the header.
• HTML Tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
• Alignment – manage text alignment (left, center, right) for desktop, tablet or mobile.
• Show Subheader- the toggle to enable/disable the display of the subheader text.
• Subheader Position – select Top or Bottom positions to display the subheader. The option available when “Show Subheader” is enabled.
• Subheader – enter the title text of the subheader.

Price settings

• Price – specify the current price for a product or service.
• Decimal Position – choose how to display the coins of the price. The “Default” value displays the price with a separator. The “Top” and “Bottom” values display the coins in the corresponding position relative to the integer.
• Point decimal – specify a decimal price separator.
• Currency Position – specify one of the available currency symbol positions.
• Currency symbol – specify the currency symbol.
• Alignment – manage text alignment (left, center, right) for desktop, tablet or mobile.
• Show tenths – the toggle to enable/disable the display of zeros after the separator.
• Show Previous Price – the toggle to enable/disable the display of the previous price. This may be the price before the sales, discounts, etc.
• Previous Price – specify the previous price for a product or service. The option available when “Show Previous Price” is enabled.
• Previous Price Position – select Left or Right to display the previous price. The option available when “Show Previous Price” is enabled.

Period settings

• Period – specify the validity period of the current price.
• HTML Tag – select one of the available tags from the list for the text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
• Alignment – manage text alignment (left, center, right) for desktop, tablet or mobile.

Features seatings

The section allows you to manage a list of services/products/subscriptions/equipment for the specified price.

• Alignment – manage the plan list alignment (left, center, right) for desktop, tablet or mobile.

PLAN LIST

• Description text – enter text for item description.
• Plan included – the toggle to enable/disable the item in the list of supported services/products for the current price.

Description settings

• Description – text field for an additional description of the product/service or conditions at a specified price.
• HTML Tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
• Alignment – manage text alignment (left, center, right) for desktop, tablet or mobile.

Button settings

• Link text – enter the button text.
• Alignment – manage text alignment (left, center, right) for desktop, tablet or mobile.
• Plan link – add the button link. Leave the field blank to have a button without a link.

Style tab

On the Pricer widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

Header

There are many options in the section to change the style of the header text and background to create your own design.

• Width – specify the block width in different units(px, em, vh) for desktop, tablets or phones.
• Margin – manage the margin of the header text in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the header text in different units(px, em, %) for desktop, tablets or phones.

TEXT STYLE

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

BOX STYLE

• Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.

• Inner Background – the toggle to enable/disable the inner background.

Subheader

There are many options in the section to change the style of the subheader text and background to create your own design.

Padding – manage the padding of the subheader text in different units(px, em, %) for desktop, tablets or phones.

TEXT STYLE

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

BOX STYLE

• Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
• Inner Background – the toggle to enable/disable the inner background.

Price

The section contains flexible price style settings to meet all your needs.

PRICE

• Width – specify the block width in different units(px, em, vh) for desktop, tablets or phones.
• Margin – manage the margin of the price in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the price in different units(px, em, %) for desktop, tablets or phones.
• Background Type – specify the background of the current section. You can choose a color, gradient, or background image.
• Space left – specify the space left of the price using the slider for different devices (desktop, tablets or phones).
• Space right – specify the space right of the price using the slider for different devices (desktop, tablets or phones).
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

PRICE CURRENCY SYMBOL

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

DECIMAL PRICE

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

PREVIOUS PRICE

• Space left – specify the space left of the price using the slider for different devices (desktop, tablets or phones).
• Space right – specify the space right of the price using the slider for different devices (desktop, tablets or phones).
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

PREVIOUS PRICE CURRENCY SYMBOL

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Period

• Width – specify the block width in different units(px, em, vh) for desktop, tablets or phones.
• Margin – manage the margin of the block in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the block in different units(px, em, %) for desktop, tablets or phones.
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
• Background Type – specify the background of the current section. You can choose a color, gradient, or background image.

Divided

• Width – specify the line width of the divider.
• Height – specify the line height of the divider.
• Alignment – manage the line alignment (left, center, right) for desktop, tablet or mobile.
• Margin – manage the margin of the line in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the line in different units(px, em, %) for desktop, tablets or phones.
• Line color – specify the line color and opacity of the divider using the color picker.
• Line type – select the available line type of the divider: Double, Dashed, Dotted, Solid.
• Line radius – specify the line radius of the divider.
• Background Type – specify the background of the current section. You can choose a color, gradient, or background image.

Features

• Width – specify the block width in different units(px, em, vh) for desktop, tablets or phones.
• Margin – manage the margin of the block in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the block in different units(px, em, %) for desktop, tablets or phones.
• Space Between – specify the space between items list using the slider for different devices (desktop, tablets or phones).
• Active – a block with styles for active ( plan included) list items. It allows managing text and icon color, typography, shadow, and select item icon.

• Inactive – a block with styles for inactive ( plan excluded) list items. It allows managing text and icon color, typography, shadow, and select item icon.

Description

• Width – specify the block width in different units(px, em, vh) for desktop, tablets or phones.
• Margin – manage the margin of the block in different units(px, em, %) for desktop, tablets or phones.
• Padding – manage the padding of the block in different units(px, em, %) for desktop, tablets or phones.
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
• Background Type – specify the background of the current section. You can choose a color, gradient, or background image.

Button

• Container Width – specify the width of the block containing a button in different units(px, em, vh) for desktop, tablets or phones.
• Container Margin – manage the margin of the block containing a button in different units(px, em, %) for desktop, tablets or phones.
• Container Padding – manage the padding of the block containing a button in different units(px, em, %) for desktop, tablets or phones.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
• Custom Width – the toggle to enable/disable the custom width of the button
• Button Width – specify the button width in percent or pixels
• Normal tab – a set of style settings for the button in the normal (inactive) state. Specify the button text color, padding, border radius and background type.

• Hover tab – a set of style settings for the hover button. Specify the button text color, padding, border radius, background type and hover animation.

• Border – select one of the available button border styles(Solid, Dotted, Dashed, Hidden, Double, Groove). Select None to disable the border.

Advanced Tab

The settings in the advanced tab Pricer widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.