Tengo la siguiente configuración: https://jsfiddle.net/uosLke60/
input.Add_To_Cart_Button { background-color: #000; color: #fff; border: none; font: inherit; cursor: pointer; font-size: 13px; margin-bottom: 40px; width: 120px; -webkit-appearance: none; border-radius: 0; } <div class="Product_Card_Button"> <form method="post" action="/cart/add"> <quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;"> <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button> <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;"> <button class="quantity__button no-js-hidden" name="plus" type="button">+</button> </quantity-input> <br> <input type="submit" value="Add to cart" class="Add_To_Cart_Button" /> </form> </div>Cuando se presiona el botón Agregar al carrito, la página se actualiza. ¿Cómo puedo ajustarlo para que el producto se agregue al carrito sin actualizar la página? Cualquier sugerencia sería útil. Gracias.
Debe usar Ajax para lograr eso, por lo que es posible actualizar partes de una página web, sin recargar toda la página.