CODEWITHSUNDEEP
phpcsswordpresswoocommerceicons
MediaCreandum
MediaCreandum

Reputation: 123

Change position of icons added to shipping methods Woocommcerce

Based on this question I added some icons to the shipping methods of a store I'm building. I used png images by using this 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 ) { 
// Use the condition here with $method to apply the image to a specific method.      

if( $method->method_id == "flat_rate" ) {
   $label = $label.('<img src="https://www.website-link/wp-content/uploads/2020/08/002-truck.png">');
} else if( $method->method_id == "local_pickup" ) {
   $label = $label.('<img src="https://www.website-link/wp-content/uploads/2020/08/001- discount.png">');       
} 
return $label; 
}

There is one thing I would like to change, and I can't figure out how to do it. I want the icons to show next to the shipping method name. No it's underneath. Any ideas of how to fix this?

Thanks in advance. Vasco

Upvotes: 1

Views: 279

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254231

You need to change display css property for your icons in your child theme's style.css file:

#shipping_method label > img {
    display: inline-block;
}

So you can test it in this code where styles are hard coded on the icons:

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 ) {
    $style = ' style="display:inline-block;"'; // Style applied to the thumbnails
    
    // Use the condition here with $method to apply the image to a specific method.      
    if( $method->method_id == "flat_rate" ) {
       $label = ' <img src="https://www.website-link/wp-content/uploads/2020/08/002-truck.png"'.$style.'> ' . $label;
    } else if( $method->method_id == "local_pickup" ) {
       $label = ' <img src="https://www.website-link/wp-content/uploads/2020/08/001-discount.png"'.$style.'> ' . $label;      
    } 
    return $label; 
}

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

Upvotes: 1

Related Questions