Woocommerce, How to edit the “added to cart” messa

Question

When click on add to cart button, the Woocommerce shows the message, view cart, I want to edit this message, actually edit all the span, put some icon etc...

Answer 1

2017 - 2019 - For Woocommerce 3+ (handling multiple products added to cart)

Replaced by wc_add_to_cart_message_html filter hook, the 2nd function argument has changed to $products (instead of $product_id)…

You can make changes on the code inside this hooked function, like in this thread:

add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message_html', 10, 2 );
function custom_add_to_cart_message_html( $message, $products ) {
    $titles = array();
    $count  = 0;

    foreach ( $products as $product_id => $qty ) {
        $titles[] = ( $qty > 1 ? absint( $qty ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
        $count += $qty;
    }

    $titles     = array_filter( $titles );
    $added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', $count, 'woocommerce' ), wc_format_list_of_items( $titles ) );

    // The custom message is just below
    $added_text = sprintf( _n("%s item has %s", "%s items have %s", $count, "woocommerce" ),
        $count, __("been added to your basket.", "woocommerce") );

    // Output success messages
    if ( 'yes' === get_option( 'woocommerce_cart_redirect_after_add' ) ) {
        $return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) );
        $message   = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( $return_to ), esc_html__( 'Continue shopping', 'woocommerce' ), esc_html( $added_text ) );
    } else {
        $message   = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
    }
    return $message;
}

Related threads (for Woocommerce 3+):

• Hide Added to Cart message in Woocommerce
• Customizing add-to-cart messages based on the product IDs in WooCommerce 3
• Customize add to cart message in Woocommerce 3

Answer 2

If you look at add-to-cart.js it fires a trigger added_to_cart on adding a product to cart. I hooked into that and did this

jQuery(document.body).on("added_to_cart", function( data ) {
    jQuery('button.added').nextAll().remove();
    jQuery('button.added').after(' <span style="text-align:center;display:block;" class="cart_updated_ajax"><a href="' + wc_add_to_cart_params.cart_url + '" title="' +
                            wc_add_to_cart_params.i18n_view_cart + '">Cart Updated</a></span>');
});

Here you can add anything after product is added to cart.

Hope that helps!

Answer 3

Add a filter to your theme/functions.php. The code below just overrides the existing $message. This overwrites $message with an nearly identical one that prepends a "checkout" link to the message.

Make sure you return the $message.

You can of course just modify the existing message, as the entire thing is passed as a string via the first param or $message var.

add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
    $titles[] = get_the_title( $product_id );

    $titles = array_filter( $titles );
    $added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );

    $message = sprintf( '%s <a href="%s" class="button">%s</a>&nbsp;<a href="%s" class="button">%s</a>',
                    esc_html( $added_text ),
                    esc_url( wc_get_page_permalink( 'checkout' ) ),
                    esc_html__( 'Checkout', 'woocommerce' ),
                    esc_url( wc_get_page_permalink( 'cart' ) ),
                    esc_html__( 'View Cart', 'woocommerce' ));

    return $message;
}

Answer 4

In Woocommerce 3.0 "wc_add_to_cart_message" is obsolete and no longer works. So while the answer by @zmonteca was ok, is no longer working on the Woocommerce 3.0

Just replace "wc_add_to_cart_message" with "wc_add_to_cart_message_html" and voile... works.

add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
$titles[] = get_the_title( $product_id );

$titles = array_filter( $titles );
$added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );

$message = sprintf( '%s <a href="%s" class="button">%s</a>&nbsp;<a href="%s" class="button">%s</a>',
                esc_html( $added_text ),
                esc_url( wc_get_page_permalink( 'checkout' ) ),
                esc_html__( 'Checkout', 'woocommerce' ),
                esc_url( wc_get_page_permalink( 'cart' ) ),
                esc_html__( 'View Cart', 'woocommerce' ));

return $message;}

Answer 5

@Dante is correct, the solutions provided by @BradleyD won't work for ajax_add_to_cart on shop page.

The solution provided by @Abstract is working as expected. I am also using his solution.

Another jQuery approach is to to listen for the the ajaxSuccess event on the document object and do the desired modifications for the clicked button.

Something like that should work:

$(document).ajaxSuccess(function(event, xhr, settings) {
    if (settings.url.indexOf('?wc-ajax=add_to_cart') !== -1) {
        // You can find the clicked button element under the event.target.activeElement
        // Than you can do whatever you want here. Add new html element and text, etc.
    }

});

Answer 6

Have you tried a filter like the following

function your_add_to_cart_message() {
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :
    $message = sprintf( '%s<a href="%s" class="your-style">%s</a>', __( 'Successfully added to cart.', 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'shop' ) ) ), __( 'Continue Shopping', 'woocommerce' ) );
else :
    $message = sprintf( '%s<a href="%s" class="your-class">%s</a>', __( 'Successfully added to cart.' , 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'cart' ) ) ), __( 'View Cart', 'woocommerce' ) );
endif;
return $message;
}
add_filter( 'wc_add_to_cart_message', 'your_add_to_cart_message' );

In reply to the ajax message update, try a translation function like:

function your_woo_ajax_solution( $translation, $text, $domain ) {
  if ( $domain == 'woocommerce' ) { // your domain name
    if ( $text == 'View Cart' ) { // current text that shows
        $translation = 'Basket updated.'; // The text that you would like to show
    }
  }

  return $translation;
}
add_filter( 'gettext', 'your_woo_ajax_solution', 10, 3 );