Quantity Buttons

Hi vantagepointmg,

Thanks for giving us admin access.
It seems WooCommerce Composite Products does not work well with our number buttons, I have added this CSS code to enable the number spinner in the number field:

#top #wrap_all .quantity input.qty {
    width: 80px;
}

#top #wrap_all .quantity input.qty::-webkit-outer-spin-button, 
#top #wrap_all .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    appearance: auto;
}

Please review your website.

Best regards,
Nikko

Hi MacKenzie,

On mobile it shows like an input field, but when the field is focused the keys showing on mobile will just be numbers.
As for fixing it, the problem is conflict with the WooCommerce Composite Products and Enfold theme which prevents that feature of Enfold from working properly takes to time to identify the cause of the issue, fix and test, so the only workable solution at the moment is to disable the feature and use the original behavior the plugin provides.

Best regards,
Nikko

Hi MacKenzie,

Changing quantities is hidden in the cart on Enfold by default, but you can add it back by adding this CSS code:

@media only screen and (max-width:767px) {
    #top .woocommerce-cart-form .shop_table.cart .cart_item {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item td:before {
        content: attr(data-title) ": ";
        font-weight: 700;
        float: left;
    }
    
    #top .woocommerce-cart-form thead,
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-remove:before {
        display: none;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-remove, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-price, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity {
        display: block;
        width: 100%;
        padding: 12px 20px;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-price, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity {
        text-align: right;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name .component-name {
        max-width: 220px;
        margin-left: auto;
        padding-left: 0;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name .component-name * {
        float: right;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity .quantity {
        width: 170px;
        margin-right: 0;
    }
}

Hope it helps.

Best regards,
Nikko

Hi MacKenzie,

You’re welcome :)
Please add this CSS code:

#top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity .quantity {
    width: 170px;
}

Best regards,
Nikko

Hi MacKenzie,

You’re welcome, I’m happy that I could help.
Also those are CSS codes, they are not in our documentation because I just made it on the spot when I inspected your website :)
You can learn those skills by learning CSS:
https://www.w3schools.com/Css/
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
And also learn how to inspect elements:

I hope you’ll find those resources helpful

Best regards,
Nikko