.product-table-wrapper{ max-width:1100px; margin:auto; font-family:Arial, sans-serif; } .product-table{ width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.08); } .product-table th{ background:#2f8f6b; color:white; padding:14px; font-size:15px; text-align:left; } .product-table td{ padding:14px; border-bottom:1px solid #eee; vertical-align:middle; } .product-table tr:hover{ background:#f7fbf9; transition:0.2s; } /* Prix */ .product-table td:nth-child(4){ font-weight:bold; font-size:18px; color:#2f8f6b; } /* Quantité */ .qty-box{ display:flex; align-items:center; gap:6px; } .qty-btn{ width:32px; height:32px; border-radius:6px; border:none; background:#f0f0f0; cursor:pointer; font-size:18px; transition:0.2s; } .qty-btn:hover{ background:#e0e0e0; } .qty-input{ width:45px; text-align:center; border:1px solid #ddd; border-radius:6px; height:32px; } /* Bouton panier */ .add-to-cart-btn{ background:#3CA97D; color:white; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-weight:bold; transition:0.25s; } .add-to-cart-btn:hover{ background:#2e8a63; transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.15); } /* Mobile */ @media(max-width:768px){ .product-table th:nth-child(2), .product-table td:nth-child(2){ display:none; } } document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll(".qty-box").forEach(function(box){ const input=box.querySelector(".qty-input"); box.querySelector(".plus").onclick=()=>input.value=parseInt(input.value||1)+1; box.querySelector(".minus").onclick=()=>{ let v=parseInt(input.value||1); if(v>1)input.value=v-1; }; }); document.querySelectorAll(".add-to-cart-btn").forEach(button=>{ button.addEventListener("click",function(){ const row=this.closest("tr"); const productID=row.dataset.productId; const qty=row.querySelector(".qty-input").value; fetch(wc_add_to_cart_params.ajax_url,{ method:"POST", headers:{ "Content-Type":"application/x-www-form-urlencoded" }, body: "action=woocommerce_add_to_cart"+ "&product_id="+productID+ "&quantity="+qty }) .then(res=>res.json()) .then(response=>{ if(response.fragments){ Object.entries(response.fragments).forEach(([selector,html])=>{ const el=document.querySelector(selector); if(el)el.innerHTML=html; }); button.innerHTML="✓ Ajouté"; button.style.background="#2e8a63"; setTimeout(()=>{ button.innerHTML="Ajouter"; button.style.background="#3CA97D"; },1500); } }); }); }); });