Change UP & DOWN quantity products for +/- symbols

businessvip

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

Albert

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

businessvip A solution for U, to create from this:

this:

qubedadvertising

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