[Resolved] Add cart icon and login/signup button next to search bar

[Tan]

Hi there,

On the desktop version, I want to move the cart icon and the login/register button up, right next to the search bar like this example (please help me add People icon next to login/sign up button like them). But I want to hide it on mobile version.

I want the login/sign up button on my homepage currently to only appear on mobile, not on desktop and tablet.

I am using Prime template. How can I do that?

Thank you so much.

[David]

Hi there,

you would need to use the Secondary Navigation.
Set your Login links in a new menu and set its Location to the Secondary Nav.
Then in Customizer > Layout > Secondary Nav – set its location to Float Right.

Then you need to move the Cart Menu to the secondary nav – this article explains how:

https://docs.generatepress.com/article/generate_woocommerce_menu_item_location/

[Tan]

Thank you David.

On mobile, I want to hide secondary menu (and hambuger icon) but not the cart icon. What can I do now?

And my logo on mobile is so small. How can I adjust it?

[David]

Add this CSS:

@media(max-width: 768px) {
    .inside-header .secondary-navigation.has-menu-bar-items .menu-toggle {
        display: none;
    }
    .secondary-nav-float-right .inside-header  .secondary-navigation {
        width:  auto;
        margin-top: 0;
    }
}

[Tan]

Thanks David. It works like a charm. But mobile logo is still so small 🙁

[David]

Its a tricky one – as the Woo Search field has a minimum width.
You could try this CSS:

@media(max-width: 480px) {
    .site-logo {
        margin-right: auto;
    } 
    .inside-header {
        flex-wrap: wrap;
    }
    .woo-search {
        order: 10;
        margin-left: 0 !important;
        margin-top: 5px;
    }
}

That will move the search field below the logo and cart icon on screens smaller than 481px

[Tan]

Sorry David, now I want to add cart icon on menu bar on mobile. I don’t want it show on secondary menu on mobile (desktop ok).

I am using hook to add Login/Sign up button on menu bar on mobile version:
<div class="menu-addon hide-on-desktop hide-on-tablet"><a href="https://tadamart.vn/tai-khoan/">Đăng nhập | Đăng ký</a></div>

I think I should add html cart icon with the link to cart into that hook. Is that right?

Can you help me?

[Ying]

Hi Tan,

I guess your solution can work if you don’t need the cart icon to show items number in cart.

If you need the functions, try add this PHP snippet, then use CSS to hide it on desktop:

add_action('generate_menu_bar_items','generate_woo_cart'); 

function generate_woo_cart(){
	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
	);
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Tan]

Thank you Ying. It works :D.

How can I add CSS class to below code to hide cart icon on mobile?

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

[David]

You can remove the secondary nav cart icon with this CSS:

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

Adjust the max-width value to choose where it should disappear.

[Tan]

Thank you, David. You’re awesome! 🙂

[David]

Glad we could be of help!

[Author]

Posts