Display Shipping Charges on Product Page

Introduction

Displaying shipping charges on the product page in WooCommerce can greatly enhance customer experience by providing transparency about additional costs. This tutorial will guide you through the process of displaying shipping charges on the product page using the functions.php file in your theme. Let’s start the tutorial titled “display shipping charges on product page in WooCommerce”.

Importance of Displaying Shipping Charges on Product Page

Transparent shipping costs are crucial for improving customer trust and satisfaction. When customers see the shipping charges upfront, they are less likely to abandon their carts due to unexpected fees at checkout. This transparency can lead to higher conversion rates and a better overall shopping experience.

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 below code at the end of functions.php file.

// Display Shipping Charges on Product Page
// Add a custom submenu under WooCommerce
function custom_shipping_charges_menu() {
    add_submenu_page(
        'woocommerce',
        __( 'Shipping Charges', 'textdomain' ),
        __( 'Shipping Charges', 'textdomain' ),
        'manage_options',
        'category-shipping-charges',
        'custom_shipping_charges_page'
    );
}
add_action( 'admin_menu', 'custom_shipping_charges_menu' );

// Callback function for the custom admin page
function custom_shipping_charges_page() {
    ?>
    <div class="wrap">
        <h1><?php _e( 'Shipping Charges', 'textdomain' ); ?></h1>
        <form method="post" action="options.php">
            <?php 
            settings_fields( 'custom_shipping_charges_options' );
            do_settings_sections( 'custom_shipping_charges' );
            submit_button(); 
            ?>
        </form>
        <div>
			<p style="font-size:18px; font-weight:bold; margin-bottom:20px;">
				🙏Support me by ☕buy a coffee <a href="https://buymeacoffee.com/wpamit">here</a> or by scanning below QR Code.
			</p>
            <a href="https://buymeacoffee.com/wpamit" target="_blank">
                <img src="https://www.wpamit.com/wp-content/uploads/2024/07/wpamit-buymeacoffee-1.png" alt="Buy Me a Coffee" style="max-width: 300px;">
            </a>
			<p style="font-size:16px; font-weight:bold; margin-top:30px;">
				📝Code/Snippet by <a href="https://www.wpamit.com">WPAMIT</a>.
			</p>
        </div>
    </div>
    <?php
}

// Register settings and fields for the custom admin page
function custom_shipping_charges_settings() {
    register_setting( 'custom_shipping_charges_options', 'custom_shipping_charges' );

    add_settings_section(
        'custom_shipping_charges_section',
        __( 'Set Shipping Charges based on Product Categories', 'textdomain' ),
        'custom_shipping_charges_section_callback',
        'custom_shipping_charges'
    );

    $categories = get_terms( array(
        'taxonomy' => 'product_cat',
        'hide_empty' => false,
    ) );

    foreach ( $categories as $category ) {
        add_settings_field(
            'custom_shipping_charges_' . $category->term_id,
            $category->name,
            'custom_shipping_charges_field_callback',
            'custom_shipping_charges',
            'custom_shipping_charges_section',
            array(
                'term_id' => $category->term_id,
                'label_for' => 'custom_shipping_charges_' . $category->term_id
            )
        );
    }
}
add_action( 'admin_init', 'custom_shipping_charges_settings' );

// Section callback function
function custom_shipping_charges_section_callback() {
    echo '<p>' . __( 'Enter the shipping charges for each product category.', 'textdomain' ) . '</p>';
}

// Field callback function for shipping charges
function custom_shipping_charges_field_callback( $args ) {
    $options = get_option( 'custom_shipping_charges' );
    $value = isset( $options[ $args['term_id'] ] ) ? esc_attr( $options[ $args['term_id'] ] ) : '';
    echo '<input type="number" id="' . $args['label_for'] . '" name="custom_shipping_charges[' . $args['term_id'] . ']" value="' . $value . '" step="any" min="0" />';
}

// Display the custom shipping charges on the product live page
function display_custom_category_shipping_charges() {
    global $product;
    $categories = get_the_terms( $product->get_id(), 'product_cat' );
    if ( $categories && ! is_wp_error( $categories ) ) {
        $options = get_option( 'custom_shipping_charges' );
        foreach ( $categories as $category ) {
            if ( isset( $options[ $category->term_id ] ) && ! empty( $options[ $category->term_id ] ) ) {
                $currency_symbol = get_woocommerce_currency_symbol();
                echo '<p class="custom-shipping-charges">' . __( '🚚 ' ) . '<strong>' . $currency_symbol . esc_html( $options[ $category->term_id ] ) . '</strong>' . __( ' shipping charge' ) . '</p>';
                break; // Display shipping charge for the first category found
            }
        }
    }
}

// Hook the display function to always show above the Add to Cart button
add_action( 'woocommerce_before_add_to_cart_button', 'display_custom_category_shipping_charges' );

Edit in the code: You can change the text ‘Shipping Charge‘ as per your requirement in the line 95.

Settings Options in the Admin Panel

With the code added above, a new settings page will be available under the WooCommerce tab in your WordPress admin panel. This settings page, labeled “Shipping Charges,” allows you to set custom shipping charges for each product category. You can enter the specific shipping charges for each category in the provided fields. This feature enables you to manage and update shipping costs conveniently, ensuring that each product category has the appropriate shipping charges displayed on the product page.

Conclusion

By following these steps, you can successfully display shipping charges on the product page in WooCommerce based on product categories. This customization not only enhances the user experience by providing transparency but also helps in building customer trust. Remember to always use a child theme to ensure that your customizations are safe from theme updates. This straightforward approach ensures that your customers are well-informed about shipping costs, potentially leading to increased satisfaction and reduced cart abandonment.