Me gustaría modificar el comportamiento del botón "Agregar al carrito" de WooCommerce de la siguiente manera:

1. Cuando se hace clic en el botón "Agregar al carrito", el artículo seleccionado se agrega al carrito y el botón cambia a un selector de incremento de cantidad con botones más/menos. (Tampoco debería haber un botón "Ver carrito").
2. La cantidad en el carrito se puede aumentar o disminuir haciendo clic en los botones más/menos en el selector de cantidad.
3. Si la cantidad se reduce a cero, el botón de incremento de cantidad vuelve al botón "Agregar al carrito".

Todas estas acciones deben realizarse sin recargar la página. Idealmente, me gustaría aplicar esto a todas las áreas de la tienda (páginas de archivo de la tienda, páginas de productos, ventanas modales de vista rápida, carrito), sin embargo, si esto no es posible, solo en la página de la tienda está bien.

Intenté usar el complemento de cantidad WooCommerce Ajax de Themes.Zone , pero parece que no puedo hacer que funcione en mi sitio ... ¡lástima, porque es exactamente lo que estoy buscando!

Consulte los recursos a continuación para ver ejemplos del producto terminado ideal:

Haga clic aquí para ver capturas de pantalla

Haga clic aquí para ver un ejemplo de trabajo en el sitio web de The Happy Apple

Haga clic aquí para ver un ejemplo de trabajo en el sitio web de Woolworths

¡Cualquier ayuda sería muy apreciada! ¡Soy súper nuevo en el juego de desarrollo web, por lo que escribir el código yo mismo es totalmente irreal! >D< ¡Gracias de antemano!