Creating a Dynamic Pricing Table in WordPress Using PHP

A dynamic pricing table can greatly enhance the user experience on your WordPress site, especially for service-based websites or e-commerce platforms. By using PHP and WordPress custom fields or custom post types, you can create a fully responsive and customizable pricing table that automatically updates whenever you make changes in the WordPress admin area.

Why Use Dynamic Pricing Tables?

• Easy Updates: Modify prices directly from the WordPress dashboard without editing code.
• Consistency: Ensure that pricing details remain accurate across multiple pages.
• Scalability: Add or remove pricing tiers without redesigning the entire table.

Step 1: Create a Custom Post Type for Pricing

First, let’s register a custom post type to manage pricing plans.

Add this to your theme’s functions.php file:

function create_pricing_post_type() {
    $labels = array(
        'name' => 'Pricing Plans',
        'singular_name' => 'Pricing Plan',
        'add_new' => 'Add New Plan',
        'add_new_item' => 'Add New Pricing Plan',
        'edit_item' => 'Edit Pricing Plan',
        'new_item' => 'New Pricing Plan',
        'view_item' => 'View Pricing Plan',
        'all_items' => 'All Pricing Plans'
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'supports' => array('title', 'editor', 'custom-fields'),
        'menu_icon' => 'dashicons-money',
        'menu_position' => 5
    );

    register_post_type('pricing_plan', $args);
}
add_action('init', 'create_pricing_post_type');

Explanation:

• This code registers a custom post type called “Pricing Plan,” where you can enter plan details and prices.
• It enables support for titles, content, and custom fields.

Step 2: Add Custom Fields for Pricing Details

You can add custom fields using plugins like Advanced Custom Fields (ACF) or manually by modifying the post editor.

For manual addition, use the following:

function add_pricing_meta_box() {
    add_meta_box(
        'pricing_meta',
        'Plan Details',
        'render_pricing_meta_box',
        'pricing_plan',
        'normal',
        'default'
    );
}

function render_pricing_meta_box($post) {
    $price = get_post_meta($post->ID, 'plan_price', true);
    ?>
    <label for="plan_price">Price ($):</label>
    <input type="text" name="plan_price" value="<?php echo esc_attr($price); ?>" />
    <?php
}

add_action('add_meta_boxes', 'add_pricing_meta_box');

Step 3: Display the Pricing Table on the Frontend

Now that the data is stored, we can fetch and display it dynamically.

Add this to a template or create a shortcode:

function display_pricing_table() {
    $args = array(
        'post_type' => 'pricing_plan',
        'posts_per_page' => -1,
    );

    $pricing_plans = new WP_Query($args);
    $output = '<div class="pricing-table">';

    while ($pricing_plans->have_posts()) {
        $pricing_plans->the_post();
        $price = get_post_meta(get_the_ID(), 'plan_price', true);

        $output .= '<div class="pricing-item">';
        $output .= '<h3>' . get_the_title() . '</h3>';
        $output .= '<p>' . get_the_content() . '</p>';
        $output .= '<strong>Price: $' . esc_html($price) . '</strong>';
        $output .= '</div>';
    }

    $output .= '</div>';
    wp_reset_postdata();
    return $output;
}

add_shortcode('pricing_table', 'display_pricing_table');

How It Works:

• Fetches all pricing plans and displays them in a grid format.
• You can place [pricing_table] shortcode on any page to show the table dynamically.

Step 4: Styling the Pricing Table

Add this CSS to your style.css file for basic styling:

.pricing-table {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.pricing-item {
    border: 1px solid #ddd;
    padding: 20px;
    width: 30%;
    margin: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Conclusion

A dynamic pricing table improves site usability and makes managing prices seamless. By combining PHP, custom post types, and shortcodes, you can build a robust, scalable pricing solution without relying on external plugins.