猿问

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

基于这个问题,我在我正在建立的商店的运输方式中添加了一些图标。我通过使用以下代码使用了 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; 

}

我想改变一件事,但我不知道如何去做。我希望图标显示在送货方式名称旁边。不,它在下面。关于如何解决这个问题有什么想法吗?


心有法竹
浏览 93回答 1
1回答

qq_遁去的一_1

您需要更改display子主题style.css文件中图标的 css 属性:#shipping_method label > img {&nbsp; &nbsp; display: inline-block;}因此,您可以在以下代码中对其进行测试,其中样式在图标上进行了硬编码:add_filter( 'woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2 );&nbsp;function filter_woocommerce_cart_shipping_method_full_label( $label, $method ) {&nbsp; &nbsp; $style = ' style="display:inline-block;"'; // Style applied to the thumbnails&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Use the condition here with $method to apply the image to a specific method.&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if( $method->method_id == "flat_rate" ) {&nbsp; &nbsp; &nbsp; &nbsp;$label = ' <img src="https://www.website-link/wp-content/uploads/2020/08/002-truck.png"'.$style.'> ' . $label;&nbsp; &nbsp; } else if( $method->method_id == "local_pickup" ) {&nbsp; &nbsp; &nbsp; &nbsp;$label = ' <img src="https://www.website-link/wp-content/uploads/2020/08/001-discount.png"'.$style.'> ' . $label;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; return $label;&nbsp;}代码位于活动子主题(或活动主题)的functions.php 文件中。经过测试并有效。
随时随地看视频慕课网APP
我要回答