Cambie el botón Agregar al carrito para ver el botón del carrito después de hacer clic en Woocommerce

Tengo un sitio web de WordPress. Estoy usando el tema Storefront para WooCommerce. Tengo habilitados los botones para agregar al carrito de ajax. Cuando se hace clic en un botón Agregar al carrito y se agrega correctamente un producto al carrito, me gustaría que el botón cambie a un botón Ver carrito (cambie el texto a “Ver carrito” y enlace al carrito). Si es posible, también me gustaría darle un estilo diferente al botón para diferenciarlo del botón estándar de agregar al carrito. ¿Cómo sería el código php?

En Woocommerce por defecto, cuando haces clic en el botón “añadir al carrito” ya aparece otro botón en el lado derecho con “Ver carrito”:

Esto ya lo hace un script jQuery de woocommerce, que agrega después del botón Agregar al carrito un botón “Ver carrito” vinculado a la página del carrito…

Puede ocultar el botón “agregar al carrito” si lo desea, como cuando hace clic en una clase adicional "added" aparece en él (ver el código generado a continuación):

<a rel="nofollow" href="https://stackoverflow.com/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>

Así que con CSS puedes usar display:none; en eso y solo mantén “Ver carrito” …

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

Entonces es fácil cambiar el estilo de ese botón “ver carrito” (vinculado a la página del carrito):

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

Así que no necesitas ningún código, solo algo de CSS…