Make Woo "added to basket notification" persistent

Hi there,

you can create a Block Element:

https://docs.generatepress.com/article/block-element-hook/

and use that to display your cart message and link.
Set the Hook to after_header and set its Display Rile Location to the Entire Site

Whilst you're editing the Block element, look at the URL in the browser search bar, in the URL you will see ID=XX. Make a note of the ID number.

Then add this PHP Snippet to your site to remove your block element when the cart is empty :

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && WC()->cart->is_empty() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Change the 100 to match your Elements ID.

Wow, looks great.

I'll have a proper look at that later.

Thanks
Stephen

Hi, I've looked at this and I dont think its going to work as I'd like.

Woocommerce already adds some cart notifications so if add this one then there will be extra cart notifications.

Any ideas how I can make the cart very obvious for tablets and mobile phones ?

There are some cart plugins I could use but I try to avoid extra plugins if I can.

Thanks
Stephen

It seems you are using custom code to make the cart become a part of the primary navigation.

Would you like to add the shopping cart next to the search icon on mobile?

If so, can you share the code you are using?

Hi, thanks yes that was with your code.

Maybe I could have a slim "items in cart" notification appear above the header on mobile device screen sizes?

Thanks
Stephen

Then I think David's solution would work, you can deactivate the theme's notification to avoid the duplicated message at:
Cusotmizer > layout > Woocommerce > shop, uncheck the Display cart panel on add to cart box.

great thanks ill look into that

Let me know if you run into any issue regarding the solution :)

Hi, I've used a Hook with shortcode to display a cart icon in mobile header.

As the mobile header is now a bit crowded how can I hide the search icon in the mobile header please ?

Thanks
Stephen

And can I hide the search icon in mobile header just for mobile phone screen size ?

Thanks
Stephen

how can I hide the search icon in the mobile header

Try this CSS:

@media (max-width: 768px) {
#mobile-header span.menu-bar-item.search-item {
    display: none;
}
}

Thats superb - Thank you very much

You are welcome :)