Bouton quantité personnalisé

Un sélecteur de quantité avec tes propres boutons, à la place des flèches natives du champ number, et le style que tu veux autour.

Voir la démo en direct Ouvrir l'aperçu Webflow

/ ÉTAPE 01

Copie-colle ce code entre les balises <head> de ta page

Ce style CSS supprime les flèches par défaut des champs de type "number" et les rend comme de simples zones de texte, pour un rendu plus uniforme et un contrôle total de la mise en forme.

bouton-quantite.css

001<style>
002  /* supprimer les styles de formulaire et définir la marge à 0 */
003  input[type="number"]::-webkit-inner-spin-button,
004  input[type="number"]::-webkit-outer-spin-button {
005    -webkit-appearance: none;
006    -moz-appearance: none;
007    appearance: none;
008  }
009
010  input[type="number"] {
011    -moz-appearance: textfield;
012  }
013</style>

/ ÉTAPE 02

Copie-colle ce code entre les balises <body> de ta page

Ce script attend que la page soit chargée, puis repère tous les blocs portant la classe .quantity-wrapper. Dans chaque bloc, il récupère le champ numérique .qty-input et les boutons .qty-plus et .qty-minus, puis déclenche un événement change à chaque clic.

bouton-quantite.html

001<!-- JavaScript à placer dans un Embed en Footer (avant </body>) ou dans un fichier JS global -->
002<script>
003  document.addEventListener('DOMContentLoaded', function() {
004    // Sélectionne tous les composants quantité
005    document.querySelectorAll('.quantity-wrapper').forEach(function(wrapper) {
006      const input = wrapper.querySelector('.qty-input');
007      const btnPlus = wrapper.querySelector('.qty-plus');
008      const btnMinus = wrapper.querySelector('.qty-minus');
009
010      btnPlus.addEventListener('click', () => {
011        let val = parseInt(input.value) || 0;
012        input.value = val + 1;
013        input.dispatchEvent(new Event('change'));
014      });
015
016      btnMinus.addEventListener('click', () => {
017        let val = parseInt(input.value) || 0;
018        if (val > parseInt(input.min || 1)) {
019          input.value = val - 1;
020          input.dispatchEvent(new Event('change'));
021        }
022      });
023    });
024  });
025</script>