Advertisement
Barbareshet

woocommerce add +/- buttons

Feb 1st, 2022
1,413
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.46 KB | None | 0 0
  1. <?php
  2. // -------------
  3. // 1. Show Buttons
  4.  
  5. add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_plus' , 15);
  6.  
  7. function bbloomer_display_quantity_plus() {
  8.    echo '<div class="qu-warp"><span class="quantitytext">'._x('Quantity', 'woocommerce').'</span> <button type="button" class="plus" >+<span class="screen-reader-text">'.__('plus 1 item', 'woocommerce').'</span></button>';
  9. }
  10.  
  11. add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_minus' , 15);
  12.  
  13. function bbloomer_display_quantity_minus() {
  14.    echo '<button type="button" class="minus" >-<span class="screen-reader-text">'.__('minus 1 item', 'woocommerce').'</span></button></div>';
  15. }
  16.  
  17. // Note: to place minus @ left and plus @ right replace above add_actions with:
  18. // add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_minus' );
  19. // add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_plus' );
  20.  
  21. // -------------
  22. // 2. Trigger jQuery script
  23.  
  24. add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
  25.  
  26. function bbloomer_add_cart_quantity_plus_minus() {
  27.    // Only run this on the single product page
  28.    if ( ! is_product() ) return;
  29.    ?>
  30.       <script type="text/javascript">
  31.            
  32.       jQuery(document).ready(function($){  
  33.            
  34.          $('form.cart').on( 'click', 'button.plus, button.minus', function() {
  35.  
  36.             // Get current quantity values
  37.             var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
  38.             var val   = parseFloat(qty.val());
  39.             var max = parseFloat(qty.attr( 'max' ));
  40.             var min = parseFloat(qty.attr( 'min' ));
  41.             var step = parseFloat(qty.attr( 'step' ));
  42.  
  43.             // Change the value if plus or minus
  44.             if ( $( this ).is( '.plus' ) ) {
  45.                if ( max && ( max <= val ) ) {
  46.                   qty.val( max );
  47.                } else {
  48.                   qty.val( val + step );
  49.                }
  50.             } else {
  51.                if ( min && ( min >= val ) ) {
  52.                   qty.val( min );
  53.                } else if ( val > 1 ) {
  54.                   qty.val( val - step );
  55.                }
  56.             }
  57.              
  58.          });
  59.            
  60.       });
  61.            
  62.       </script>
  63.    <?php
  64. }
  65. remove_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
  66. add_action( 'woocommerce_before_single_product', 'wc_print_notices', 60 );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement