更改添加到运输方式 Woocommerce 的图标的位置

Question

基于，我在我正在建立的商店的运输方式中添加了一些图标。我使用此代码使用 png 图像：

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; 
}

有一件事我想改变，但我不知道该怎么做。我希望图标显示在送货方式名称旁边。不，在下面。关于如何解决此问题的任何想法？

提前致谢。瓦斯科

Answer 1

您需要为子主题的 style.css 文件中的图标更改 display css 属性：

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

所以您可以在这段代码中测试它，其中样式硬编码在图标上：

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; 
}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

更改添加到运输方式 Woocommerce 的图标的位置

Change position of icons added to shipping methods Woocommcerce

css

php

wordpress

icons

woocommerce