Change Add to Cart Button to View Cart Button after click in Woocommerce

Question

I have a Wordpress website. I am using the Storefront theme for WooCommerce. I have ajax add to cart buttons enabled. When an Add to Cart button is clicked and a product is successfully added to the cart I would like the button to change to a View Cart button (change the text to "View Cart", and link to the cart). If possible I would also like to style the button differently to differentiate it from the standard add to cart button. What would the php code look like?

Answer 1

In Woocommerce by default, when you click on "add to cart" button another button already appears on the right side with "View Cart":

This is already done by a woocommerce jQuery script, that adds after Add to cart button a "View cart" button linked to the cart page…

You can hide the "add to cart" button if you like as when clicked an additional class "added" appears in it (see the generated code below):

<a rel="nofollow" href="/shop/?add-to-cart=741" data-quantity="1" data-product_id="741" data-product_sku="WN001-1" class="button product_type_simple add_to_cart_button ajax_add_to_cart added">Add to cart</a>

So with CSS you can use display:none; on it and only keep "View Cart" …

.ajax_add_to_cart.added {
    display:none !important;
}

Then is easy to re-style that "view cart" button (linked to the cart page):

a.added_to_cart.wc-forward {
    background-color: #8c8c8c !important;
    color: white !important;
    min: .618em 2.4em !important;
}
a.added_to_cart.wc-forward:after {
    content: inherit; !important;
}

So you don't need any code, just some CSS…