CODEWITHSUNDEEP
phphtmlwordpresswoocommerceshipping-method
mgatner
mgatner

Reputation: 93

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.

Upvotes: 2

Views: 2137

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254231

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.

Upvotes: 4

Related Questions