Рет қаралды 18,059
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