[Support request] WooCommerce cart icon in the top bar (only mobile)

[Sílvia]

Hello.
I would like to have, on one hand, the cart icon in the top bar on mobile devices and, on the other hand, the same cart icon in the menu only on desktop and tablets. Is it possible without adding an extra plugin to the site?
I tried to work it with a secondary menu with only the cart > location above header > merge top bar. But…
1. The icon appears in all devices.
2. The bg color of the top bar changes.
3. On desktop and tablet, the social icons that I want to be on the right side of the bar change its position to the center.
4. On mobile devices, the secondary menu appears as a burger menu too, which is something that I don’t want to.
Can someone please help me to solve it?
Thanks,
Sílvia

[David]

Hi there,

do you have an image mockup of how you want the layout to look on Desktop and Mobile ?

[Sílvia]

Sure! 😉

[Sílvia]

You can see it here:

mockups

[David]

When i checked the site earlier – you had the secondary nav with the cart displaying within the Top Bar. You can re-add that – then i can see what we need to do create that layout.

[Sílvia]

Done

[Elvin]

Hi there,

Let’s break things down.

For the secondary nav bar background:
Go to Appearance > Customize > Colors > Secondary Navigation and set the background color to #f1e9d4.

To replace the “Cart” Menu item on the primary menu with the actual Woocommerce cart:

Go to your Appearance > Menu and remove the “Cart” item from the menu.

You then add the actual woocommerce cart button with the PHP snippet on this documentation:
https://docs.generatepress.com/article/move-woocommerce-cart-toggle-into-the-menu-items/

As for fixing the layout and alignment of secondary nav icons, consider doing this:

This is quite tricky to do considering how your secondary menu is structured. That said, let’s try to make it more conducive replicating your mockup image by moving the cart icon to the widgets along with the text widget and the LSI widget.

To do this, let’s make a portable cart icon link shortcode you can use on the widget area.

Add this PHP snippet:

add_shortcode( 'cart_icon', function() {
    ob_start();
    // Start your PHP below
  
    echo generatepress_wc_cart_link();
  
    // End your PHP above
    return ob_get_clean();
} );

With this PHP snippet, we can use [cart_icon] shortcode to display the cart icon anywhere.

We then insert a text widget with [cart_icon] in it on the same widget area you placed your LSI widget. Make sure the text widget with the [cart_icon] shortcode is added AFTER the LSI widget.

After doing this, you’ll notice you have duplicate cart icons. To remove the duplicate, go to Appearance > Customize > Layout > WooCommerce and uncheck “Display cart in menu” as shown here: https://share.getcloudapp.com/12uoJ4ZK

You should end up with a top bar widget area with 3 widgets which are:
1 Custom html widget
1 LSI widget
1 Text widget (for the [cart_icon] shortcode)

Once you’ve applied this, let us know so we could check the site again finish replicating the mockup with CSS. 🙂

[Sílvia]

Right.
This is done.
Let’s work with the CSS now.

Two more questions:
1. The cart icon seems to be a basket. Is it possible to change it into a trolley?
2. Is it possible to hide the amount of money added to the cart next to the icon?

Thanks for your help,
Sílvia

[Elvin]

For the top bar, Add this CSS:

nav#secondary-navigation.has-top-bar .top-bar, nav#secondary-navigation.has-top-bar .top-bar .inside-top-bar {
    width: 100%;
}

nav#secondary-navigation .inside-navigation {
    min-height: 80px;
}

nav#secondary-navigation ul.lsi-social-icons.icon-set-lsi_widget-3 > * {
    margin-bottom: 0 !important;
}

nav#secondary-navigation .toptext p {
    line-height: 17px;
}

nav#secondary-navigation aside#text-10 {
    overflow: hidden;
}

@media(min-width:769px){
nav#secondary-navigation aside#text-10 {
    display: none;
}
nav#secondary-navigation aside#custom_html-2 {
    margin-right: auto;
}
}

@media(max-width:768px){
nav#secondary-navigation aside#custom_html-2 {
    width: 100%;
    margin: 0 0 8px 0;
}

nav#secondary-navigation aside#lsi_widget-3 {
    margin-left: auto;
    margin-right: 0;
    order: 3;
}

nav#secondary-navigation aside#text-10 {
    display: block;
}

nav#secondary-navigation aside#text-10 .textwidget {
    margin: unset !important;
}

nav#secondary-navigation button.menu-toggle.secondary-menu-toggle {
    display: none;
}
}

1. The cart icon seems to be a basket. Is it possible to change it into a trolley?

Go to Appearance > Customize > Layout > WooCommerce and change the menu item icon from basket to cart.

2. Is it possible to hide the amount of money added to the cart next to the icon?

Not sure I see what you mean. Can you show a screenshot? Thank you.

[Sílvia]

Hi, Elvin.
Don’t worry about point 2, I’ve solved it somehow. You know, when yo add ab item to your shopping cart, there was the total amount of money you were expected to expend and I didn’t want it as I was afraid that the costumers could be scared of wasting too much money if they were buying a lot of items, so I have found Customize > Layout > WooCommerce > Menu Item Content > Number of Items instead of Amount, which I think is perfect. 😉
So, everything is fine except on tiny detail I would like to change about the text widget in the top bar area. I’d like the first line to be bold, and the second one lighter. To do this, I used to have a class .toptext for the 1st line to be bold, but now it doesn’t seem to work anymore. Can you please, help me to solve it?
Thanks a lot,
Sílvia

[Elvin]

So, everything is fine except on tiny detail I would like to change about the text widget in the top bar area. I’d like the first line to be bold, and the second one lighter. To do this, I used to have a class .toptext for the 1st line to be bold, but now it doesn’t seem to work anymore. Can you please, help me to solve it?

It doesn’t seem like it but the actual fonts are already in bold. And from inspecting it, you seem to have ALL of the fonts on secondary nav set to font-weight bold on Appearance > Customize > Typography > Secondary Navigation.

If you only want the .toptext to be bold, change this customizer setting to normal as shown here: https://share.getcloudapp.com/kpu7N4rB

[Sílvia]

Ups! Silly mistake. Done.

Once again, thanks a lot for your help!

Have a nice weekend,
Sílvia

[Elvin]

No problem. Glad you got it sorted. 😀

[Author]

Posts