Woocommerce'删除产品'删除X并替换为图像

问题描述：

我试图用图像替换删除产品的交叉，但我无法使它工作，它说路径无效。Woocommerce'删除产品'删除X并替换为图像

这里的JS：

function replaceCross($){ 
// search the Woocommerce object 
var link = $(".woocommerce .product-remove a"); 
var can  = $('<img id="trashcan">'); 
var dir  = "<?php echo get_template_directory_uri(); ?>"; 

can.attr("src", +dir+ "/images/garbage.png"); 
can.appendTo(".woocommerce .product-remove");

}

和HTML：

<tr class="woocommerce-cart-form__cart-item cart_item"> 
    <td class="product-remove"> 
     <a href="#" class="remove" aria-label="Dit artikel verwijderen" data-product_id="627" data-product_sku="MUDD &amp; WATER dr Alice white leaf-XS">×</a> 
     <img id="trashcan" src="NaN/images/garbage.png"> 
    </td> 
</tr>

，我运行一个脚本本地化在functions.php中，如：

function custom_script(){ 
wp_enqueue_script('general-script' ,STYLE_WEB_ROOT . '/js/script.js', array('jquery'), '1.0' , true); 

$script_data = array(
    'image_path' => get_template_directory_uri() . '/images/' 
); 
wp_localize_script(
    'custom_script', 
    'cs_custom', 
    $script_data 
);

}

我仍然是jQuery和PHP的学习者，所以请温柔请c：

在此先感谢！

答

在JavaScript中更改该图标是一个巨大的错误。基本上你会做的是加载旧图标，然后发送脚本到客户端进行更改。

正确的解决方案是用CSS代替它，所以你实际上从头开始发送新的图标风格。您可以通过简单的谷歌搜索找到关于如何更改该图标的综合教程：https://businessbloomer.com/woocommerce-change-remove-item-icon-cart/

本教程演示如何使用字体真棒修改图标，但您可以使用自己的图像进行修改（避免加载整个字体真棒库仅用于该图标）：

.woocommerce a.remove:before{ 
    content: ""; 
    background-image: url(path-to-your-image.png); 
}

Woocommerce'删除产品'删除X并替换为图像

相关推荐