This guide will teach you how to display your WHMCS product prices inside an Elementor Pricing Table using the WordPress WHMCS Kit (WWK).
Note: Dynamic Tags is a Pro feature in Elementor, so you need Elementor Pro to follow this guide.
Step 1: Add a Pricing Table Widget #
Open the page where you want to display your pricing table in Elementor. Drag and drop the Pricing Table widget onto your page.
You can use the built-in Elementor Pricing Table widget or third-party add-ons like Essential Addons or Premium Addons.
Step 2: Use WWK Dynamic Tags for Pricing #
Click on the Price field inside the Pricing Table widget. Instead of entering a static price, click the Dynamic Tags icon. Scroll down and select WordPress WHMCS Kit from the list. Click the wrench icon next to the specified dynamic tag. WWK provides multiple dynamic tags to display different types of WHMCS pricing. Depending on your use case, you can use Service price, Domain price, and Configurable option price. For example, to show a VPS pricing, choose Service Price and enter the following details:
- Product: Select desired Product.
- Period: Select desired pricing term.
- Currency: Choose the desired currency.
- Disable Price Formatter: Set to false to use the widget formatting function.
Step 3: Customize widget and Save #
Edit the features list inside the Pricing Table to match your Service specifications.
Customize the buttons to link directly to the WHMCS order page.
Finally, click Update to save changes.
Your pricing table is now fully dynamic! Any future price updates in WHMCS will automatically reflect on your WordPress page.