Woocommerce“删除产品”删除 X 并替换为图像答案

【问题标题】：Woocommerce 'remove product' remove X and replace with an imageWoocommerce“删除产品”删除 X 并替换为图像
【发布时间】：2017-12-31 08:00:09
【问题描述】：

我试图用图像替换十字来删除产品，但我不能让它工作，它说路径无效。

这是 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 php jquery wordpress function

【解决方案1】：

到目前为止，我正在写这篇文章，最简单的方法之一是覆盖 woocommerce/cart/cart.php 主题中的 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>

【讨论】：

【解决方案2】：

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

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

本教程展示了如何使用 font awesome 修改图标，但您可以使用自己的图像来完成（避免仅为该图标加载整个 font-awesome 库）：

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

【讨论】：