Ajoutez deux boutons + et – à la quantité du bouton d’ajout panier Woocommerce

Si vous avez envie de rendre plus intuitif l’ajout de quantité de produits sur la page de celle-ci, vous pouvez copié/collé ce code ci-dessous dans votre thème enfant de votre wordpress :

				
					/**
 * @compatible - WooCommerce 5

// -------------
// 1. Show plus minus buttons
*/
 
add_action( 'woocommerce_after_quantity_input_field', 'display_quantity_plus' );
  
function display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'display_quantity_minus' );
  
function display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
  
// -------------
// 2. Trigger update quantity script
  
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
  
function add_cart_quantity_plus_minus() {
 
   if ( ! is_product() && ! is_cart() ) return;
    
   wc_enqueue_js( "   
           
      $('form.cart,form.woocommerce-cart-form').on( 'click', 'button.plus, button.minus', function() {
  
         var qty = $( this ).parent( '.quantity' ).find( '.qty' );
         var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));
 
         if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
               qty.val( max );
            } else {
               qty.val( val + step );
            }
         } else {
            if ( min && ( min >= val ) ) {
               qty.val( min );
            } else if ( val > 1 ) {
               qty.val( val - step );
            }
         }
 
      });
        
   " );
}
				
			
Voici le résultat :

Attention, car vous devrez sans doute ajouter du CSS à cet ajout pour rendre le tout visuellement plus sympa.

Testez sur WordPress 5.8.1 et Woocommerce 5.7.1.
Un nouveau projet WordPress ?
Contactez-moi et je me ferais un plaisir de vous aider.

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur whatsapp
Partager sur email
Partager sur print

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Suivez-moi

Les derniers articles

Votre demande a bien été envoyé, merci.

Le délai de réponse peut varier de 24h à 48h.
Merci de votre compréhension

Besoin d'aide pour mon projet

Sujet :
Ajoutez deux boutons + et – à la quantité du bouton d’ajout panier Woocommerce
Panier
  • Votre panier est vide.