Question

使用Wordpress和WooCommerce，我正在尝试在购物车中的“x”下添加自定义文本“删除项目”，以便从购物车中删除商品。

我试图“检查元素”以找到这个“x”文本图标所在的位置，但我正在撞墙。

有关如何找到此内容的任何建议，并修改“x”按钮以包含文字？

感谢。

Answer 1

add_filter('woocommerce_cart_item_remove_link', 'remove_icon_and_add_text', 10, 2);

function remove_icon_and_add_text($string, $cart_item_key) {
    $string = str_replace('class="remove"', '', $string);
    return str_replace('&times;', 'Delete Item', $string);
}

请在活动主题的function.php

中尝试以下代码段

Answer 2

此小十字文字图标位于WooCommerce templates cart/cart.php 和 cart/mini-cart.php 上。但是，改为覆盖此模板，您可以使用专用的 woocommerce_cart_item_remove_link 过滤器钩子来实现您想要的目标。

以下是经过测试的代码，可在红色交叉购物车图标下方添加＆＃39;删除项目：

add_filter( 'woocommerce_cart_item_remove_link', 'custom_filter_wc_cart_item_remove_link', 10, 2 );
function custom_filter_wc_cart_item_remove_link( $sprintf, $cart_item_key ) {

    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return $sprintf;

    // HERE Define your additional text
    $add_text = __('Delete item', 'woocommerce');

    // HERE Define the style of the text
    $styles = 'font-size:0.8em; display:block;';

    $sprintf = str_replace('</a>', '</a><span class="remove-text" style="'.$styles.'">'.$add_text.'</span>', $sprintf);

    return $sprintf;
};

代码放在活动子主题（或主题）的function.php文件中，或者放在任何插件文件中。

您可能需要使用 .woocommerce a.remove slyle.css CSS选择器为红叉图标添加一些CSS样式>活动主题的文件。

Answer 3

不幸的是，此代码将删除输出 data-product_id 和 data-product_sku 中的两个数据属性。

您可以使用操作[ woocommerce_before_cart_contents ]来执行此操作，以便在foreach开始之前在全局变量中获取购物车列表一次，当然也可以使用主过滤器[ woocommerce_cart_item_remove_link ]。

class THEME_SLUG_WooCommerce {

    private static $_instance = null;

    /**
     * The Cart items
     * @var array|null
     */
    public $cart_list = null;

    public static function instance() {

        if( is_null( self::$_instance ) ) {

            self::$_instance = new self;

            // Start Page Actions
            self::$_instance->init_actions();

        }

        return self::$_instance;

    }


    public function init_actions() {

        add_action( 'woocommerce_before_cart_contents', array( $this, '__before_cart' ) );
        add_action( 'woocommerce_before_mini_cart_contents', array( $this, '__before_cart' ) );

        add_filter( 'woocommerce_cart_item_remove_link', array( $this, '__table_cart_item_remove_link' ), 10, 2 );

    }


    /**
     * Get cart list in action -- woocommerce_before_cart_contents --
     * to do it once 
     * 
     * @since 1.0.0
     */
    public function __before_cart() {

        self::$_instance->cart_list = WC()->cart->get_cart();

    }


    /**
     * Cart Tables - Remove Link
     * 
     * @since 1.0.0
     */
    public function __table_cart_item_remove_link( $output, $cart_item_key ) {
        
        $cart = self::$_instance->cart_list;
        
        if( ! $cart || empty( $cart ) || ! array_key_exists( $cart_item_key, $cart ) ) {
            return wp_kses_post( $output );
        }
        
        $cart_item = $cart[ $cart_item_key ];

        $_product = $cart_item['data'];
        $product_id = $cart_item['product_id'];
        
        $output = sprintf( '<a href="%s" class="remove remove_from_cart_button" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s"><span class="far fa-trash-alt"></span></a>',
                    esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                    esc_html__( 'Remove this item', 'zbest' ),
                    esc_attr( $product_id ),
                    esc_attr( $cart_item_key ),
                    esc_attr( $_product->get_sku() ) ); 
            
        return wp_kses_post( $output );
        
    }


} // Class End


/* == Fire up == */
if( ! function_exists( '__THEME_SLUG_CLS_WCFunctionsInstance' ) ) {

    function __THEME_SLUG_CLS_WCFunctionsInstance() {

        return THEME_SLUG_WooCommerce::instance();

    }

}

__THEME_SLUG_CLS_WCFunctionsInstance();

-更新- 由于“购物车”表中的“删除”链接与“迷你购物车”之间存在一些差异，因此您可以在操作函数内添加过滤器，以修改每个链接的“删除”链接。

public function __before_cart() {

    self::$_instance->cart_list = WC()->cart->get_cart();

    add_filter( 'woocommerce_cart_item_remove_link', array( $this, '__table_cart_item_remove_link' ), 10, 2 );

}

在X按钮下添加自定义文本，从购物车中删除商品

3 个答案: