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

【问题标题】：Change position of icons added to shipping methods Woocommcerce更改添加到运输方式的图标位置 Woocommerce
【发布时间】：2020-12-07 18:50:13
【问题描述】：

基于this 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; 
}

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

提前致谢。瓦斯科

【问题讨论】：

这些图片大吗？是否有足够的空间让它们与文字排成一行？他们的风格如何？
我将您的代码添加到我的 WooCommerce 商店，它显示在我的运输方式名称旁边的同一行中。这可能是您的特定主题的间距问题，例如上面提到的@IhorVyspiansky。您只需要调整图像大小、更改文本、加宽运输箱等。
提供更多细节以便清楚。作为一个选项，您可能希望将图像垂直居中。这也不应该是一个问题 - codepen.io/vyspiansky/pen/zYqBXYz?editors=1100
抱歉，图片为 24x24 像素。我现在将其更改为 16x16 像素，但仍然是同样的问题。您可以在屏幕截图中看到它现在的样子（下面的图像仍然是 24x24 像素以查看差异）。它如何与 css 一起工作？ - imgur.com/a/Llj4Jpl

标签： php css wordpress woocommerce icons

【解决方案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 文件中。经过测试并且可以工作。

【讨论】：