Shop Archive > Mobile Grid 2 Columns > Quantity Selector & Add to cart

Dear,

If you enable the feature to show quantity selector on shop archive, then on mobile view with 2 columns, the display is not good. You should display the Quantity Selector & Add to cart on separate row because otherwise there is no space for the “Add to cart” text label.

Thanks
Simon

Attachments:

You must be logged in to view attached files.

Hello,

The full-width button product hover was created with quantity selection buttons on the add-to-cart button. This hover is designed to be displayed in a single column on mobile devices, as there is too little space for all possible content width-wise.

Your issue can be resolved in three ways:

1. Set this hover to display in a single column on mobile devices.

2. Use the following custom code to narrow down all quantity button elements as much as possible and show an icon instead of text for the cart button.

body .wd-quantity-overlap div.quantity input[type="button"] {
 min-width: 15px;
}

body div.quantity input[type="number"] {
	width: 25px;
}

body .wd-quantity-overlap {
	--quantity-space: 60px;
}

body .wd-add-btn-replace .add-to-cart-loop span {
	transform: translateY(-100%) translateZ(0);
}

3. Use the following custom code to place the quantity buttons above the add-to-cart button as you indicated.

body .wd-quantity-overlap div.quantity {
	position: static;
	filter: unset;
}

body .wd-quantity-overlap div.quantity input[type] {
	margin-bottom: var(--wd-prod-gap);
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--wd-form-color) !important;
	height: var(--wd-form-height);
	border: var(--wd-form-brd-width) solid var(--wd-form-brd-color);
}

body .wd-quantity-overlap div.quantity [type="number"] {
	border-left: none !important;
	border-right: none !important;
}

body .wd-quantity-overlap {
	--quantity-space: 0px;
}

Both codes need to be placed inside “Custom CSS for mobile” area in Theme Settings

Kind Regards

Dear,

I’ve used the code from your Option #3 but then it applies only for mobile.

The issue actually could apply for desktop, tablet, and mobile landscape.

But if I apply this code in “Custom CSS General” then it doesn’t work well on desktop.

How can I make it work for all devices?

Thanks

Hi,

The following code should work equally on all screen sizes. We have tested it in a local environment, and it’s working normally (screenshot https://prnt.sc/Ctv77nMSaH7Y). If this code is not working on your site after it has been placed inside the “Custom CSS General” area, please provide admin access so we can log in and check it on your side.

Kind Regards

Here is a staging

Attachments:

You must be logged in to view attached files.

To fix this issue, try to replace previous custom code with following code snippet to the Custom CSS area in Theme Settings.

body .wd-quantity-overlap div.quantity {
	position: static;
	filter: unset;
	height: auto;
}

body .wd-quantity-overlap div.quantity input[type] {
	margin-bottom: var(--wd-prod-gap);
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--wd-form-color) !important;
	height: var(--wd-form-height);
	border: var(--wd-form-brd-width) solid var(--wd-form-brd-color);
}

body .wd-quantity-overlap div.quantity [type="number"] {
	border-left: none !important;
	border-right: none !important;
}

body .wd-quantity-overlap {
	--quantity-space: 0px;
}

Kind Regards

[Author]

Posts