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

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.