Change UP & DOWN quantity products for +/- symbols

Hi

Instead of the arrows UP and DOWN for products quantities, is it possible to have the + and - symbols?

http://themes.muffingroup.com/be/store/product/woo-logo-3/

Thanks

Comments

  • Hi,

    this is WooCommerce default field which can not be changed unfortunately.
  • edited May 2018
    businessvip A solution for U, to create from this:

    image
    this:
    image
  • 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
Sign In or Register to comment.