Home › Forums › Basel support forum › Select the quantity from quick shop feature

Select the quantity from quick shop feature

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 26, 2017 at 2:54 am #16814

    fbascuiz
    Participant

    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.
    July 26, 2017 at 7:02 am #16818

    Artem Temos
    Keymaster

    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

    July 27, 2017 at 12:47 am #16855

    fbascuiz
    Participant

    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.
    July 27, 2017 at 6:34 am #16865

    Bogdan Donovan
    Keymaster

    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

    July 28, 2017 at 12:03 am #16897

    fbascuiz
    Participant

    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.
    July 28, 2017 at 6:44 am #16903

    Artem Temos
    Keymaster

    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

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)