Introduction

Welcome to this tutorial on customizing the Header and Footer Builder in the BookChoix WordPress Theme. BookChoix comes with a powerful Elementor-based Header and Footer Builder that allows you to visually customize every part of your website header and footer without writing any code.

The theme includes three professionally designed header templates and three footer templates that are automatically imported with the demo content. You can easily edit these templates, replace logos, update navigation menus, customize WooCommerce icons, adjust mobile menu styles, and modify top bar content to match your brand.

In this video, we’ll walk through the complete process step-by-step.

single currency setup

The Single Currency option allows you to display the same currency and pricing values to all visitors, regardless of their location.

Steps to Configure Single Currency Pricing

1. Navigate to WordPress Dashboard -> TableX 
2. Open the Currency Display Settings section.
3. Set the Currency Method to Single Currency.
4. Select the currency you want to display across your website.
5. Save the settings.
6. Edit your page with Elementor and open the TableX Pricing widget.
7. Navigate to Content → Pricing Tables.
8. Open any pricing plan item.
9. Enter the pricing values in the available price fields.
10. Update the page to save your changes.

Result:
All visitors will see the same currency and pricing values regardless of their country or location.

How to Display Prices in the Comparison Table

TableX allows you to display pricing information directly within the Comparison Table widget. You can either enter prices manually or automatically pull prices from WooCommerce products.

Enable the Price Section

1. Open the TableX Comparison Table widget in Elementor.
2. Navigate to the Content tab.
3. Open the Feature Columns section.
4. Enable the Show Price option.
5. After enabling it, the price section and related controls will become available.

Configure Plan Prices

1. Open any individual plan from the plans list.
2. Locate the Price Source option.
3. Select one of the following price sources:

Manual Pricing

Choose Manual if you want to enter custom pricing values.

• Enter the Monthly Price.
• Enter the Yearly Price.
• Customize the pricing text as needed.

WooCommerce Product Pricing

Choose WooCommerce Product Price to automatically display prices from WooCommerce products.

1. Select WooCommerce Product Price as the price source.
2. Choose a product for the Monthly Plan.
3. Choose a product for the Yearly Plan.
4. The product prices will automatically be displayed in the comparison table.

Save Changes

1. Review your pricing configuration.
2. Click Update to save the changes.
3. View the page to verify that the pricing information is displayed correctly.

Result

Once configured, the Comparison Table will display pricing information for each plan, allowing visitors to compare both features and pricing from a single table.

How to Translate the TableX Plugin

TableX is fully translation-ready and can be translated into any language using standard WordPress translation tools.

To translate the plugin, you need to create a translation file (.po) from the TableX.pot template file located in the plugin’s languages directory.

Translation File Location

wp-content/plugins/tablex/languages/

Example

If you want to translate TableX into French, create a translation file named:

fr_FR.po

and place it in:

wp-content/plugins/tablex/languages/fr_FR.po

After saving the translation, a corresponding .mo file will be generated automatically.

Recommended Translation Tool

We recommend using Poedit to translate the plugin. Poedit provides a user-friendly interface for translating WordPress plugins and automatically generates the required .po and .mo files.

Steps to Translate the Plugin

1. Install and open Poedit.
2. Click Create New Translation.
3. Open the TableX.pot file from the plugin’s languages folder.
4. Select your target language.
5. Translate the available plugin strings.
6. Save the translation file.
7. Upload the generated .po and .mo files to the plugin’s languages directory.
8. Change your WordPress site language from Settings → General → Site Language.
9. Save the changes.

Language Codes

Translation files must use the correct WordPress language code format.

Examples:

• English (US): en_US.po
• French: fr_FR.po
• German: de_DE.po
• Spanish: es_ES.po
• Italian: it_IT.po

Result

Once the translation files are uploaded and the corresponding site language is selected, TableX will automatically display the translated text throughout the plugin.

How to Use Comparison Tables

TableX provides two flexible ways to display feature comparison tables, allowing you to showcase plan differences and help users make informed purchasing decisions.

Available Comparison Table Options

TableX offers the following methods for displaying comparison tables:

• Comparison Feature inside the Pricing Table widget
• Separate Comparison Table widget

Choose the option that best fits your website layout and pricing strategy.

Using the Comparison Feature in the Pricing Table Widget

The Pricing Table widget includes a built-in comparison table feature that automatically connects with your pricing plans.

Enable the Comparison Table

1. Edit your page with Elementor.
2. Open the TableX Pricing widget.
3. Navigate to the widget settings.
4. Enable the Comparison Table option.
5. Update the page to apply the changes.

Key Features

When the comparison feature is enabled:

• The comparison table is automatically linked to your pricing plans.
• Monthly and yearly pricing links remain synchronized with the corresponding pricing plans.
• Changes made to pricing button links are automatically reflected in both the pricing table and comparison table.
• Plan details and feature comparisons are displayed together in a unified layout.
• Visitors can easily compare plan features before making a purchase decision.

Benefits

Using the built-in comparison table is ideal when you want to:

• Display pricing plans and feature comparisons together.
• Maintain consistent button links across pricing and comparison sections.
• Reduce setup time with automatic synchronization.
• Create a streamlined pricing experience for visitors.

Using the Separate Comparison Table Widget

TableX also includes a dedicated Comparison Table widget for users who prefer to display feature comparisons independently from pricing tables.

When to Use the Separate Widget

The standalone Comparison Table widget is useful when:

• You want to display feature comparisons on a separate section or page.
• You need greater layout flexibility.
• You want to compare products, services, or plans without displaying pricing information.

Separate Comparison Table Setup Guide

1. Drag and drop the TableX Comparison Table widget into the page.
2. Display only comparison features without pricing cards.
3. Set monthly and yearly button links manually.
4. Useful for dedicated feature comparison sections.

Result

Whether you use the built-in comparison feature or the standalone widget, TableX makes it easy to create professional comparison tables that help visitors evaluate features and choose the most suitable plan.

Troubleshooting Common Issues

This guide covers the most common issues users may encounter while using TableX and provides recommended solutions to resolve them.

Pricing Table Is Not Displaying

Possible Causes

• Elementor is not installed or activated.
• The TableX widget has not been added to the page.
• A plugin or theme conflict is preventing the widget from loading.

Solution

1. Ensure Elementor is installed and activated.
2. Verify that the TableX Pricing widget has been added to the page.
3. Clear your website and browser cache.
4. Temporarily deactivate other plugins and switch to a default WordPress theme to identify potential conflicts.
5. Update Elementor, TableX, and WordPress to their latest versions.

WooCommerce Product Price Is Not Displaying

Possible Causes

• No product has been selected.
• The selected product does not have a price configured.

Solution

1. Edit the pricing plan.
2. Verify that Use WooCommerce Product Price is selected as the Price Source.
3. Ensure a WooCommerce product is selected.
4. Confirm that the product contains a valid price.
5. Update the page and check the pricing table again.

Multi-Currency Prices Are Not Showing

Possible Causes

• Currency settings have not been configured.
• Currency-specific prices have not been entered.

Solution

1. Navigate to Settings -> TableX Pricing -> Currency Settings.
2. Enable the required currencies.
3. Edit the pricing plan and enter prices for each enabled currency.
4. Save the settings and update the page.

How to Connect Pricing Tables with WooCommerce Products

TableX integrates seamlessly with WooCommerce, allowing you to display product prices directly in your pricing tables and automatically redirect customers to the WooCommerce checkout page.

Step 1: Create WooCommerce Products

Before connecting your pricing tables, create the WooCommerce products that will be associated with each pricing plan.

1. Navigate to Products → Add New.
2. Create a separate WooCommerce product for each pricing plan.

Example Products

• Starter Plan
• Professional Plan
• Enterprise Plan

3. Configure the product details, including pricing and checkout settings.
4. Publish the products.

Step 2: Display WooCommerce Product Prices

After publishing your products, you can connect them to your pricing tables.

1. Edit your page with Elementor and open the TableX Pricing widget.
2. Navigate to Content → Pricing Table.
3. Open any pricing plan item.
4. Locate the Price Source option.
5. Select Use WooCommerce Product Price as the price source.
6. A Select Product dropdown will appear.
7. Choose your WooCommerce product from the dropdown list.
8. The product price will automatically be displayed in the pricing table.
9. The pricing button URL will also automatically link to the WooCommerce checkout page.
10. Click Update to save your changes.

Result

Once configured, the pricing table will display the selected WooCommerce product price, and users who click the pricing button will be redirected directly to the WooCommerce checkout flow.

Multi-Currency Support

TableX allows you to display pricing in multiple currencies for international customers.

• Improve user experience
• Display localized pricing
• Support global audiences

Use Multiple Currencies in Pricing Tables

TableX allows you to display pricing in multiple currencies, making it easier to serve customers from different regions. Follow the steps below to enable and configure multiple currencies for your pricing tables.

Enable Multiple Currencies

1. After activating the plugin, navigate to WordPress Dashboard ->  TableX.
2. Open the Currency Display Settings section.
3. Select the currencies you want to enable using the available checkboxes.
4. Save the selected currency settings.

Configure Currency Prices

1. Edit your page with Elementor and open the TableX Pricing widget.
2. Navigate to Content → Pricing Tables.
3. Open any pricing plan item to edit its content.
4. After enabling currencies, separate Price Text fields will appear for each selected currency.
5. Enter the pricing values for each currency individually.
6. Update the page to apply the multi-currency pricing changes.

How Currency Detection Works

When a visitor accesses your website, TableX detects their country and displays prices in the corresponding currency based on your configured currency settings.

To improve performance, the detected currency is stored in the visitor’s browser using a cookie. On subsequent visits, TableX uses the saved currency from the cookie instead of performing a new location lookup, resulting in faster page loading and a consistent user experience.

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

Result

Once configured, your pricing tables will support multiple currencies, allowing visitors to view pricing information based on the currencies you have enabled.

Customizing Pricing Table Design

TableX provides extensive styling options to help you create visually appealing pricing tables.

Access Design Settings

1. Open the Style tab in the widget settings.
2. Expand the desired styling section to customize the appearan

Box Styles

Customize the overall pricing table container, including:

1. Navigate to the Box Styles section.
2. Customize the normal pricing plan box styles, including:
   • Background Color
   • Border Width
   • Border Color
   • Border Type
3. The same box styling options are also available in the Featured Table Styles section for featured pricing plans.
4. Use the featured plan styles to create a unique highlighted pricing plan design
5. 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

Text Styles

Control the appearance of text elements:

• Typography
• Font size
• Font weight
• Text color
• Spacing

Button Styles

Customize call-to-action buttons:

• Background color
• Text color
• Border styles
• Border radius
• Hover effects

Featured Table Styles

Highlight a specific pricing plan by customizing:

• Featured badge
• Background appearance
• Border styles
• Visual emphasis settings

Toggle Button Styles

Customize the Monthly/Yearly pricing switch:

• Colors
• Typography
• Background styles
• Active state appearance

Icon Styles

Modify pricing table icons:

• Icon size
• Icon color
• Alignment
• Spacing

Top Icon Styles

Customize the header icons displayed above pricing plans:

• Icon size
• Background color
• Border radius
• Positioning

Mobile Slider Navigation

Optimize pricing tables for mobile devices by customizing:

• Navigation buttons
• Arrow icons
• Button spacing
• Responsive slider appearance

After making your changes, click Update to apply the customized design to your pricing tables.

Editing Pricing Plan Content

After importing a template, you can customize the content of each pricing plan.

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

Each pricing plan includes the following options:

• Plan Title
• Plan Subtitle
• Price
• Price Description
• Feature List
• Button Text
• Button Link
• Featured Badge