Modifier le style du sélecteur de quantité de WooCommerce dans Divi

par Pierre Bichet | 12 février 2018 | Tutoriels Divi | 46 commentaires

Je ne sais pas vous, mais personnellement le sélecteur de quantité de Divi pour WooCommerce me sort par les yeux.
Plus laid et moins ergonomique, on ne fait pas !

Au cours de mes pérégrinations sur la toile, je suis tombé sur quelques démos du thème Avada… et j’ai trouvé son sélecteur de quantité si sympa que j’ai décidé de le cloner pour l’utiliser sur mes sites.
Je vais donc également vous en faire profiter…

Ça commence par du JavaScript…

Créons notre fichier JavaScript

Tout d’abord, il nous faut modifier le positionnement des boutons “plus” et “moins”. Voici donc le code JavaScript nécessaire.
Nous allons faire les choses proprement et ne pas le balancer une trentaine de lignes de code en inline dans le <head> de chaque page, mais appeler un fichier externe.

Tout d’abord, copiez/collez le code ci-dessous dans un fichier que vous nommerez comme bon vous semble, mais avec l’extension .js
Puis, uploadez ce fichier sur votre FTP, soit dans le dossier de votre thème enfant, soit dans le dossier /wp-content/uploads par exemple.

function PbStyleQuantite(a) {
    var b, c = !1;
    a || (a = ".qty"),
    b = jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").find(a),
    b.length && (jQuery.each(b, function(a, b) {
        "date" !== jQuery(b).prop("type") && "hidden" !== jQuery(b).prop("type") && (jQuery(b).parent().hasClass("buttons_added") || (jQuery(b).parent().addClass("buttons_added").prepend('<input type="button" value="-" class="minus" />'),
        jQuery(b).addClass("input-text").after('<input type="button" value=" " class="plus" />'),
        c = !0))
    }),
    c && (jQuery("input"   a   ":not(.product-quantity input"   a   ")").each(function() {
        var a = parseFloat(jQuery(this).attr("min"));
        a && a > 0 && parseFloat(jQuery(this).val()) < a && jQuery(this).val(a)
    }),
    jQuery(".plus, .minus").unbind("click"),
    jQuery(".plus, .minus").on("click", function() {
        var b = jQuery(this).parent().find(a)
          , c = parseFloat(b.val())
          , d = parseFloat(b.attr("max"))
          , e = parseFloat(b.attr("min"))
          , f = b.attr("step");
        c && "" !== c && "NaN" !== c || (c = 0),
        "" !== d && "NaN" !== d || (d = ""),
        "" !== e && "NaN" !== e || (e = 0),
        "any" !== f && "" !== f && void 0 !== f && "NaN" !== parseFloat(f) || (f = 1),
        jQuery(this).is(".plus") ? d && (d == c || c > d) ? b.val(d) : b.val(c   parseFloat(f)) : e && (e == c || c < e) ? b.val(e) : c > 0 && b.val(c - parseFloat(f)),
        b.trigger("change")
    })))
}
jQuery(window).on("load", function() {
    PbStyleQuantite()
}),
jQuery(document).ajaxComplete(function() {
    PbStyleQuantite()
});

Je ne vais pas vous détailler tout le code, mais en gros, vers les lignes 6 et 7 on injecte nos nouveaux boutons “plus” et “moins” et ensuite c’est la fonction qui permet d’incrémenter ou décrémenter les quantités au clic sur ces boutons.

Déclarons notre fichier JavaScript

Maintenant, rendez-vous dans Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog et ajoutez <script src=”URL-de-votre-script.js”></script> en précisant donc l’URL de votre fichier JavaScript.

… et ça se termine par du CSS

Et enfin, copiez-collez le code suivant, soit dans Options du thème -> Personnaliser CSS, soit dans le fichier style.css de votre thème enfant.

.woocommerce input[type=number]::-webkit-inner-spin-button,
.woocommerce input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.woocommerce input[type=number].qty {
    -moz-appearance: textfield;
}

.woocommerce-page div.product form.cart div.quantity {
    border-radius: 0px!important;
}

.woocommerce .quantity {
    border: 2px solid #eee!important;
    width: 128px!important;
    display:inline-block;
}

.woocommerce .quantity input.qty, .woocommerce .quantity .minus, .woocommerce .quantity .plus {
    line-height: 16px;
    height: 40px!important;
    background-color: #fff!important;
    color: inherit!important;
    padding:0!important;
    float:left;
    border-radius: 0px!important;
}

.woocommerce .quantity .minus, .woocommerce .quantity .plus {
    border:none!important;
    cursor: pointer;
    width: 40px!important;
}

.woocommerce .quantity .minus:hover, .woocommerce .quantity .plus:hover {
    background-color: #eee!important;
}

.woocommerce .quantity input.qty {
    border-left: 2px solid #eee!important;
    border-right: 2px solid #eee!important;
    width: 44px!important;
}

div.quantity.hidden {
  border:none!important;
}

Examinons le code

Ligne 10 : dans mon exemple, j’ai choisi un style avec des angles droits, mais si vous voulez remettre des arrondis, c’est ici que ça se passe
Lignes 14, 40 et 41 : vous pouvez modifier ici la couleur et l’épaisseur des contours
- Attention !
  - si vous modifiez l’épaisseur à la ligne 14, il vous faudra modifier la largeur à la ligne 15
  - si vous modifiez les épaisseurs à la ligne 40 et 41, il vous faudra modifier la largeur aux lignes 15 et 42
Ligne 22 : vous pouvez changer ici la couleur de fond des boutons
Ligne 23 : par défaut, la couleur du texte des boutons est héritée de la couleur du texte courant de la page produit, mais vous pouvez la modifier à cette ligne
Ligne 36 : vous pouvez changer ici la couleur de fond des boutons au survol (pour changer la couleur du texte au survol, ajoutez color: #000!important en précisant la valeur souhaitée)

Le mot de la fin

Et voila, vous avez maintenant un superbe sélecteur de quantité qui va enjoliver vos fiches produits WooCommerce !
Libre à vous d’ajuster les CSS pour le mettre aux couleurs de votre site ou par exemple de faire des boutons “plus” et “moins de forme ronde… on peut tout imaginer.

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

46 Commentaires

KidKihl (Michaël) sur 12 février 2018 à 10h28 am

Merci beaucoup je suis en plein apprentissage de site e-commerce avec Woo et ce tutoriel tombe à pique.
Pierre sur 12 février 2018 à 10h30 am

À ton service ! 🙂
Marie sur 15 février 2018 à 14h16 pm

C’est top ! merci
Sachant que je suis pas très douée en code !
J’ai personnalisée mon petit + et –

J’ai juste un soucis, c’est que le curseur “laid” de divi est toujours là
Pierre sur 15 février 2018 à 14h24 pm

Je pense que tu as du rater l’étape où il faut déclarer le fichier JavaScript.
Marie sur 15 février 2018 à 14h47 pm

J’ai bien collé dans ” Ajouter ligne de code à la de votre blog ”
https://xxxxx.fr/wp-content/uploads/bouton_md.js
j’ai enregistré

le lien de mon fichier est bon
Marie sur 15 février 2018 à 15h07 pm

sur safari et chrome c’est nickel
c’est juste sur firefox que les curseurs sont affichés
Les Petits Pois sont Bleus sur 17 février 2018 à 18h59 pm

Génial, merci beaucoup, j’ai maintenant un sélecteur bien plus élégant !
En revanche, le prix ne s’ajuste plus sur mon site quand on change la quantité, j’ai manqué quelque chose ?
Pierre sur 19 février 2018 à 09h19 am

Bien vu, il y avait un petit manque pour Firefox !
J’ai modifié les lignes 1 à 10 de CSS en conséquence.
Pierre sur 19 février 2018 à 09h31 am

À quel endroit ? Dans le panier, quand tu cliques sur “Mettre à jour le panier” ?
Les Petits Pois sont Bleus sur 19 février 2018 à 20h14 pm

@Pierre : oui c’était dans le panier, mais c’est résolu !
Laurent sur 7 mars 2018 à 16h28 pm

Un grand merci pour ce tuto 😉
Jenkins sur 25 septembre 2018 à 10h20 am

Bonjour,

Pour ma part le css du site casse, le menu tout en haut redevient bleue claire, et les polices ne charge plus, le bug ne se produit que sur la page d’accueil OU sur la page d’un produit (produit aléatoire, jamais le même )

Merci…
Pierre sur 25 septembre 2018 à 10h36 am

Bonjour, vérifie dans la console s’il n’y aurait pas des erreurs JS.
Romain Olivier sur 5 octobre 2018 à 17h07 pm

Parfait, ça marche nickel merci !
Melanie Langonier sur 4 novembre 2018 à 16h34 pm

Bonjour
j’ai bien tout installé le nouveau selecteur est bien la mais je n’ai pas les boutons + et – qui s’affiche. j’ai cherché mais je ne trouve pas d’ou cela peu venir.
Merci
Julien sur 7 novembre 2018 à 23h06 pm

Bonjour, tu aurais un lien à nous fournir pour voir? Je pense que tu as peut-être mal chargé le fichier JS.
Christian sur 7 novembre 2018 à 23h14 pm

Hi Julien, I had the exact same problem as Melanie.
Julien sur 7 novembre 2018 à 23h27 pm

Hi, can you give us a link too please. I will check this. Thank you
SHIRLEY sur 20 novembre 2018 à 15h56 pm

Pareil même problème que les précédents : Jquery is not defined
erreur citée dans la console
jQuery(window).on(“load”, function() {
PbStyleQuantite()
}),
Julien sur 21 novembre 2018 à 22h16 pm

Salut, tu as bien Jquery de chargé sur ton site?
maccio sur 17 décembre 2018 à 18h57 pm

Merci ! Nickel !
Fauzan sur 30 janvier 2019 à 09h14 am

Thank You Good Code
Kik sur 19 mars 2019 à 15h18 pm

Salut et merci. Bien plus sympa comme ça.
Vous savez comment l’appliqué à page shop de divi. J’aimerais pouvoir choisir les quantité et produit sur la même page
Julien sur 20 mars 2019 à 08h54 am

Hello, ça marche sur tes autres pages?
Kik sur 20 mars 2019 à 10h02 am

Ça marche super sur la page du produit seul.
Mais je me demandais si il était possible d’afficher ce sélecteur de quantité sur la page avec tout les produits. Le but étant d’éviter à l’utilisateur d’ouvrir une page pour chaque produit et définir la quantité.
Daniel sur 29 juillet 2019 à 15h57 pm

Merci Pierre
Victor M. sur 22 octobre 2019 à 15h36 pm

Bonjour,

avec la dernière mise à jour Divi j’ai des problèmes, le bouton ne s’affice plus correctement dans les pages produits mais il est resté comme avant dans la page panier.

Avez-vous rencontré le même problème ?
Julien Guiard sur 23 novembre 2019 à 20h24 pm

Bonjour, as-tu pensé à vider le cache de ton site?
Yoann sur 9 mars 2020 à 17h39 pm

Le résultat n’est pas celui souhaité : https://www.tillap.com/index.php/produit/myproduct/

Mon fichier .js : https://www.tillap.com/wp-content/uploads/quantity.js

J’ai bien appelé la fonction dans le …

Que faire ?
Pierre Bichet sur 10 mars 2020 à 09h28 am

Je viens de jeter un œil à ton site et n’ai pas constaté de problème. J’imagine que tu as corrigé ton erreur. 🙂
Morgan sur 10 mars 2020 à 19h02 pm

Hello merci pour le tuto !!
J’ai crée mon fichier .js et ajouté dans le child theme
J’ai ajouté cette url dans le

Et le css semble ne pas s’appliquer, j’ai bien une erreur dans la console et j’ai l’impression que cela vient de l’url qui est chargée, elle cumule l’url de la page et celle du script.

Merci d’avance 🙂
Julien Guiard sur 11 mars 2020 à 13h48 pm

Bonjour,
as-tu bien mis “https://” avant ton URL ?
Jose sur 24 mai 2020 à 23h21 pm

How to do i customise the plus and minu icon ?

I change the colour and make it thicker

Many thanks

i am beginner
Pierre Bichet sur 31 mai 2020 à 17h19 pm

Here is an example:
.woocommerce .quantity .minus, .woocommerce .quantity .plus {
color: #e2000a!important;
font-weight: 100!important;
}
Francisco sur 1 décembre 2020 à 21h24 pm

Bonjour, merci pour le petit tuto, cependant je ne trouve pas Options du thème -> Intégration -> *** sur wordpress Version 5.5.3

pouvez-vous me dire si l’emplacement change sur la version de ce wp?
Pierre Bichet sur 3 décembre 2020 à 12h00 pm

C’est dans le menu vertical de WordPress : Divi -> Options du thème…
Davide sur 11 décembre 2020 à 15h14 pm

Salut les gars, je me demandais s’il était possible de remplacer les boutons qui permettent au commerce électronique de changer la quantité des produits, j’ai lu quelques guides mais malheureusement ils ne fonctionnent certainement pas à cause des dernières versions, et même les plug-ins ont des dysfonctionnements. J’ai attaché les boutons actuels avec ceux que je voudrais changer. Merci d’avance pour votre aide!
Fran sur 16 décembre 2020 à 15h21 pm

Merci !
Pierre Bichet sur 16 décembre 2020 à 15h51 pm

C’est le sujet de ce tuto si je comprends bien ta question…
GRCD sur 18 décembre 2020 à 14h25 pm

Salut ! Super code !
Par contre je ne parviens pas à appeler le fichier js, avec l’url de cette forme là https://www.XXXXXX.com/wp-content/uploads/quantity.js une idée ?
merci encore
Pierre Bichet sur 4 janvier 2021 à 11h02 am

Le dossier “uploads” est probablement protégé en écriture. Donc soit tu le places ton JS dans un sous-dossier, soit idéalement dans ton thème enfant. Tu peux lire mon tuto pour ajouter du JS dans Divi.
Helmut sur 28 février 2021 à 00h07 am

euh j’ai un petit souci, les plus et moins ne s’affichent pas chez moi
Pierre Bichet sur 3 mars 2021 à 12h10 pm

Je t’invite à vérifier ton code pour trouver l’erreur en cause.
Kiki content sur 31 mars 2021 à 09h32 am

Merci beaucoup Pierre pour ce bout de code.
Utilisé avec succès sur 2 sites.
Ludovic sur 15 mai 2021 à 16h33 pm

Bonjour

j’utilise le thème Hello et je me demande si cette solution pourrais fonctionner car l’affichage des spinners y est tout aussi déplorable.

Si tel est le cas, où puis-je trouver l’intégration du thème sachant que je n’ai pas le même menu qu’avec Divi ?

Merci d’avance pour votre aide !
Mika sur 10 octobre 2021 à 18h27 pm

Tout d’abord, merci pour ce code.
Cependant, j’ai un petit soucis avec la création du fichier .js. Il m’affiche des erreurs ERROR;’jQuery is not defined [no-undef]. Je ne connais rien à Java Script. J’ai fait un copié/collé dans un nouveau fichier sous bracket et je l’ai enregistré en .js
Y-a-t-il une astuce ?
Merci pour votre réponse.