Docs

[yukuza]

Hi,
I have several problems viewing the cart in mobile phones:

– Product image becomes ultra small in vertical mode
– Things are not displaying properly specially in vertical mode
– I can’t scroll horizontally to see all the info in the cart

…and I really don’t like in general how it looks like in mobile, although I pretty like it on my desktop computer.

http://www.ludobooks.com/carro/

Before I start changing custom > css…I thought I’d better ask for help. So here I am. What could I do to make it look better in mobile? Make it look more intelligible..

I really need it, since almost half the visitors are using mobile.. and growing!

I will appreciate your help. Thanks in advance!

Miguel Angel

PD: Let me know if you need more information.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width:  480px) {
	.woocommerce .cart.shop_table {
    font-size: .5em;
	}
}

Hope it helps, Cheers!

[yukuza]

Hi Again,
Thanks for that. On addition, I found out that many customers add items to their cart.. but when navigating through the site with their mobile, they seem to get lost, and can’t find the cart again.

So for mobiles, I would like to add a permanent cart icon between the collapsed menu icon and the logo, so that they can go back to their cart easily.

How can I achieve that?
I guess it should be between these two elements in the global/_nav-primary.php file.. but maybe there’s an easy way to do it.

<nav class=”x-nav-wrap desktop” role=”navigation”>
<?php x_output_primary_navigation(); ?>
</nav>

<div class=”x-nav-wrap mobile collapse”>
<?php x_output_primary_navigation(); ?>
</div>

[Lely]

Hi There,

Please add the cart icon code above the following lines of code on _nav-primary.php

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

Hope this helps.

[yukuza]

And which is the cart icon code and how can I style it so that it looks fine in mobile and hidden for desktop in my website?

[Rue Nel]

Hello There,

It seems that you already added the product cart in menu.

To hide this on desktop screens and only display this in smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav .wpmenucartli {
    display: none;
}

Please let us know if this works out for you. Thank you.

[Author]

Posts