CODEWITHSUNDEEP
phpwordpresswoocommercecarthook-woocommerce
Melissa Banks
Melissa Banks

Reputation: 41

Adding a custom text under the X button that removes items from cart

With Wordpress and WooCommerce, I am trying to add a custom text "delete item" under the "x" in the shopping cart tthat removes items from cart.

I tried to "inspect element" to find where this "x" text icon was located, but I am hitting a brick wall.

Any suggestions on how I can find this, and amend the "x" button to include text underneath?

Thanks.

Upvotes: 2

Views: 4892

Answers (3)

Hady Shaltout
Hady Shaltout

Reputation: 634

Unfortunately This code will remove two data attributes in the output data-product_id and data-product_sku.

You can do it using the action [woocommerce_before_cart_contents] to get the cart list in a global variable once before foreach begins and of course the main filter [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();

-- Update -- Because of there're some differences between remove links in Cart's table and the Mini Cart, You can add the filter inside the action's function to modify the remove link for each.

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 );

}

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 253877

This little cross text icon is located on the WooCommerce templates cart/cart.php and cart/mini-cart.php. But instead overriding this templates, you can use the dedicated woocommerce_cart_item_remove_link filter hook, to achieve what you want to do.

Here is a working tested code that will add 'Delete item' below the red cross cart icon:

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;
};

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

You will may be need to add some CSS styles for the red cross icon using
.woocommerce a.remove CSS selector in the slyle.css file of your active theme.

Upvotes: 1

mujuonly
mujuonly

Reputation: 11861

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);
}

Please try below code snippet in your active theme's functions.php

Upvotes: 1

Related Questions