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;
  }
}

[Author]

Posts