[Resolved] Display cart icon anywhere across the site

[Suren]

Hi,

I am looking to add the cart icon floating right in the top bar. Is there a shortcode or something to insert the built-in cart icon anywhere in the site?

Other than that how can I make the number of items in the cart visible at all times (even if the cart is empty) along with the value of items in the cart like this (https://cl.ly/9a0b55e96e6b)?

Thanks for your help

[David]

Hi there,

you can activate the Menu Cart in Appearance > Layout > Woocommerce. Select to show product count. And then add this CSS to display the Price:

.cart-contents .amount {
    display: block;
}

You can relocate the Cart icon to the Secondary navigation if you want it above your primary nav using this PHP snippet:

add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
    return 'secondary';
}

[Suren]

Thanks for your response, David. A couple of follow up questions:

1. How can I make the price appear to the left of the cart icon? https://cl.ly/25079bd30406

2. On a tablet and mobile, how can I make the secondary navigation appear in the primary navigation itself? https://cl.ly/ed9ff10bfeeb

3. I also want the cart to display the number of items as 0 when there is no item in the cart. How can I do that? https://cl.ly/25079bd30406

Thanks 🙂

[David]

Can you link me to your Site? So i can see if its possible.

[Suren]

Here’s the link: https://wordpress-263742-958263.cloudwaysapps.com

Its currently under development though.

If possible, can we also add a message when the cart is empty? Something like this: https://cl.ly/0cca7b86e2b1

[Tom]

Hi there,

1. How can I see this? I’m not able to replicate that screenshot.

2. Are you wanting the primary menu to have the same items as the secondary nav on mobile? If so, you’d need to:

Add the items to the primary navigation, but give them custom classes: hide-on-desktop hide-on-mobile

Then you’d hide the secondary nav on mobile:

@media (max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}

3. Try this:

.cart-contents > span.number-of-items.no-items {
    display: inline-block;
}

.cart-contents > span.number-of-items.no-items:before {
    content: "0";
}

4. Give this a shot:

.wc-menu-item:not(.has-items) .wc-mini-cart {
    display: block;
    text-align: center;
}

[Suren]

Awesome Tom, as always! Everything worked like a charm. As for the first point regarding the pricing thing, please visit the below URL and try adding some items to the cart. You’ll notice that the cart total displays below the cart icon while I want it to appear on the left of it.

https://wordpress-263742-958263.cloudwaysapps.com/

Thanks

[Tom]

Ah, you have this custom CSS:

.cart-contents .amount {
    display: block;
}

Instead, do this:

.cart-contents .amount {
    display: inline-block;
}

[Author]

Posts