phphtmlwordpresswoocommerceshipping-method

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.


Solution

  • 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.