[Resolved] Login, Search & Cart Icons in the Header for Desktop

[Georgi]

Hello GP team,

I tried to find a solution using the forum results but I got more confused.

What I’m trying to achieve is have a login, search & cart icons in the header for dekstop like this: https://prnt.sc/26v1ict

Can you help me achieve this?

For the protocol – I don’t have a user login/registration icon, can you help maybe sort this out first?

Thank you in advance people!

[Fernando]

Hi Georgi,

For the login/registration buttons, you would need a third party plugin.

Here is one referred by Tom: https://en-ca.wordpress.org/plugins/baw-login-logout-menu/

As for the WooCommerce cart menu item, here is an article you may refer to: https://docs.generatepress.com/article/woocommerce-overview/

Moreover, here is a video you may refer to if your looking for assistance with regards to using custom SVG icons: https://www.youtube.com/watch?v=wdzFximLiQs

Lastly, you may use this hooks visual guide for reference as to where you should hook these buttons: https://docs.generatepress.com/article/hooks-visual-guide/

Hope this helps! 🙂

[Georgi]

Hi Fernando,

Thank you for responding.

I inspected visual guide for hooks and it seems that the icons cannot be in same place as in the example I gave. Is that correct?

[Ying]

Hi Georgi,

You can use generate_after_header_content hook.

[Georgi]

Hi Ying,

I just did a test by adding the hook and an example text and it shows up under the logo https://prnt.sc/26w7nqc

Can it be made to the right side and on the same line as the logo if I were to use icons? And also, can it be only to work for dekstop users? I don’t see such an option in the display rules.

[Ying]

Can you link us to your site so we can provide some custom CSS?

[Georgi]

Site in private area. Thank you.

[Ying]

Currently your text content is just text, can’t target it with CSS.

Are you using a hook element instead of block element?

If so, it will require more CSS and HTML along the road to reach your target.

Can you try using block element?

[Georgi]

Yes, I’m using a hook. I added a quick text content to see if it can be done first, didn’t know it had to be an icon.

Can you help with adding an icon for the my account page before trying to move it? I placed the icon code <i class=”fa-solid fa-user”></i> in the hook but nothing appears. Sorry, I’m a newb 😀

[Ying]

No it doesn’t have to be an icon to be targeted, anything other than pure text would do.

The icon code is from Fontawsome? If so, you would need to install Fontawsome plugin.

If you don’t want to install the plugin, then use the SVG code and make it something like this:

<span class="account-icon">
  <a href="your-login-link ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"></path></svg>
  </a>
</span>

Then add this CSS:

span.account-icon svg {
    width: 20px;
}

span.account-icon {
    position: absolute;
    right: 0;
}

[Georgi]

Thanks, it worked! 🙂

Can I ask how do you create this code for font awesome icons without the use of plugin? So I don’t bother you to create again?

Also how can I move the cart to be there too, on the right side of the user icon for dekstop devices only?

[Ying]

When you click on an icon on Fontawsome, choose the Copy SVG code option.
https://www.screencast.com/t/Vq5JC2qWvD5

Also how can I move the cart to be there too, on the right side of the user icon for dekstop devices only?

1. Add this PHP snippet to create a shortcode for the cart [custom_cart]:
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');

2.Add this code to the same hook element, remember to tick the execute shortcode box.
<div class="hide-on-mobile hide-on-tablet custom-cart">[custom_cart] </div>

3. Add this CSS:

@media (min-width: 769px) {
    .wc-menu-cart-activated.main-navigation span.menu-bar-item.wc-menu-item {
        display: none;
    }
}

[Georgi]

Okay, I followed all the instructions. Added the php snippet via the code snippets plugin, added the code to the same hook element: https://prnt.sc/26xqfxo

And added the CSS via the Customizer.

But the cart disapparead.

Did I miss something?

[Ying]

Sorry there was a mistake in the previous CSS.
I’ve updated it here: https://generatepress.com/forums/topic/login-search-cart-icons-in-the-header-for-desktop/#post-2121742

And here’re some more changes:

1. Change the account icon HTML to this, I addedgp-icon class to it, so it will follow the GP icon style.

<span class="account-icon gp-icon">
  <a href="your-login-link ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"></path></svg>
  </a>
</span>

2. Add this CSS to position the shopping bag:

.inside-header .custom-cart {
    position: absolute;
    right: 90px;
}

3. Change this CSS:

.span.account-icon {
    position: absolute;
    right: 0;
}

to this, so the account icon doesn’t goes to the edge of the screen:

.inside-header span.account-icon {
    position: absolute;
    right: 40px;
}

4. Remove the hide-on-tabletclass from the HTML code of the shopping bag. (Step 2 of my last reply).

Let me know if it works well this time 🙂

[Georgi]

Okay, so the cart showed up at the correct place but the account icon went under the logo: https://prnt.sc/aqEbyYBu6lfJ

[Author]

Posts