TableX Pricing Table Plugin Documentation

Introduction

Welcome to TableX, the modern and flexible Pricing Table WordPress Plugin designed to help you create professional pricing sections without writing code.

TableX allows you to build beautiful pricing tables using both Elementor and WPBakery page builders. Whether you are creating pricing plans for SaaS products, memberships, hosting packages, subscriptions, or service plans, TableX provides everything you need to create conversion-focused pricing layouts.

Core Features:

Multi-currency pricing support
Horizontal & vertical pricing layouts
WooCommerce integration
Featured pricing plans
Responsive mobile-friendly design
Elementor & WPBakery support
Pre-built pricing templates

Installation Guide

Step 1 — Download Plugin Package

Download the tablex.zip plugin package from your purchase/download area.

Step 2 — Upload the Plugin

Go to:

WordPress Dashboard → Plugins → Add New → Upload Plugin

Then:

Click Choose File
Select the tablex.zip file
Click Install Now

Step 3 — Activate Plugin

After installation, click Activate Plugin.

TableX is now successfully installed.

Choosing the Right Page Builder

Using Elementor Builder

Elementor is recommended for users who prefer drag-and-drop live editing and faster visual customization.

Easy live editing experience
Instant template import
Responsive design controls
Beginner-friendly interface

Using WPBakery Builder

WPBakery is ideal for users already familiar with classic WordPress page builder workflows.

Backend editing support
Compatible with existing WPBakery websites
Shortcode-based flexibility

Importing Pre-Built Pricing Templates

TableX includes professionally designed pricing table templates for faster setup.

Importing Elementor Templates

Create or edit a page using Elementor.
Click the Tablex Icon inside the Elementor editor.
Go to the Import Template section.
Choose and import your template.
Click import to import the pricing table template.

You can now customize:

Pricing plans
Features
Buttons
Colors
Currency settings
Layout styles

Edit plan content

Open the Content tab in the widget panel
Navigate to Pricing Tables section.
Click the Add Item button to create a new pricing plan
Expand the added item to edit the plan details.
Enter the plan title, price, features, button text, and other content.
Repeat the same steps to add multiple pricing plans.
Update the changes to display the pricing tables on your page.

Open each plan item to edit its content like title, pricing, features, and button settings.

Plan title
plan sub title
price
price description
Features list
Button text

Edit Pricing Table Design

Open the Style tab in the widget settings.
Expand the Box Styles section to customize the pricing table container design.
Open Text Styles to edit typography, colors, and text spacing.
Use the Button Style section to customize button colors, borders, and hover effects..
Expand Featured Table Styles to highlight a specific pricing plan.
Customize the Toggle Button Styles for monthly and yearly pricing switches..
Open Icon Styles and Top Icon Styles to modify icon appearance..
Adjust the Mobile Slider Button settings for responsive mobile navigation

Customize Plan Box Styles

Open the Style tab in the widget settings.
Navigate to the Box Styles section.
Customize the normal pricing plan box styles, including:

Background Color
Border Width
Border Color
Border Type

The same box styling options are also available in the Featured Table Styles section for featured pricing plans.
Use the featured plan styles to create a unique highlighted pricing plan design
You can also customize the featured plan separately from normal pricing plans.

Additional Options for Normal Pricing Plans

Box Shadow
Content Alignment
Box Padding
Enable Feature List Outline Border

Importing WPBakery Templates

Go to WordPress Dashboard → Tools → Import.
Install the WordPress Importer plugin if required.
Run the WordPress Importer.
Upload the provided XML demo file.
Complete the import process.
Edit the imported page using WPBakery.

Creating Pricing Tables in Elementor

Edit a page using Elementor.
Search for TableX Pricing Table in the widgets panel.
Drag and drop the widget into the page.
Customize pricing plans, buttons, layouts, colors, and currencies.

Creating Pricing Tables in WPBakery

Edit a page using WPBakery.
Click Add Element.
Search for TableX Pricing Table.
Add the pricing table element to your page.
Customize pricing plans and settings.

WooCommerce Integration

TableX integrates with WooCommerce for handling checkout and payment functionality.

Step 1 - Create WooCommerce Products

Go to:

Products -> Add New

Create separate WooCommerce products for each pricing plan.

Example:

Starter Plan
Professional Plan
Enterprise Plan

Step 2 - Display WooCommerce Product Prices

After publishing the product:

Edit your page with Elementor and open the TableX Pricing widget
Navigate to Content -> Pricing Table
Open any pricing plan item
Find the Price Source option.
Select Use WooCommerce Product Price as the price source.
A Select Product dropdown will appear.
Choose your WooCommerce product from the dropdown list.
The product price will automatically appear in the pricing table.
The pricing button URL will also automatically link to the product checkout page
Update the page to apply the changes.

Now users clicking the pricing button will be redirected to the WooCommerce checkout flow.

Layout Options

Vertical Layout

Display pricing plans in classic vertical card style layouts.

Horizontal Layout

Create modern comparison-style pricing tables for better feature comparison.

Currency Support

TableX supports two currency display modes: Single Currency and Multi Currency.

Single Currency

When the Single Currency option is selected, all visitors will see the same currency and pricing values regardless of their location. This mode is ideal when you want to display a fixed currency to all users worldwide

Multi Currency

When the Multi Currency option is selected, TableX automatically detects the visitor's country and displays prices in the most appropriate currency based on the configured currency mapping.

To use Multi Currency, first enable the currencies you want to support in the Currency Settings section. Once enabled, separate price fields will be available for each selected currency within the pricing plans.

Improve user experience
Display localized pricing
Support global audiences

Use Multiple Currencies in Pricing Tables

After activating the plugin, navigate to WordPress Dashboard -> TableX
Open the Currency Display Settings section.
Select the currencies you want to enable using the available checkboxes.
Save the selected currency settings.
Edit your page with Elementor and open the TableX Pricing widget.
Navigate to Content -> Pricing Tables.
Open any pricing plan item to edit its content.
After enabling currencies, separate Price Text fields will appear for each selected currency.
Enter the pricing values for each currency individually.
Update the page to apply the multi-currency pricing changes.

Currency Detection and Caching

To improve performance and reduce repeated location lookups, TableX stores the detected visitor currency in a browser cookie after the first visit.

On subsequent page loads, the saved currency is retrieved from the cookie instead of performing a new country detection request. This helps improve page loading speed and provides a consistent pricing experience for returning visitors.

Note:If a visitor changes their location, uses a VPN, or the currency mapping is updated, the previously stored cookie may continue to be used until it expires or is cleared from the browser.

Note:currency support works only when the Price Source is set to Manual. If you use the WooCommerce Product Price source, the WooCommerce plugin will automatically handle the product pricing currency. See also: WooCommerce Product Integration

Enable Tenure Toggle

Open the Content tab in the widget settings.
Navigate to the Toggle Options section.
Enable the Tenure Toggle option.
After enabling it, the pricing toggle button will appear in the pricing table.
The Toggle Button Styles tab will also become available in the Style settings.
Customize the toggle button design from the style controls.

Customize Button Styles

Open the Style tab in the widget settings.
Navigate to the Button Style section.
Choose the Button Position as Top or Bottom.
Select the Button Type for your pricing buttons.
Customize the Button Typography, including font size, font weight, and text styling.
Use the slider controls to adjust the Button Width and Button Height.
Customize the Button Background Color and Text Color for both:

Normal state
Hover state

If you select the Outline Button type, additional controls will appear automatically

Gradient Start Color
Gradient End Color
Gradient Angle

Featured Pricing Plans

Highlight important plans using the Featured Plan option.

Add featured badges
Change plan colors
Highlight recommended plans
Increase conversion visibility

Highlight a Pricing Plan

Open the Content -> Pricing Tables section.
Open any individual pricing plan item.
Enable the Highlight Plan toggle option below the Title description field.
The enabled pricing plan will be highlighted in the pricing table.

Customize Featured Plan Styles

Navigate to the Style -> Featured Table Styles section.
Customize the featured plan design, including:
- Title styles
- Price styles
- Button styles
- Feature list styles
- Icon colors
- Box background and border colors
Create a unique design to make the featured plan stand out from other pricing plans.

Enable Featured Plan Badge

Open the Style tab in the widget settings.
Navigate to Featured Table Styles.
Find the switch option labeled Enable Badge.
Enable the badge option to display a badge on the featured pricing plan
After enabling it, additional badge settings will appear.
Enter your custom text in the Badge text field.
Adjust the Horizontal Position and Vertical Position of the badge.
Customize the Badge Background Color and Badge Text Color.
Enable the Enable Full Width Badge option if you want the badge to stretch across the entire width of the featured plan.
Update the page to apply the badge styles.

Customize Plan Border Styles

Open the Style tab in the widget settings.
Navigate to Featured Table Styles
Adjust the Border Width to control the border thickness.

Note: If the Border Width value is set to 0, the border will not be visible.

Find the Border Color Type option.
Select Classic to use a single border color.
Select Gradient to apply gradient border colors.
Adjust the Gradient Angle to control the gradient direction.
Customize the border styles to create a unique pricing table design.

These border settings also available for normal pricing plans.

Comparison Table

TableX provides two ways to display comparison tables:

Comparison Feature inside the Pricing Table widget
Separate Comparison Table widget

Comparison Feature in Pricing Table Widget

When you enable the comparison feature inside the Pricing Table widget, the comparison table will automatically connect with your pricing plans.

Features

Enable the Comparison Table option inside the Pricing Table widget.
Monthly and yearly pricing links are automatically synced with the pricing plans.
Any button link changes will reflect in both the pricing table and comparison table.
Perfect for showing pricing plans and feature comparisons together.

Add Button Links for Comparison Table

Open the Content tab in the widget settings.
Navigate to the Pricing Tables section.
Open any individual pricing plan item
Scroll below the Button Text field.
You will find separate Monthly Plan URL and Yearly Plan URL fields.
Enter your monthly and yearly signup links.
The added links will automatically apply to both the Pricing Table and Comparison Table..

Add Comparison Feature Labels

Enable the Comparison Features option in the widget settings
After enabling it, the Feature Labels textarea will appear
Enter the comparison feature labels inside the textarea.

Add Comparison Feature values

Open the Content tab in the widget settings.
Navigate to the Pricing Tables section.
Open any individual pricing plan item
Scroll below the Button URL field.
You will find a select box labeled value type.
Select the Value Type option for comparison values.
Choose Icon Shortcode to display icons in the comparison table.
Available icon shortcodes will appear below the select box.
Type the required icon shortcode into the textarea field.
The selected icon will appear in the comparison table.
Choose Text if you want to display custom text values instead of icons.
A textarea field will appear to enter your custom text content.

Separate Comparison Table Widget

You can also use the standalone Comparison Table widget separately.