How to Create a WordPress Shortcode To Display a Service Pricing Table in 3 Easy Steps Without Plugins

December 28, 2024

For a local business, it’s beneficial to have detailed information about each service, including pricing, duration, and any special notes. In this example we will use a cleaning business. We’ll create a custom post type for service pricing by adding custom fields that will allow you to provide this information.

For an overall look on how to create a simple Shortcode. Visit this page:

How to Create a Custom Shortcode in WordPress.

Step 1: Create a Custom Post Type for Service Pricing

We start by registering a custom post type for the services. Where we will then be able to add our services as individual posts:

				
					function create_service_pricing_post_type() {
    register_post_type('service_pricing',
        array(
            'labels' => array(
                'name' => __('Service Pricing'),
                'singular_name' => __('Service Price')
            ),
            'public' => true,
            'has_archive' => false,
            'rewrite' => array('slug' => 'pricing'),
            'show_in_rest' => true,
            'supports' => array('title', 'editor'),
        )
    );
}
add_action('init', 'create_service_pricing_post_type');

This code adds a new post type called “Service Pricing” to the WordPress dashboard:

Step 2: Add Custom Fields to the Service Pricing Post Type

To provide additional details for each service, we’ll add custom fields for price, duration, and special notes. These fields will help present a comprehensive service overview to potential clients.

Add Custom Fields via functions.php:

				
					function add_service_pricing_meta_boxes() {
    add_meta_box(
        'service_pricing_meta_box',      // Unique ID
        'Service Details',               // Box title
        'display_service_pricing_meta_box', // Content callback, must be of type callable
        'service_pricing',               // Post type
        'normal',                        // Context
        'high'                           // Priority
    );
}
add_action('add_meta_boxes', 'add_service_pricing_meta_boxes');

function display_service_pricing_meta_box($post) {
    $price = get_post_meta($post->ID, '_service_price', true);
    $duration = get_post_meta($post->ID, '_service_duration', true);
    $notes = get_post_meta($post->ID, '_service_notes', true);


    <p>
        <label for="service_price">Price ($):</label>
        <input type="text" name="service_price" id="service_price" value="<?php echo esc_attr($price); ?>" />
    </p>
    <p>
        <label for="service_duration">Duration (minutes):</label>
        <input type="text" name="service_duration" id="service_duration" value="<?php echo esc_attr($duration); ?>" />
    </p>
    <p>
        <label for="service_notes">Special Notes:</label>
        <textarea name="service_notes" id="service_notes"><?php echo esc_textarea($notes); ?></textarea>
    </p>

}

function save_service_pricing_meta_boxes($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['service_price'])) {
        update_post_meta($post_id, '_service_price', sanitize_text_field($_POST['service_price']));
    }
    if (isset($_POST['service_duration'])) {
        update_post_meta($post_id, '_service_duration', sanitize_text_field($_POST['service_duration']));
    }
    if (isset($_POST['service_notes'])) {
        update_post_meta($post_id, '_service_notes', sanitize_textarea_field($_POST['service_notes']));
    }
}
add_action('save_post', 'save_service_pricing_meta_boxes');

This code adds custom fields for the price, duration, and special notes to each service in the “Service Pricing” post type.

Step 3: Create the Shortcode to Display Custom Fields

Next, we’ll create the shortcode to include these custom fields when displaying the service pricing table.

Create the Shortcode Function in functions.php:

				
					function display_service_pricing_shortcode() {
    $args = array(
        'post_type' => 'service_pricing',
        'posts_per_page' => -1,
        'orderby' => 'title',
        'order' => 'ASC'
    );

    $query = new WP_Query($args);
    $output = '<table class="service-pricing"><tr><th>Service</th><th>Price</th><th>Duration</th><th>Notes</th></tr>';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $price = get_post_meta(get_the_ID(), '_service_price', true);
            $duration = get_post_meta(get_the_ID(), '_service_duration', true);
            $notes = get_post_meta(get_the_ID(), '_service_notes', true);

            $output .= '<tr>';
            $output .= '<td>' . get_the_title() . '</td>';
            $output .= '<td>$' . esc_html($price) . '</td>';
            $output .= '<td>' . esc_html($duration) . ' minutes</td>';
            $output .= '<td>' . esc_html($notes) . '</td>';
            $output .= '</tr>';
        }
        wp_reset_postdata();
    } else {
        $output .= '<tr><td colspan="4">No services available.</td></tr>';
    }

    $output .= '</table>';
    return $output;
}
add_shortcode('service_pricing', 'display_service_pricing_shortcode');

This shortcode will generate a table that includes the service name, price, duration, and any special notes.