Custom Flat Rate Description Text in Woocommerce checkout page

Question

I have two flat rate shipping methods set up within Shipping Zones. At the checkout both of these shipping methods are available.

I'd like to display a text description under each flat rate shipping option. There doesn't seem to be any options to do this in WooCommerce.

I have tried the following code but needless to say it doesn't work:

add_filter( 'woocommerce_page_title', 'woo_shop_page_title');
function wc_get_shipping_zone( $package ) {

    if( $package == 'flat_rate:1') {
    return "<p>Arriving on your chosen date between 9am - 1pm Perfect for business addresses & special occasions</p>";
    }
    if( $package == 'flat_rate:2') {
    return "<p>Arriving on your chosen date between 9am - 7pm Perfect for residential addresses</p>";
    }
}

Could anyone help to make this work?

This is what I would like the description to look like in the checkout:

Canales

Answer 1

The correct hooked function to add additional information to your shipping "flat rate" methods is:

add_action( 'woocommerce_after_shipping_rate', 'action_after_shipping_rate', 20, 2 );
function action_after_shipping_rate ( $method, $index ) {
    // Targeting checkout page only:
    if( is_cart() ) return; // Exit on cart page

    if( 'flat_rate:1' === $method->id ) {
        echo __("<p>Arriving on your chosen date between 9am - 1pm Perfect for business addresses & special occasions</p>");
    }
    if( 'flat_rate:2' === $method->id ) {
        echo __("<p>Arriving on your chosen date between 9am - 7pm Perfect for residential addresses</p>");
    }
}

This code goes on function.php file of your active child theme (or active theme). tested and works.

Ceyx

Would there be an easy way to add a description in the method (from the settings for example) and then just do something like $method->description to show it? – Horning

what would be the syntax of adding two conditions with || I mean, if I want to display the exact custom text for both flat rate 1 and 2 then what would be the syntax, or do I have to add it separately as you did? – About

Answer 2

A more robust solution is to add a new description field in the shipping method form:

/**
 * Add extra form field to all shipping methods available
 */
add_action( 'woocommerce_loaded', 'smdfw_add_filters' );
function smdfw_add_filters() {
    $shipping_methods = WC()->shipping->get_shipping_methods();

    foreach ( $shipping_methods as $id => $shipping_method ) {
        add_filter( "woocommerce_shipping_instance_form_fields_$id", 'smdfw_add_form_fields' );
    }
}

/**
 * Add description field to shipping method form
 */
function smdfw_add_form_fields( $fields ) {
    $fields['description'] = array(
        'title' => __( 'Description', 'smdfw' ),
        'type'  => 'textarea',
    );
    return $fields;
}

And then display it on the frontend:

/**
 * Load description as metadata
 */
add_filter( 'woocommerce_shipping_method_add_rate_args', 'smdfw_add_rate_description_arg', 10, 2 );
function smdfw_add_rate_description_arg( $args, $method ) {
    $args['meta_data']['description'] = $method->get_option( 'description' );
    return $args;
}

/**
 * Display description field after method label
 */
add_action( 'woocommerce_after_shipping_rate', 'smdfw_output_shipping_rate_description', 10 );
function smdfw_output_shipping_rate_description( $method ) {
    $meta_data = $method->get_meta_data();
    if ( array_key_exists( 'description', $meta_data ) ) {
        echo '<div><small class="smdfw">' . esc_html( $meta_data['description'] ) . '</small></div>'
    }
}

I needed to do this on many WooCommmerce projects so i made a free plugin out of it: https://wordpress.org/plugins/wc-shipping-method-description/

Pigeontoed