Select the quantity from quick shop feature
-
Hello,
It’s possible add the quantity selector directly from the quick shop area? I attach an example.
Regards
Attachments:
You must be
logged in to view attached files.
Hello,
Thank you for choosing our theme and contacting us.
Try to add the following code snippet to the Custom CSS area in Theme Settings to display quantity input there
.basel-hover-quick .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
display: block !important;
font-size: 0;
margin-top: -40px;
padding-bottom: 40px;
}
.quantity {
display: inline-flex;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-align-items: stratch;
-ms-flex-align: stratcht;
align-items: stratch;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
white-space: nowrap;
}
.quantity input[type="number"] {
color:#848484;
text-align: center;
width: 40px;
padding-right: 10px;
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
font-size: 14px;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;}
.quantity .minus,
.quantity .plus {
border: 1px solid #E0E0E0;
color: #848484;
width: 20px;
background-color: #f9f9f9;
transition: all .2s ease;
-webkit-transition: all .2s ease;
border-radius: 0;
height: 40px;
font-size: 14px;
}
.quantity .minus:hover,
.quantity .minus:focus,
.quantity .plus:hover,
.quantity .plus:focus {
box-shadow: none;
outline: none;
background-color: #ececec;
border-color: #E0E0E0;
text-decoration: none;
}
.quantity .minus {
border-right: 0;
}
.quantity .plus {
border-left: 0;
}
Kind Regards
XTemos Studio
It’s Works!! but the price disappear from the area when I select the size option, check the screenshot,
Regards
Attachments:
You must be
logged in to view attached files.
Hi,
Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
.basel-hover-quick .single_variation_wrap .woocommerce-variation {
margin-top: -50px;
padding-bottom: 50px;
}
Regards
Thanks a lot!!!! now appear the selector of options (250grs/500grs) and the price , but the clear button is displayed above of other elements when I reduced the size of the window (check the mobile version).
– It’s possible move the clear button to the left corner?
– It’s possible move the quantity selector to bottom?
– This is the better option for my quick shop?
Example attached
Attachments:
You must be
logged in to view attached files.
Add the following code snippet also
@media (max-width: 1200px) {
.basel-hover-quick .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
margin-top: -15px;
padding-bottom: 15px;
}
.basel-hover-quick .single_variation_wrap .woocommerce-variation {
margin-top: -20px;
padding-bottom: 20px;
}
}
@media (max-width: 480px) {
.basel-hover-quick .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
margin-top: -10px;
padding-bottom: 10px;
}
.basel-hover-quick .single_variation_wrap .woocommerce-variation {
margin-top: -8px;
padding-bottom: 8px;
}
}
.
