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

Posted 2023-05-09

【中文标题】Woocommerce“删除产品”删除 X 并替换为图像

【英文标题】：Woocommerce 'remove product' remove X and replace with an image

【发布时间】：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:

提前致谢！

【参考方案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);