Woocommerce - Mobile Shopping Cart - Support | Kriesi.at

Tagged: mobile, shopping cart, woocommerce

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

Author

Posts
June 1, 2016 at 11:36 pm #641762
WP Turned UP
Participant
Hello. Whether the cart is empty or has products in it, I can’t get the cart to appear on any mobile devices. The product pages also do not show the cart. So, short of adding a mobile menu item…I’m not sure how to approach this.

Thank you,
Ryan
- This topic was modified 8 years, 5 months ago by WP Turned UP.
June 3, 2016 at 7:54 am #642437

Vinay
Inactive Moderator

Hey rlogan2334,

By default the cart icon should show up on the mobile device. It may be hidden due to a custom code. The login credentials do not work for me to have a closer look at this issue. Please remove any custom css added and check if the cart icon appear in mobile device add the css one block at a time to know which code is causing this issue.

Best regards,
Vinay

June 4, 2016 at 2:11 am #642772

WP Turned UP
Participant

Thanks, I was able to locate part of the problem. I fixed the credentials as well, so those are now good to use.

#1 – The following CSS hides the cart. But, without it, I’ve never been able to show the mobile menu. The Enfold mobile menu behavior has never worked for me.

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}

#2 – On mobile phone landscape and smaller, the transparent background switches to White for some reason, which in turn hides the Woocommerce cart icon that is also White.

Thank you,
Ryan

June 6, 2016 at 6:01 am #643279
Ismael
Moderator
Hi,

We tried to login to the site but the login credentials are not working. Please check.

The Enfold mobile menu behavior has never worked for me.

Replace this code:
```
@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
```
.. with:
```
@media only screen and (max-width: 1024px) {
     #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
     #header .main_menu .avia-menu, #header .main_menu .social_bookmarks { display: none; }
}

#wrap_all { position: relative !important; }
```
Best regards,
Ismael
June 6, 2016 at 2:11 pm #643452

WP Turned UP
Participant

Better. Here is the current state.

TABLET LANDSCAPE: The alignment is off for the cart and the header borders, as they run into the mobile menu.
TABLE PORTRAIT: Looks okay
PHONE LANDSCAPE & PORTRAIT: Still have the header background turning White, which hides the cart and the logo. Any way to keep the header to look the same (transparency, mobile menu styling, etc.) across all mobile devices?

Thank you,
Ryan

June 6, 2016 at 2:28 pm #643460

WP Turned UP
Participant

I searched through a bunch of forum posts related to “transparent mobile menu” and I can’t get any of them to make any change whatsoever. Here is the latest code I’ve tried.

@media only screen and (max-width: 767px) {
#top .av_header_glassy.av_header_transparency #header_main {background-color: rgba(255,255,255,0.4) !important; } }

It seems like there should be a simple toggle that tells this not to happen on all mobile devices. Why does Enfold choose to apply this to only mobile phone sizes? I mean, it’s pulling in the non-transparent logo and everthing.

June 7, 2016 at 1:35 pm #644038
Andy
Inactive Moderator
Hi,

please open a new ticket for a new topic/issue/question, otherwise it gets confusing for us moderators and also for people trying to search for help here.

Use this code:
```
@media only screen and (max-width: 767px) {
.responsive #top #main {
margin-top: -82px;
}
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background-color: transparent;
}}
```
Best regards,
Andy
Author

Posts