[Resolved] Remove the URL from the menu cart icon

[Tim]

Hello,

I will try to explain this as best as I can 🙂

I am using WooCommerce and have activated Customizer > Layout > WooCommerce > Display cart in menu.

However, I am not using the default WooCommerce cart page, but this slideout cart plugin. It comes with a built in cart icon that I have disabled, as I want to use the one in the header to open the slideout cart.

According to the plugin developer, the code for opening the slideout cart is adding class="xoo-wsc-cart-trigger" to an element.

I tried using the code posted by Elvin here to append class="xoo-wsc-cart-trigger" to the icon and it works! Sort of…

Now, it appears that it’s at random whether clicking the cart icon opens the slideout cart or redirects me to /cart/ because the href is still applied to the icon.

My question is this; how can I remove the href attribute from the icon? I don’t want the icon to redirect to anything, as I am not using the stock cart page at all.

I have Googled this quite a bit and it appears that there is no way to remove it by traditional means. I have not found this specific bit of code in either WC’s or GP’s template/PHP files.

Can anyone point me in the right direction?

Thanks!

[Leo]

Hi Tim,

I wonder the solution here is to disable the cart option in the customizer and just add what you need as a normal menu item.

If you add this HTML for the menu label then you will get the cart icon as wel:

<svg viewBox="0 0 576 512" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
				<path fill="none" d="M0 0h576v512H0z"></path>
				<path d="M181.54 409.6c-29.249 0-52.914 23.04-52.914 51.2 0 28.16 23.665 51.2 52.915 51.2 29.249 0 53.18-23.04 53.18-51.2 0-28.16-23.931-51.2-53.18-51.2zM22 0v51.2h53.18l95.725 194.304-35.897 62.464C115.598 342.272 141.124 384 181.54 384h319.08v-51.2h-319.08l29.249-51.2h198.096c19.943 0 37.492-10.496 46.533-26.368L550.61 89.088c9.838-16.896-2.925-37.888-23.133-37.888H133.944L108.95 0H22zm425.442 409.6c-29.25 0-52.915 23.04-52.915 51.2 0 28.16 23.665 51.2 52.915 51.2 29.249 0 53.18-23.04 53.18-51.2 0-28.16-23.931-51.2-53.18-51.2z"></path>
			</svg>

Let me know if this helps 🙂

[Tim]

Hi Leo,

As per these instructions I have created a blank menu and assigned it to the primary menu in the theme.

Do you mean to add an item to the (now blank) menu?

What menu element in the WP menu builder do I use to accomplish this?

[Tim]

I added a custom link to the navigation with a # as URL and your code as the label. It works, I get a cart icon in the header.

But how do I add the class so that the cart opens? I tried wrapping the SVG code with <span class=”xoo-wsc-cart-trigger”>SVG code</span> but that didn’t do anything. I also tried adding <span class=”xoo-wsc-cart-trigger”></span> and then the SVG code, nothing happens then either.

Update: I had to enable CSS Classes under Screen Options > Show advanced menu properties and then add the class (xoo-wsc-cart-trigger) in the CSS class field. Now it works perfectly 😀

But…

1. Why does it not show on mobile?

2. How do I position it to the right like I got it working for the built in Cart icon enabled through the theme settings?. Right now it sticks to the top left and it pushes my hamburger menu into the logo.

[Leo]

Let’s handle one issue at a time.

Can you set the navigation location to float right first:
https://docs.generatepress.com/article/navigation-location/

Then remove the CSS Ying provided previously so we can get a fresh look?

Thanks.

[Tim]

Done! 🙂

[Ying]

Please remove this CSS as well:

.slideout-toggle {
  top: 43px;
  z-index: 1;
}

And then add this CSS:

.menu-bar-items {
    order: -1;
}
.xoo-wsc-cart-trigger {
    margin-left: auto;
}

For mobile:
1. Turn off the mobile header, check the Use navigation as header box at Customizing > Layout > Header.
2. Activate head
3. Change the Mobile Menu Breakpoint to 0 at Customizing > Layout > Primary Navigation.
4. Add this CSS:

@media (max-width: 768px) {
    .menu-bar-item.slideout-toggle.hide-on-mobile {
        display: block !important;
    }
}

Let me know 🙂

[Tim]

The settings for desktop fixed everything exactly like I want it, but as soon as I added your steps for mobile:

– Header on desktop is super small
– Header both on desktop and mobile lost their margin-top that I added earlier (via the customizer) to push them a little down
– Menu and cart icons should also be a little bit down, centered horizontally with the logo, like I used the .slideout-toggle css for that you asked me to remove
– Menu icon is gone on tablet view
– Mobile logo could be a little bigger also

Thanks, really appreciate all your help! 🙂

[Ying]

Try this CSS 🙂 Feel free to adjust the numbers.

@media (min-width: 769px) {
nav#site-navigation {
    padding-top: 40px;
}
.navigation-branding .site-logo {
    align-items: center;
    display: flex;
}
.navigation-branding .site-logo img {
    padding: 0;
}
}
@media (max-width: 768px) {
.slideout-toggle a {
    font-size: 18px;
}
.xoo-wsc-cart-trigger a {
    font-size: 18px;
}
.navigation-branding img {
    height: auto;
}
.navigation-branding .site-logo {
    margin-bottom: 0 !important;
}
}

[Tim]

Thank you Ying! That fixed the issue on desktop view. 😀

– On tablet, the menu icon is not visible and the logo image should have a bit less height
– On mobile, the logo appears to not be 100% centered, it’s a little to the left.

Would you happen to know the code required to fix these things as well? 🙂

[Ying]

For the tablet menu icon doesn’t show issue, remove this CSS:
https://www.screencast.com/t/4t3cHYp7e2

For the mobile logo not centered issue, I don’t see it.
https://www.screencast.com/t/xnx7KH4UFeP

Let me know 🙂

[Tim]

Of course, thank you! That CSS was added earlier to remove a duplicate menu. It shows perfectly now.

As for the logo on mobile, I guess it’s just an “illusion” 😛

Last question: Between approx 770 and 820 px in width, the logo is a little “dragged out” vertically.

It can be seen when I use the Chrome Developer tools and drag the side bar to adjust the screen size, the logo scales with the width but between those two values something is off.

Is that possible to fix somehow do you think?

Thanks.

[Ying]

Let’s change the height from this CSS to 59px

.navigation-branding .site-logo img {
    padding: 0;
    height: 70px;
}

70pxseems too high for the screen width from 770px and 820px.

Hope it works 🙂

[Tim]

Yes, perfect, thanks!

[Ying]

Nice!

Glad to hear that 🙂

[Author]

Posts