Skip to content
Advertisement

Add individual icon to each shipping method in WooCommerce

I am trying to add a custom icon to every shipping option, to no avail.

I tried this answer: Adding custom icons to the shipping options in Woocommerce Cart and Checkout.

And my code looks like this so far:

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 == "shipping_method_0_flat_rate2" ) {
       $label = $label."https://example.com/wp-content/uploads/2020/05/icon.png";

   }
   return $label; 
}

But it just doesn’t work. I guess there is either issue in how I provide the path to the file or ID of the method.

Any help appreciated.

Advertisement

Answer

You are very near… You need to use $method->id === "flat_rate:2" instead of $method->method_id == "shipping_method_0_flat_rate2" in the IF statement.

Also you need, for the icon, to include the complete <img> html tag with the source link…

So in your code:

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 ) {      
   // Targeting shipping method "Flat rate instance Id 2"
   if( $method->id === "flat_rate:2" ) {
       $label .= '<img src="https://example.com/wp-content/uploads/2020/05/icon.png" />';

   }

   return $label; 
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement