In a recent Business Bloomer Club Slack thread, a WooCommerce user sought advice on adding a description text below the “Free Shipping” title on the checkout page.
This customization aims to provide customers with additional details about the shipping method, like delivery time, in a non-bolded, regular text format beneath the bolded title.
Here’s a guide on implementing this feature, including sample code to get you started.
Step-by-Step: Adding a Description to Free Shipping in WooCommerce
Customizing the appearance of the free shipping method description can enhance user experience by clarifying delivery expectations. Here’s how to set it up:
1. Use a Code Snippet to Add a Description
To modify WooCommerce’s default free shipping title and add an extra description, you can add a code snippet to your theme’s functions.php file or via a custom plugin. This snippet will hook into WooCommerce’s free shipping option, appending additional descriptive text below the title.
Sample Code
add_filter( 'woocommerce_cart_shipping_method_full_label', 'custom_free_shipping_label', 10, 2 );
function custom_free_shipping_label( $label, $method ) {
if ( 'free_shipping' === $method->method_id ) {
$label .= '<br><small>Shipping to your home within 3 days</small>';
}
return $label;
}
This code checks if the shipping method is “free_shipping.” If so, it appends descriptive text in a smaller font, such as “Shipping to your home within 3 days,” directly below the “Free Shipping with DHL” title.
2. Customize the Description Text
You can modify the text inside <small>...</small> to suit your needs. This approach is flexible, allowing you to clarify the shipping service, estimated delivery times, or other relevant information.
3. Verify the Display on Checkout
After saving the changes, go to your checkout page to confirm that the description now appears below the free shipping title. If everything is correct, customers will see the extra details when selecting their shipping option, offering a clearer understanding of what to expect.
Alternatives for Additional Shipping Methods
If you’re using plugins like Flexible Shipping, you might need a similar approach for non-standard shipping methods. Many third-party shipping plugins allow for adding descriptions or labels within their settings. Alternatively, you can reach out to plugin support for advice on specific modifications.
Adding descriptions to shipping methods is a subtle but impactful enhancement, helping customers make more informed choices and setting clear expectations for delivery times.
