Home › Forums › WoodMart support forum › Shop Archive > Mobile Grid 2 Columns > Quantity Selector & Add to cart
Shop Archive > Mobile Grid 2 Columns > Quantity Selector & Add to cart
- This topic has 5 replies, 2 voices, and was last updated 3 months, 1 week ago by
Bogdan Donovan.
-
AuthorPosts
-
May 26, 2024 at 10:41 pm #568259
Jeriss Cloud CenterParticipantDear,
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
SimonAttachments:
You must be logged in to view attached files.May 27, 2024 at 10:19 am #568312
Bogdan DonovanKeymasterHello,
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
May 28, 2024 at 10:34 am #568641
Jeriss Cloud CenterParticipantDear,
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
May 28, 2024 at 3:15 pm #568767
Bogdan DonovanKeymasterHi,
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
May 28, 2024 at 11:59 pm #568876
Jeriss Cloud CenterParticipantHere is a staging
Attachments:
You must be logged in to view attached files.May 29, 2024 at 4:00 pm #569079
Bogdan DonovanKeymasterTo 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
-
AuthorPosts
- You must be logged in to create new topics. Login / Register