Mobile cart fix - Support | Kriesi.at - Premium WordPress Themes

Tagged: checkout, ecommerce, mobile, quantity

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

Author

Posts
November 22, 2020 at 1:50 pm #1262112
El
Participant
Hi guys,

the mobile view of the cart in enfold is kind of old-fashioned and I already applied some fixes that you recommended in other posts.

@media only screen and (max-width: 767px) {

.responsive .shop_table .product-quantity {
display: block;
}

table div.quantity {
width: auto;
}
}

But unfortunately the qty field has some visual glitches. Mainly it does not stretch correctly. Can you let me know how to fix this? Idealy it would also be great if we could swap pos of plus an minus.

Best,
El
- This topic was modified 4 years, 1 month ago by El.
November 25, 2020 at 4:51 am #1262889
Ismael
Moderator
Hey El,

Thank you for the inquiry.

Did you set the quantity buttons to not display on smaller screens? We found this css code in the site.
```
.cart_item .plus, .cart_item .minus {
	display: none !important;
}
```
If you’d like, we could also adjust the minimum width of the product quantity column and decrease the size of the input fields so that they fit exactly inside the container.

Please try this css code in the Quick CSS field.
```
td.product-quantity {
	min-width: 120px;
}

#top div .quantity input.plus, #top div .quantity input.minus {
	line-height: 29px;
	width: 30px;
	height: 30px;
}

td {
	font-size: 12px;
}

#top div .quantity input.qty {
	height: 30px;
	width: 30px;
	line-height: 29px;
}
```
Best regards,
Ismael
November 25, 2020 at 11:30 am #1262972

El
Participant

Hey Ismael,

I had to change everything to make it look reasonable. I added your css to my other css. What remains is that the table is somehow destroyed:

I circumvent it by setting the table width to zero but that makes it a little less readbable.

Best,
El

November 26, 2020 at 8:17 am #1263201
Ismael
Moderator
Hi,

Thank you for the update.

We could not reproduce the overlap issue with the columns, but we noticed that the subtotal column is missing and that the quantity buttons are still hidden. You have to remove this css code to display the qty buttons backs.
```
.cart_item .plus, .cart_item .minus {
	display: none !important;
}
```
What is the actual resolution of the screen in the screenshot above?

Best regards,
Ismael
November 26, 2020 at 8:18 am #1263202
Ismael
Moderator
Hi,

Thank you for the update.

We could not reproduce the overlap issue with the columns, but we noticed that the subtotal column is missing and that the quantity buttons are still hidden. You have to remove this css code to display the qty buttons back.
```
.cart_item .plus, .cart_item .minus {
	display: none !important;
}
```
What is the actual resolution of the screen in the screenshot above?

Best regards,
Ismael
November 26, 2020 at 12:49 pm #1263244

El
Participant

Hi Ismael,

this has been deleted yesterday already. Please clear your browser cache.
The overlap cannot be seen because I made the lines invisible. If you change that you will see it.

Best,
Elmar

December 1, 2020 at 4:19 pm #1264269
Ismael
Moderator
Hi,

Thank you for the info.

Upon further inspection, it is actually not an overlap issue. The table cells or data (td) have to inherit the height of the table row so that the bottom border of the row is always aligned even when the product title is a bit long. Please try this css code in the Quick CSS field.
```
.shop_table td {
	height: 100% !important;
}
```
Best regards,
Ismael
December 1, 2020 at 4:25 pm #1264270

El
Participant

Unfortunately it doesn´t help. I put the line width back in and added the css. Its still off.

Best,
El

December 4, 2020 at 5:09 am #1264937
Ismael
Moderator
Hi,

Sorry about that. We forgot to include this css code.
```
table.shop_table .woocommerce-cart-form__cart-item.cart_item {
	height: 100%;
}
```
This is how the table should look after adding the css code above.

Screenshot: https://imgur.com/UBCGGFv

Best regards,
Ismael
December 4, 2020 at 8:12 am #1264953

El
Participant

So you wan the whole thing to look like? For some reason it still fails…

@media only screen and (max-width: 767px) {

td.product-quantity {
min-width: 120px !important;
}

#top div .quantity input.plus, #top div .quantity input.minus {
line-height: 29px !important;
width: 30px !important;
height: 30px !important;
}

td {
font-size: 12px !important;
}

#top div .quantity input.qty {
height: 30px !important;
width: 30px !important;
line-height: 29px !important;
}

.shop_table td {
height: 100% !important;
}

table.shop_table .woocommerce-cart-form__cart-item.cart_item {
height: 100% !important;
}
}

December 7, 2020 at 9:03 am #1265415

Ismael
Moderator

Hi,

For some reason it still fails…

What do you mean? Did you remove the cache, or try to check the site on incognito mode? And please do not forget to toggle or temporarily disable the Performance > File Compression settings after adding the css modifications.

Best regards,
Ismael

December 7, 2020 at 12:33 pm #1265456

El
Participant

Hehe, of course man. Several times. Does it mean it works for you???

December 8, 2020 at 5:15 am #1265679
Ismael
Moderator
Hi,

Does it mean it works for you???

Yes, it works when we set the height of the tr element or of the .woocommerce-cart-form__cart-item.cart_item container to 100%. This css does not exist when we checked the site again today.
```
table.shop_table .woocommerce-cart-form__cart-item.cart_item {
    height: 100% !important;
}
```
Please post the login details in the private field so that we could check the css modifications.

Thank you for your patience. :)

Best regards,
Ismael
December 8, 2020 at 10:54 am #1265713

El
Participant

I checked again and its in the compressed style.css … but still doesnt affect the quantity height:

December 9, 2020 at 1:13 pm #1265984

Ismael
Moderator

Hi,

Is there any way to access the live site or its staging version? We may need to inspect the elements further and test the css modifications. Which browser are you using?

Best regards,
Ismael

December 11, 2020 at 1:19 pm #1266526

purplecloud
Participant

This is a great thread, I wondered if Enfold know that by default it seems on mobile, the quantity option does not show at all without manually entering CSS?
Will there be a fix in the theme for this soon?

December 15, 2020 at 3:58 am #1267337

Ismael
Moderator

Hi,

The quantity buttons are actually a custom implementation from the theme and are intentionally disabled or hidden on mobile devices due to the space limitation.

Best regards,
Ismael

December 15, 2020 at 12:38 pm #1267442

purplecloud
Participant

Thanks for the reply, but given that most traffic is mobile this affects ecommerce sites a lot in a negative way.
Can the code be confirmed on how to unhide it all?

December 18, 2020 at 2:32 pm #1268412
Ismael
Moderator
Hi,

The following css code should ensure that the quantity buttons are visible on every device or screen sizes.
```
.cart_item .plus, .cart_item .minus {
	display: block !important;
}
```
Best regards,
Ismael
December 18, 2020 at 2:35 pm #1268413

El
Participant

Hey Ismael,

this thread got a little bit hijacked ;). As per the original issue. The table still isn´t right and I put in the css you provided. We don´t have a staging site and I would appreciate you taking another look at this. It must be a really small fix.

Best,
El

December 21, 2020 at 6:10 am #1268953
Ismael
Moderator
Hi,

@El: Sorry about that. Can we access the site or the dashboard? We would like to test the modifications. As you can see in the previous screenshot, setting the height of the td tag or of the woocommerce-cart-form__cart-item container fixes the issue on our end.

Screenshot: https://imgur.com/UBCGGFv

This is the previous fix.
```
table.shop_table .woocommerce-cart-form__cart-item.cart_item {
    height: 100% !important;
}
```
Best regards,
Ismael
December 21, 2020 at 11:21 am #1268981
El
Participant
Hey Ismael,

unfortunately right now this is not easily possible. But just to reiterate. I was hoping we can fix it by determining the required some changes through the browser dev console. As you can see I implemented this but it does not work.

Best,
El
- This reply was modified 4 years ago by El.
December 23, 2020 at 4:49 am #1269440
Ismael
Moderator
Hi,

Thank you for the screenshot.

Looks like the modification only works on Firefox Dev Windows 10 where we initially checked the issue, but not on Chrome. To make it work on the other browser, we might have to set the display property of the product-quantity column back to table-cell instead of block. Please look for this css modification..
```
.responsive .shop_table .product-quantity {
    display: block;
}
```
.. and replace the value block with table-cell.
```
.responsive .shop_table .product-quantity {
    display: table-cell;
}
```
Screehshot on Chrome: https://imgur.com/budXMeS

Best regards,
Ismael
December 23, 2020 at 12:34 pm #1269522

El
Participant

Ismael,

beautiful! I can confirm that all is good now. Looks great.

Best,
Elmar

December 24, 2020 at 6:46 pm #1269767

Victoria
Inactive Moderator

Hi El,

Glad we could help :)

If you need further assistance please let us know.
Best regards,
Victoria
Author

Posts

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

You must be logged in to reply to this topic.