How to remove the "Add to cart" button after adding a product to woo-commerce?
what i am implementing for my projects add the following code to the .php function to unregister the js that added the cart button to view along with the add to cart button
wp_deregister_script('wc-add-to-cart');
wp_register_script('wc-add-to-cart', get_stylesheet_directory_uri(). '/js/add-to-cart-multi.js' , array( 'jquery' ), WC_VERSION, TRUE);
wp_enqueue_script('wc-add-to-cart');
Now you need to configure this js that we have unregistered and now we need to create a new js file named add-to-cart-multi.js
The following code goes into this newly created file
jQuery( function( $ ) {
// wc_add_to_cart_params is required to continue, ensure the object exists
if ( typeof wc_add_to_cart_params === 'undefined' )
return false;
// Ajax add to cart
$( document ).on( 'click', '.add_to_cart_button', function(e) {
// AJAX add to cart request
var $thisbutton = $( this );
if ( $thisbutton.is( '.product_type_simple' ) ) {
if ( ! $thisbutton.attr( 'data-product_id' ) )
return true;
$thisbutton.removeClass( 'added' );
$thisbutton.addClass( 'loading' );
var data = {
action: 'woocommerce_add_to_cart',
};
$.each( $thisbutton.data(), function( key, value ) {
data[key] = value;
});
// Trigger event
$( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
// Ajax action
$.post( wc_add_to_cart_params.ajax_url, data, function( response ) {
if ( ! response )
return;
var this_page = window.location.toString();
this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );
if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}
// Redirect to cart option
if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
window.location = wc_add_to_cart_params.cart_url;
return;
} else {
$thisbutton.removeClass( 'loading' );
fragments = response.fragments;
cart_hash = response.cart_hash;
// Block fragments class
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).addClass( 'updating' );
});
}
// Block widgets and fragments
$( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
message: null,
overlayCSS: {
opacity: 0.6
}
});
// Changes button classes
$thisbutton.addClass( 'added' );
$thisbutton.addClass( 'hide' );
// View cart text
if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
$thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="add-cart button added_to_cart wc-forward" title="' +
wc_add_to_cart_params.i18n_view_cart + '"><i class="fa fa-shopping-cart"></i></a>' );
}
// Replace fragments
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).replaceWith( value );
});
}
// Unblock
$( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();
// Cart page elements
$( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {
$( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();
$( 'body' ).trigger( 'cart_page_refreshed' );
});
$( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
$( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
});
// Trigger event so themes can refresh other areas
$( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash ] );
}
});
return false;
}
return true;
});
});
On line number 77 I added class="hide"
with code
$thisbutton.addClass( 'hide' );
So hiding basically hides the add to cart button
And made a few more changes that I think in the code, but I don't remember it now, what it was.
I hope this helps someone
source to share
I stumbled upon this even though I was trying to do the same and even though I couldn't get the js to work, I noticed that when looking for an added class .hide
that adds a class .added
to the class' add to cart the button as soon as it was clicked, so adding the following to my theme css file did the job nicely.
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.added {
display: none;
}
i then just drew the view cart button to appear in its place, using it to target it:
a.added_to_cart {
//do your thing
}
hope it helps someone.
source to share