Elementor Pro Custom Product Page Design - Part 2 | Quantity Buttons

In this part we learn how to add plus and minus buttons to our quantity input.
Download template here:
urieljsoto.gumroad.com/l/simp...
Custom code to add quantity buttons
www.tychesoftwares.com/how-to...
Custom CSS Without Plugin:
/*Minus button *style*/
selector .cart button.minus{
margin-right: 0px;
background-color: black;
color: white;
padding: 0px 20px 0px 20px;
border: none;
font-size: 33px
}
/*plus button style*/
selector .cart button.plus{
margin-left: 0px;
background-color: black;
color: white;
padding: 0px 20px;
border: none;
font-size: 22px
}
/*Button clicked*/
selector .cart button:focus{
outline: none;
}
/*Add to cart button*/
.woocommerce div.product form.cart .button {
margin-left: 15px;
padding: 15px 70px
}
/*Cart price*/
.woocommerce div.product span.price {
color: black;
}
/*Cart price bottom spacing*/
.woocommerce-variation-price{
margin-bottom: 10px;
}
/* Disable input arrows Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Disable input arrows Firefox */
input[type=number] {
-moz-appearance: textfield;
}
@media(max-width:917px){
/*Add to cart button*/
.woocommerce div.product form.cart .button {
margin-left: 10px;
padding: 15px 20px
}
/*Minus button *style*/
selector .cart button.minus{
padding: 0px 13px;
}
/*plus button style*/
selector .cart button.plus{
padding: 0px 13px;
}
}
Custom CSS With Plugin:
/*Add to cart button*/
.woocommerce div.product form.cart .button {
margin-left: 15px;
padding: 17px 70px
}
/*fix plugin cart spacing */
.qib-button-wrapper {
margin: 0px 0px 0px 0px !important;
}
/*plus button style*/
selector .cart button.plus{
border-radius: 0px;
height: 60px;
width: 50px;
background-color: black;
color: white;
}
/*plus button style*/
selector .cart button.minus{
border-radius: 0px;
height: 60px;
width: 50px;
background-color: black;
color: white;
}
/*Quantity box style*/
.woocommerce div.product.elementor .woocommerce-variation-add-to-cart .quantity input {
background-color: white;
color: black;
border-radius: 0px;
margin: 0px -5px;
height: 60px;
border: 2px black solid;
}
/*Button clicked*/
selector .cart button:focus{
outline: none;
}
/*Cart price*/
.woocommerce div.product span.price {
color: black;
}
/*Cart price bottom spacing*/
.woocommerce-variation-price{
margin-bottom: 10px;
}
@media(max-width:917px){
/*Add to cart button*/
.woocommerce div.product form.cart .button {
margin-left: 10px;
padding: 15px 20px
}
/*Minus button *style*/
selector .cart button.minus{
height: 60px;
width: 40px;
}
/*plus button style*/
selector .cart button.plus{
height: 60px;
width: 40px;
}
/*Quantity box style*/
.woocommerce div.product.elementor .woocommerce-variation-add-to-cart .quantity input {
height: 60px;
width: 60px;
}
}
🔵 Join Our Facebook Community!
bit.ly/urielsotofbgroup
🟢 Tech Support:
urielsoto.com/services/
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/elementormobile
🟣 Website Building Factory Course
bit.ly/websitebuildingfactory
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielelementorpro​​​​​​​​​
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/​
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a

[@KariposTheOne]

Great!

[@mandem1967]

Hi! Thanks! Could the plus and minus buttons disappear (display: none) when there is only one product unit in stock?

[@empachado69]

sos genio

[@suky-u1s]

Thank you

[@Val-bk2pb]

Hello! How can I insert this template to a selection of another single page (elementor) which I can keep the layout and link to specific product? as I'd like to run a promotion page for a specific product (variable). Thanks a lot for your video and it helps a lot for a newbie like me.

[@programmingzoon3593]

Hello sir!How can we change the position of cart price from just above the quantity button to the just below the product title?

[@leomarkconstantino4451]

For the color attribute/variation or in my case I wan to show the image can I put it above the name of the image/color is that possible? nd can this custom product page design can only be assign to specific products?

[@eideshi860]

Hello! sir! can you help me.
I want that,my order qty will incresre by (qty*2) or(qty*3) just like(2+2+2....)or(3+3+3....)
though i do wholesale. i have some product which cant be sell without set.. min order item should increase by multiply in spefic products.

[@yogvaghela]

This code was working now suddenly it is showing me a dropdown

[@jonas8085]

how did you make the product options display as a buttons?

[@nefuros551]

variation swatch plugin

[@BlackJacketJones]

i followed all of your instructions, but the quantity buttons don't work. i click plus, i click minus, and the quanity stays at 1. this doesn't work.

[@willbennett1949]

I had this problem, too, using the Elementor Hello child theme

[@tsinfotech1761]

please make it responsive