PHP

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

Jean Rémi14 octobre 20212 min de lecture

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 […]

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 :
JR Web Concept - Développement Web

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.

Besoin d'un code personnalisé ?

Vous avez un projet de développement web ?

Le meilleur moyen de savoir si nous pouvons vous aider, c'est d'en parler. Réservez un appel de 30 minutes avec notre équipe. Nous échangeons sur votre besoin, nous identifions les pistes possibles, et nous vous donnons une vision claire des prochaines étapes. Sans engagement.

Nous écrire