Change UP & DOWN quantity products for +/- symbols

Comments

• Albert

  May 2016

  Hi,
  
  this is WooCommerce default field which can not be changed unfortunately.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• qubedadvertising

  May 2018 edited May 2018

  businessvip A solution for U, to create from this:

  
  

  

  this:

  
  
• qubedadvertising

  May 2018 edited May 2018

  First need to create a folder with
  "global" name on your themes/woocommerce folder. And here You need to
  create "quantity-input.php" file, with fallowing content:
  -----------------------------------------------------------------------------------------
  <?php
  /**
   * Product quantity inputs with plus/minus buttons by Qubed Advertising
   *
   * Save this template to your theme as woocommerce/global/quantity-input.php.
   *
   * HOWEVER, on occasion WooCommerce will need to update template files and you
   * (the theme developer) will need to copy the new files to your theme to
   * maintain compatibility. We try to do this as little as possible, but it does
   * happen. When this occurs the version of the template file will be bumped and
   * the readme will list any important changes.
   *
   * @see         https://docs.woocommerce.com/document/template-structure/
   * @author         WooThemes
   * @package     WooCommerce/Templates
   * @version ;    3.3.0
   */
  if ( ! defined( 'ABSPATH' ) ) {
      exit; // Exit if accessed directly
  }
  if ( $max_value && $min_value === $max_value ) {
      ?>
     
  <input type="hidden" name="<?php echo esc_attr( $input_name );
  ?>" value="<?php echo esc_attr( $min_value ); ?>" />
      <?php
  } else {
      ?>
      <div class="quantity">
          <input class="minus" type="button" value="-">
     
      <input type="number" step="<?php echo esc_attr( $step );
  ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php
  echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
  name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo
  esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x(
  'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>"
  class="input-text qty text" size="4" pattern="<?php echo esc_attr(
  $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode );
  ?>" />
          <input class="plus" type="button" value="+">
      </div>
      <?php
  }
  -----------------------------------------------------------------------------------------
  
  After add the fallowing code to theme functions.php:
  ------------------------------------------------------------------------------------------
  // Add this to your theme's functions.php
  function kia_add_script_to_footer(){
      if( ! is_admin() ) { ?>
      <script>
      jQuery(document).ready(function($){
      $('.quantity').on('click', '.plus', function(e) {
          $input = $(this).prev('input.qty');
          var val = parseInt($input.val());
          var step = $input.attr('step');
          step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
          $input.val( val + step ).change();
      });
      $('.quantity').on('click', '.minus',
          function(e) {
          $input = $(this).next('input.qty');
          var val = parseInt($input.val());
          var step = $input.attr('step');
          step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
          if (val > 0) {
              $input.val( val - step ).change();
          }
      });
  });
  </script>
  <?php }
  }
  add_action( 'wp_footer', 'kia_add_script_to_footer' );
  ------------------------------------------------------------------------------------------
  
  And finaly add to Betheme custom css this:
  ------------------------------------------------------------------------------------------
  .woocommerce .quantity input.plus, .woocommerce .quantity input.minus {
      height: 44px;
      width: 43px;
      padding: 0;
      margin: 0;
      font-weight: 400 !important;
      position: relative;
      font-size: 20px;
  }
  .woocommerce .quantity input.plus {
      float: right;
      border-radius: 0px;
  }
  .woocommerce .quantity input.minus {
      float: left;
      border-radius: 0px;
  }
  input[type="number"]{
    font-size: 16px;
  border-top: 1px solid #ccc;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #ccc;
  }
  input[type="number"] {
      -moz-appearance: textfield;
  

  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{
      -webkit-appearance: none;
      margin: 0;
  }
  

  .woocommerce .product div.entry-summary .cart .button {
      margin-left: 10px;
  }
  .woocommerce .quantity input.qty {
      min-width: 50px;
  }
  .woocommerce .quantity .qty {
      width: 1em !important;
  }
  .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents .quantity {
      display: inline-block;
  }
  ------------------------------------------------------------------------------------------
  
  
  that's all