Archived topic
Show Cart Icon and Amount in Mobile Menu
4 replies · Started by antware on October 19, 2021
Hi guys, I really need to have the cart icon and whatever amount is shown to be part of the primary mobile menu dropdown. I've managed to get it to work perfectly on desktop, but on mobile view it is separate from the menu and I need it to the last item on the mobile dropdown. Is there a Filter or Hook to enable this? Please refer to the dev site (in Private Information) to see what I'm talking about.
Have provided a screenshot of what I'm wanting. I had to hide the basket using display: none to make the screenshot mentioned in the Private Area.
Hi there,
Give this solution a try:
1. Add this PHP snippet to create a shortcode for the cart [custom_cart] and allow shortcode in navigation menu item:
Adding PHP: https://docs.generatepress.com/article/adding-php/
function generate_woo_cart(){
ob_start();
if ( ! class_exists( 'WooCommerce' ) ) {
return;
}
if ( ! isset( WC()->cart ) ) {
return;
}
$has_items = false;
if ( ! WC()->cart->is_empty() ) {
$has_items = 'has-items';
}
printf(
'<span class="menu-bar-item wc-menu-item %2$s %3$s">
%1$s
</span>',
generatepress_wc_cart_link(),
is_cart() ? 'current-menu-item' : '',
$has_items
);
return ob_get_clean();
}
add_shortcode('custom_cart', 'generate_woo_cart');
add_filter('wp_nav_menu_items', 'do_shortcode');Then add an custom HTML menu item, add this code as the navigation label:
<div class="hide-on-desktop hide-on-tablet custom-cart">[custom_cart] </div>
https://www.screencast.com/t/duhycbdDnv
Let me know how it works :)
OMG Ying, that worked, you're a rockstar !!! Thank you so much...
Glad it works :)
You are welcome!
