Elementor Pro Custom Product Page Design - Part 2

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

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

Пікірлер: 15

@azfandak9719 11 сағат бұрын

hi i have an issue, i can't type in custom css box for elements can u help me please

@mandem1967 2 жыл бұрын

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

@KariposTheOne 2 жыл бұрын

Great!

@Val-bk2pb 2 жыл бұрын

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.

@suky-u1s 8 ай бұрын

Thank you

@empachado69 2 жыл бұрын

sos genio

@programmingzoon3593 2 жыл бұрын

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?

@yogvaghela Жыл бұрын

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

@eideshi860 2 жыл бұрын

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.