[Resolved] Display cart icon anywhere across the site

Home Forums Support Display cart icon anywhere across the site

  • This topic has 7 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1003160
    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

    #1003222
    David
    Staff
    Customer Support

    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';
    }
    #1003466
    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 🙂

    #1003467
    David
    Staff
    Customer Support

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

    #1003468
    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

    #1003632
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1003945
    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

    #1004306
    Tom
    Lead Developer
    Lead Developer

    Ah, you have this custom CSS:

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

    Instead, do this:

    .cart-contents .amount {
        display: inline-block;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.