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 :
bouton panier 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é ?

Dire merci, c'est bien aussi.

Partagez cet article

0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x