Question

我试图用图像替换十字架以删除产品，但我无法使其工作，它说路径无效。

这是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中运行了一个localize脚本，如：

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：

提前感谢！

Answer 1

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

正确的解决方案是使用CSS在WordPress中替换它，因此您实际上从头开始发送新的图标样式。您可以通过简单的Google搜索找到有关如何更改该图标的综合教程：https://businessbloomer.com/woocommerce-change-remove-item-icon-cart/

本教程展示了如何使用font awesome修改图标，但您可以使用自己的图像（避免为该图标加载整个字体 - 真棒库）来执行此操作：

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

Answer 2

从今天开始，我正在写这篇文章，最简单的方法之一就是覆盖cart.php主题中的woocommerce/cart/cart.php文件。将woocommerce插件文件夹中的template/cart/cart.php的内容复制到woocommerce/cart/cart.php上的主题中。

通过将&times删除为您想要的任何内容来对以下部分进行更改。

<td class="product-remove">
    <?php
        echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
            'woocommerce_cart_item_remove_link',
            sprintf(
                '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s"><i class="fa fa-trash-alt"></i></a>',
                esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                esc_html__( 'Remove this item', 'woocommerce' ),
                esc_attr( $product_id ),
                esc_attr( $_product->get_sku() )
            ),
            $cart_item_key
        );
    ?>
</td>

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

2 个答案: