How to Display Shipping Charges on the WooCommerce Product Page: A Step-by-Step Guide

Adding shipping charges to the product page can improve user experience as it gives customers essential information right there when they are about to checkout. In this guide, we will see how to create a WooCommerce shipping rates settings page for you so that it allows configuring and integrating the product prices to display on your website as well.

This guide covers:

• Adding a new settings page in the WooCommerce admin area.
• Configuring the settings for displaying shipping charges.
• Displaying shipping charges on the product page based on these settings.

Add a Child Theme (if not yet added)

• Take a full backup of your website or atleast of functions.php file.
• If you are not comfortable editing functions.php file then install this free plugin and add the snippet by using a single plugin.
• Use a child theme to make customizations. If you have not yet created the child theme then go to this article to create one (without plugin). Or Use this free plugin to create a child theme (you can delete the plugin after creating child theme, but do not delete the parent theme).

Before making any modifications to your theme’s functions.php file, it’s important to create and use a child theme. A child theme ensures that your customizations are preserved even after the parent theme is updated. Without a child theme, you risk losing your changes whenever you update your theme, which can be both time-consuming and frustrating.

Step 1: Access functions.php file

Click on the Appearance > Theme File Edito > Theme Functions (functions.php).

Step 2: Add the Shipping Display Settings Submenu to WooCommerce

We need to create a new settings page in the WooCommerce admin area where you can manage the shipping display options. This is done by hooking into WooCommerce’s admin_menu action to add a submenu page.

Next, we’ll create the HTML form for the settings page where you can configure the display options for shipping charges.

With the settings page complete, the next step is to display the shipping charges on the product page based on the configurations made in the admin panel.

Paste this below code into functions.php file.

// Display Shipping Charges on Product Page
// Add the Shipping Display Settings submenu to WooCommerce
function custom_shipping_settings_page() {
    add_submenu_page(
        'woocommerce', 
        'Custom Shipping Display', 
        'Shipping Display Settings', 
        'manage_options', 
        'shipping-display-settings', 
        'custom_shipping_settings_page_html'
    );

    // Register settings
    $settings = [
        'custom_shipping_text', 'custom_shipping_text_size', 'custom_shipping_text_color', 
        'custom_shipping_italic', 'custom_shipping_position', 
        'custom_shipping_margin_top', 'custom_shipping_margin_bottom', 
        'custom_shipping_margin_left', 'custom_shipping_margin_right'
    ];
    foreach ($settings as $setting) {
        register_setting('custom_shipping_settings_group', sanitize_key($setting));
    }
}
add_action('admin_menu', 'custom_shipping_settings_page');

// The settings page HTML
function custom_shipping_settings_page_html() {
    ?>
    <div class="wrap">
        <h1><?php esc_html_e('Shipping Display Settings (by WPAMIT)', 'woocommerce'); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('custom_shipping_settings_group');
            do_settings_sections('custom_shipping_settings_group');
            ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Shipping Text', 'woocommerce'); ?></th>
                    <td><input type="text" name="custom_shipping_text" value="<?php echo esc_attr(get_option('custom_shipping_text', '🚚 Shipping charges')); ?>" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Text Size (px)', 'woocommerce'); ?></th>
                    <td><input type="number" name="custom_shipping_text_size" value="<?php echo esc_attr(get_option('custom_shipping_text_size', 16)); ?>" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Text Color', 'woocommerce'); ?></th>
                    <td><input type="color" name="custom_shipping_text_color" value="<?php echo esc_attr(get_option('custom_shipping_text_color', '#000000')); ?>" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Italic', 'woocommerce'); ?></th>
                    <td><input type="checkbox" name="custom_shipping_italic" value="1" <?php checked(1, get_option('custom_shipping_italic', 0)); ?> /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Display Position', 'woocommerce'); ?></th>
                    <td>
                        <select name="custom_shipping_position">
                            <option value="before" <?php selected(get_option('custom_shipping_position', 'before'), 'before'); ?>><?php esc_html_e('Before Add to Cart', 'woocommerce'); ?></option>
                            <option value="after" <?php selected(get_option('custom_shipping_position', 'after'), 'after'); ?>><?php esc_html_e('After Add to Cart', 'woocommerce'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php esc_html_e('Margins (px)', 'woocommerce'); ?></th>
                    <td>
                        <div style="display: flex; gap: 10px;">
                            <label><?php esc_html_e('Top:', 'woocommerce'); ?></label>
                            <input type="number" name="custom_shipping_margin_top" value="<?php echo esc_attr(get_option('custom_shipping_margin_top', 10)); ?>" style="width: 60px;" />
                            <label><?php esc_html_e('Bottom:', 'woocommerce'); ?></label>
                            <input type="number" name="custom_shipping_margin_bottom" value="<?php echo esc_attr(get_option('custom_shipping_margin_bottom', 10)); ?>" style="width: 60px;" />
                            <label><?php esc_html_e('Left:', 'woocommerce'); ?></label>
                            <input type="number" name="custom_shipping_margin_left" value="<?php echo esc_attr(get_option('custom_shipping_margin_left', 0)); ?>" style="width: 60px;" />
                            <label><?php esc_html_e('Right:', 'woocommerce'); ?></label>
                            <input type="number" name="custom_shipping_margin_right" value="<?php echo esc_attr(get_option('custom_shipping_margin_right', 0)); ?>" style="width: 60px;" />
                        </div>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
            
            <!-- Support me section with a 20px margin above -->
            <p style="font-size:18px; font-weight:bold; margin-top:20px; margin-bottom:20px;">
                🙏Support me by ☕buy me a coffee <a href="https://buymeacoffee.com/wpamit">here</a>.
            </p>
        </form>
    </div>
    <?php
}

// Display shipping charges on the product page
function display_shipping_charges_above_add_to_cart() {
    global $product;

    $package = [
        'contents' => [
            [
                'product_id' => $product->get_id(),
                'quantity'   => 1,
                'data'       => $product,
            ],
        ],
        'destination' => [
            'country'   => WC()->customer->get_shipping_country() ?: WC()->countries->get_base_country(),
            'state'     => WC()->customer->get_shipping_state(),
            'postcode'  => WC()->customer->get_shipping_postcode(),
            'city'      => WC()->customer->get_shipping_city(),
        ],
    ];

    $shipping_methods = WC()->shipping->calculate_shipping_for_package($package);
    $shipping_cost = !empty($shipping_methods['rates']) ? reset($shipping_methods['rates'])->cost : 0;

    if ($shipping_cost > 0) {
        $settings = [
            'text' => esc_html(get_option('custom_shipping_text', '🚚 Shipping charges')),
            'size' => intval(get_option('custom_shipping_text_size', 16)),
            'color' => esc_attr(get_option('custom_shipping_text_color', '#000000')),
            'italic' => get_option('custom_shipping_italic', 0),
            'margin_top' => intval(get_option('custom_shipping_margin_top', 10)),
            'margin_bottom' => intval(get_option('custom_shipping_margin_bottom', 10)),
            'margin_left' => intval(get_option('custom_shipping_margin_left', 0)),
            'margin_right' => intval(get_option('custom_shipping_margin_right', 0)),
        ];

        $style = sprintf(
            'font-size: %dpx; color: %s; %s margin: %dpx %dpx %dpx %dpx;',
            $settings['size'], $settings['color'],
            $settings['italic'] ? 'font-style: italic;' : '',
            $settings['margin_top'], $settings['margin_right'],
            $settings['margin_bottom'], $settings['margin_left']
        );

        $formatted_amount = '<strong>' . wc_price($shipping_cost) . '</strong>';
        $display_text = $settings['text'] . ': ' . $formatted_amount;

        echo '<div class="shipping-charge" style="' . esc_attr($style) . '">' . $display_text . '</div>';
    }
}

$position = get_option('custom_shipping_position', 'before');
add_action($position === 'before' ? 'woocommerce_before_add_to_cart_button' : 'woocommerce_after_add_to_cart_button', 'display_shipping_charges_above_add_to_cart');

Explanation:

• add_submenu_page(): This function adds a new submenu under WooCommerce. It includes the page title, menu title, capability required to access the page, slug for the menu, and the function that displays the HTML content of the page.
• register_setting(): Registers each setting that will be used on the settings page.

The settings form includes various fields that control how the shipping charges are displayed, including:

• Shipping Text, Text Size, Text Color, Italic, Display Position, and Margins.

Shipping Calculation: The code calculates shipping charges based on the product’s destination, including country, state, postcode, and city.

Custom Style: The shipping charge text is styled according to the settings configured in the WooCommerce admin area.

Positioning: The add_action() hook places the shipping charges either before or after the “Add to Cart” button, depending on the selected position in the settings.

After adding the code, a new setting option will appear under menu WooCommerce in admin panel.

Here, you can tweak various options to match your store’s design.

Options are:-

Shipping Text: This field allows you to enter the text that will be displayed alongside the shipping charges. The default text is “🚚 Shipping charges“.

Text Size (px): Sets the font size of the shipping text. You can specify the size in pixels.

Text Color: Choose the color of the shipping text using a color picker. The default color is black (#000000).

Italic: A checkbox to apply italic styling to the shipping text. If checked, the text will appear in italics.

Display Position: A dropdown to select whether the shipping charges should be displayed before or after the “Add to Cart” button.

Margins (px):

• Top: Sets the top margin (space above the text).
• Bottom: Sets the bottom margin (space below the text).
• Left: Sets the left margin (space to the left of the text).
• Right: Sets the right margin (space to the right of the text).

Step 4: Understand Where Shipping Charges Are Coming From

The shipping charges displayed on the product page are determined by WooCommerce’s shipping settings, including the rates defined for different shipping zones and methods. When a customer views a product, the plugin calculates the shipping cost for that product’s destination using WooCommerce’s built-in functions.

Conclusion

By following this guide, you can provide customers with upfront shipping costs on the product page, improving transparency and helping to reduce cart abandonment. The custom settings allow you to tailor the display to match your store’s branding and layout preferences.

To implement this functionality, simply add the provided code to your theme’s functions.php file or a custom plugin. Enjoy the enhanced shopping experience for your customers!