Hi Charlie,
I have a feature request for the Mini-Cart element. Is it possible to have a quantity field so that the customer is able to increase or decrease the quantities of any item within the cart and the subtotal changes accordingly?
Thanks,
Christopher
would be awesome. also an quantity + add to cart button element for archive and single that can be fully styled.
@deranaloge I have a working solution for the archive layouts, which I can share:
I added a Modal (Inner Close) to the product grid.
Within the modal I added a Raw Element, which uses the below code:
<div class="cornerstone-product-add">
<div class="quantity-add-wrapper">
<input type="number"
class="qty-input"
value="1"
min="1"
step="1">
<button class="ajax-add-to-cart"
data-product-id="{{dc:woocommerce:product_id}}"
data-product-name="{{dc:woocommerce:product_title}}">
Add to Cart
</button>
</div>
<div class="add-to-cart-message" style="display:none;"></div>
</div>
Archive CSS is added:
.cornerstone-product-add {
padding: 15px;
border-radius: 8px;
margin-top: 15px;
}
.quantity-add-wrapper {
display: flex;
gap: 10px;
align-items: stretch;
}
.qty-input {
width: 80px;
padding: 12px;
font-size: 16px;
text-align: center;
border: 2px solid #e0e0e0;
border-radius: 6px;
transition: border-color 0.3s ease;
}
.qty-input:focus {
outline: none;
border-color: #0073aa;
}
/* Styled button with hover effects */
.ajax-add-to-cart {
flex: 1;
padding: 5px 10px;
font-size: 16px;
font-weight: 600;
background: #b23948;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ajax-add-to-cart:hover {
background: rgb(5, 102, 173);
transform: scale(0.98);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.ajax-add-to-cart:active {
transform: translateY(0);
}
/* Loading state */
.ajax-add-to-cart.loading {
background: #ccc;
cursor: not-allowed;
}
.ajax-add-to-cart.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
left: 100%;
}
}
/* Success/error messages */
.add-to-cart-message {
margin-top: 8px;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
text-align: center;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.add-to-cart-message .success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.add-to-cart-message .error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Mobile responsive */
@media (max-width: 768px) {
.quantity-add-wrapper {
flex-direction: column;
}
.qty-input {
width: 100%;
}
}
Then in functions.php in the child theme:
// AJAX handler for Cornerstone add to cart
add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'cornerstone_ajax_add_to_cart');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'cornerstone_ajax_add_to_cart');
function cornerstone_ajax_add_to_cart() {
$product_id = absint($_POST['product_id']);
$quantity = absint($_POST['quantity']);
// Validate
if (!$product_id || !$quantity) {
wp_send_json_error(array('error' => 'Invalid product or quantity.'));
return;
}
// Check if product exists and is purchasable
$product = wc_get_product($product_id);
if (!$product || !$product->is_purchasable()) {
wp_send_json_error(array('error' => 'This product cannot be purchased.'));
return;
}
// Check stock
if (!$product->is_in_stock()) {
wp_send_json_error(array('error' => 'This product is out of stock.'));
return;
}
// Add to cart
$added = WC()->cart->add_to_cart($product_id, $quantity);
if ($added) {
// Get cart fragments to update mini cart
WC_AJAX::get_refreshed_fragments();
} else {
wp_send_json_error(array('error' => 'Could not add product to cart.'));
}
}
I am sure @charlie can come up with something neater than this and maybe add it as an element!
There is a guide here on how to do that with the Mini Cart. I couldn’t get this to work, but maybe you have better luck in your child theme. I can keep the feature in mind. Have a great weekend.
https://stackoverflow.com/questions/73471584/add-quantity-select-to-woocommerce-shopping-cart-widget
Thanks Charlie!
My archive code came from Claude after a few reworkings. I will try the same with the Mini-Cart when I get a moment to see what we come up with. I will let you know the results, in case they can become a feature / element.
Have a good weekend yourself!
