Site Overlay

How to add a custom icon to each shipping method in WooCommerce

Shipping methods define how the purchase will be delivered to your customer.

Commonly, the shipping service is taken care of by a company. Some of the shipping companies are larger than others.

You can identify the Shipping Method with a label in the shipping method settings in WooCommerce.

But if you feel the shipping label is not enough, you can add an icon to it.

It can be the company’s logo or any other indication that the user can better familiarize themself with.

WooCommerce provides a filter woocommerce_cart_shipping_method_full_label that allows you to retrieve the label of a specific shipping method, make changes, then return the result you have created.

A basic implementation of the filter would be to detect if the shipping method is ‘Free Shipping’ and add a specific custom icon:

add_filter( 'woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2 ); 

function filter_woocommerce_cart_shipping_method_full_label( $label, $method ) { 
   // Use the condition here with $method to apply the image to a specific method.      
	
	if($method->method_id == 'free_shipping'){
                $label = $label . '<img src='methodIcon.png'/>
        }
	
	
   return $label; 
}

Now, if you want to detect multiple shipping methods, instead of an if conditional, you can use a switch statement, better suited for multiple cases. The function then will return $label as many times as cases are processed from the switch statement.

Leave a Reply

Your email address will not be published. Required fields are marked *