The Directorist Pricing Plans extension provides the following shortcode for displaying pricing plans on a WordPress page: [directorist_pricing_plans]
You can use it in the WordPress block editor, Elementor, or any page builder that supports WordPress shortcodes.
Display All Pricing Plans #
Use the shortcode without any attributes to display all available pricing plans for the current directory type: [directorist_pricing_plans]
By default, the plans are displayed in three columns per row.
Available Shortcode Attributes #
The shortcode supports the following attributes:
| Attribute | Default | Description |
| id | Empty | Displays one specific pricing plan. |
| include_plan_ids | Empty | Displays selected pricing plans using a comma-separated list of plan IDs. |
| columns | 3 | Controls how many pricing plans appear in each row. |
Display a Single Pricing Plan #
Use the id attribute to display one specific plan: [directorist_pricing_plans id=”2″]
Replace 2 with the ID of the pricing plan you want to display.
Display a Single Plan at Full Width #
When a single plan is placed inside its own page-builder column or group, use columns=”1″: [directorist_pricing_plans id=”2″ columns=”1″]
This allows the plan card to use the full available width of its container.
Display Selected Pricing Plans #
Use include_plan_ids to display only selected plans: [directorist_pricing_plans include_plan_ids=”2,3″]
You can provide multiple plan IDs separated by commas: [directorist_pricing_plans include_plan_ids=”2,3,7,8″]
The plans are processed in the same order as the provided IDs.
Only plans associated with the current directory type will be displayed. If an ID belongs to a different directory type, it may be excluded from the result.
Control the Number of Columns #
Use the columns attribute to control how many plans appear in each row: [directorist_pricing_plans columns=”2″]
The supported column values are:
| Value | Layout |
| 1 | One plan per row |
| 2 | Two plans per row |
| 3 | Three plans per row |
| 4 | Four plans per row |
| 6 | Six plans per row |
The default value is 3.
Examples #
Display all plans in two columns: [directorist_pricing_plans columns=”2″]
Display selected plans in three columns: [directorist_pricing_plans include_plan_ids=”2,3,7″ columns=”3″]
Display selected plans in four columns: [directorist_pricing_plans include_plan_ids=”2,3,7,8″ columns=”4″]
Display one specific plan at full width: [directorist_pricing_plans id=”2″ columns=”1″]
Attribute Priority #
If both id and include_plan_ids are provided, the id attribute takes priority.
For example: [directorist_pricing_plans id=”2″ include_plan_ids=”3,4″]
This shortcode displays only the plan with ID 2. The include_plan_ids value is ignored.
For clarity, avoid using id and include_plan_ids together.
Finding a Pricing Plan ID #
To find a plan ID:
- Go to Directorist → Pricing Plans in the WordPress dashboard.
- Open the pricing plan you want to display.
- Check the Developer Snippets panel.
- Copy the generated shortcode or note the plan ID.
A single-plan shortcode will look similar to: [directorist_pricing_plans id=”2″]
Using the Shortcode in Gutenberg #
To add pricing plans using the WordPress block editor:
- Edit or create a page.
- Add a Shortcode block.
- Paste the required shortcode.
- Update or publish the page.
Example: [directorist_pricing_plans include_plan_ids=”2,3″ columns=”2″]
When multiple plans should appear together, it is best to use one shortcode containing all the plan IDs. This keeps the plans inside the same pricing-plan row and provides more consistent spacing.
Using the Shortcode in Elementor #
To add pricing plans using Elementor:
- Edit the page with Elementor.
- Add the Shortcode widget.
- Paste the required shortcode.
- Update the page.
Example: [directorist_pricing_plans include_plan_ids=”2,3″ columns=”2″]
When displaying multiple plans side by side, use one shortcode inside a full-width Elementor container whenever possible.
If separate single-plan shortcodes must be placed in separate Elementor columns, use columns=”1″:
[directorist_pricing_plans id=”2″ columns=”1″]
[directorist_pricing_plans id=”3″ columns=”1″]
Without columns=”1″, each shortcode uses the default three-column layout inside its individual Elementor column. This can create excessive empty space between the plan cards.
Responsive Behaviour #
The selected column layout is applied on larger screens. On smaller screens, pricing-plan cards automatically adjust to the available screen width.
No separate mobile shortcode is required.
Pricing Plans in the Add Listing Form #
The Pricing Plans extension also supports controlling the pricing-plan columns displayed during the Add Listing flow.
Use the columns attribute with the Directorist Add Listing shortcode: [directorist_add_listing columns=”2″]
Supported values are: 1, 2, 3, 4, 6
Example: [directorist_add_listing columns=”3″]
This displays up to three pricing plans per row when users are asked to select a plan during listing submission.
This is an integration with the Directorist Add Listing shortcode and is separate from the main [directorist_pricing_plans] shortcode.
Recommended Usage #
To display all plans: [directorist_pricing_plans]
To display one plan: [directorist_pricing_plans id=”2″ columns=”1″]
To display selected plans together: [directorist_pricing_plans include_plan_ids=”2,3″ columns=”2″]
To control plan columns in the Add Listing flow: [directorist_add_listing columns=”2″]
For the most consistent layout, use a single [directorist_pricing_plans] shortcode when multiple plans need to appear together.
