Extra HTML for shipping (label) methods in WooCommerce cart and checkout

user_7531251 0
Viewed 636

I am trying to tack on estimated arrival times to the labels of my shipping methods. However, I'd like the arrival times to have some bonus HTML within the label. (Make them smaller and different font-weight).

Here is a simple example:

function add_estimated_arrival_times($rates, $package){
    
    $groundStuff = $timeReturnedFromAPI; //collect a bunch of cart information, post to the UPS API, return estimated arrival time to $timeReturnedFromAPI
    $ground_rate_id = 'ups:6:09'; //UPS ground rate ID
    
    // Loop through available shipping rates, add arrival time if rate is UPS ground
    foreach ( $rates as $rate_key => $rate ) {
        if( $ground_rate_id === $rate_key ) {
            $rates[$rate_key]->label .= ' <span style="font-size: 12px; font-weight: normal;">(' . $groundStuff . ')</span>'; //<---- problem: HTML is not added
            break;
        }
    }

    return $rates;
}
add_filter( 'woocommerce_package_rates','add_estimated_arrival_times', 50, 2 );

The code above successfully adds the plain text to the shipping method label, but the HTML disappears.

What would be a good workaround for this?

checkout cart woocommerce wordpress php
1 Answers

The hook you are using only allows you to edit the text of the label:

function filter_woocommerce_package_rates( $rates, $package ){    
    // Loop through available shipping rates
    foreach ( $rates as $rate_key => $rate ) {
        $rates[$rate_key]->label = __( 'My label', 'woocommerce' );
    }

    return $rates;
}
add_filter( 'woocommerce_package_rates','filter_woocommerce_package_rates', 10, 2 );

Which is also adjustable via the woocommerce_cart_shipping_method_full_label hook:

function filter_woocommerce_cart_shipping_method_full_label( $label, $method ) {
    // Target a specific method ID
    if ( $method->id == 'local_pickup:1' ) {
        // Overwrite
        $label = __( 'My new label', 'woocommerce' );
    } elseif ( $method->id == 'free_shipping:2' ) {
        // Append
        $label .= __( ' - Extra text label', 'woocommerce' );
    }

    return $label; 
}
add_filter( 'woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2 );

But your question was to add something after the label and this can be done via the woocommerce_after_shipping_rate hook:

function action_woocommerce_after_shipping_rate( $method, $index ) {
    // Target a specific method ID
    if ( $method->id == 'local_pickup:1' ) {
        echo '<p>test</p>';
    } else {
        $groundStuff = 'some value';
        
        echo '<span style="font-size: 12px; font-weight: normal;">(' . $groundStuff . ')</span>';
    }
}
add_action( 'woocommerce_after_shipping_rate', 'action_woocommerce_after_shipping_rate', 10, 2 );

OR

By overwriting /cart/cart-shipping.php at line 40 @version 3.6.0 - This template can be overridden by copying it to yourtheme/woocommerce/cart/cart-shipping.php

user_119875380
Related