Is there a way to remove the cart icon from the navigation bar?

[zay27]

Or only display it on certain pages? The ecommerce section of the site is seperate and password protected and I only want to display the cart icon on that page. 

[Adam7]

You can remove it entirely by changing your store mode to "buy now" (found in Store > Setup). If you want to hide it from specific pages only, you'd need to do that with some page-specific CSS overrides. Are you familiar with CSS at all, @zay27?

[zay27]

I've worked with css a bit, I wouldn't say I'm fluent but if you can point me in the right direction I think I can probably figure it out. 

[Adam7 · Accepted solution]

You can include CSS overrides to a specific page by adding them to that page's Header Code field (Pages > page name > SEO Settings > Header Code).  I don't know what class or ID would be used for the cart, but if you find it in code you can include it in a manner like this:

<style>

#cart { display: none !important; }

</style>

[zay27]

Thanks Adam! This worked perfectly, I just had to look at the source code and find the right id. I did the same thing for the login/my account button. Thanks for the tip!

[Adam7]

Awesome! Glad to hear you found what you needed and it's working.

[Rangerlike]

This looks like it might work for me as well, but I'm having trouble finding the cart ID in the source code. What is the best way to find that? I plugged in the script to the header override with what I thought was the ID and it didnt work.  Thanks for your help

[Adam7]

What browser do you use, @Rangerlike? Most modern browsers have a way to view source code to find that.

[Louanne1]

Hi Adam, I'm trying to do the same thing. I want to take the cart (and products!) off of a few of the pages. Trying to remove the cart for now on the Home page. 

Using your guidance on finding Chrome>Settings>Developer, I found code referring to the cart, but not knowing code, can you please tell me what from this I would insert into your Header CSS work-around?

This is what I see on my Home page (from Chrome, settings, developer):

<div id="wsite-mini-cart" class="wsite-cart-contents arrow-top arrow-top-left" style="display: none; position: absolute; left: 0px; top: 9px;"><ul class="wsite-product-list"><li><div class="wsite-empty-cart">Empty Cart</div>
</li></ul><div class="wsite-cart-bottom">
<div class="wsite-vertical-align wsite-subtotal-wrapper">
<span>Subtotal:</span>
<span class="wsite-price">$0.00</span>
</div>
<div class="wsite-vertical-align wsite-button-wrapper">
<a id="wsite-com-minicart-checkout-button" class="wsite-button wsite-button-highlight" href="https://www.globalgratitudesummit.com/store/checkout?cart=">
<span class="wsite-button-inner">Checkout</span><span class="wsite-button-chevron"></span>
</a>
</div>
</div>
</div>

Thank you!

Louanne Saraga Walters

www.globalgratitudesummit.com

[Adam7]

If you want to remove the cart from your navigation on a specific page, something like this should work in the Header Code field for the page on the Pages tab:

<style>
	#wsite-nav-cart-a
	{
		display: none !important;
	}
</style>

[Louanne1]

THANK YOU!!!!

[Gear]

Hello. I want also to remove the cart icon from the navigation bar to godday. I don't want to delete my online store. I want to have categories and products. But I don't want to sell yet. Did you find a way to remove it? 

[Bernadette3]

Hi @Gear

Are you wanting to link to your Go Daddy site in addition to removing the cart? I just want to make sure I'm understanding your request. 😊

Can you post a link to your website so I can take a look? 

[Juliafae]

As I deleted the product page and am not selling anythign whatsoever, is there a better way to get rid of the cart? Would rather take away than add.

[Adam7]

Open your site in the editor, @Juliafae, then go to the Store tab. Once there, go to Setup > Checkout > Advanced and change your store mode to Buy Now. This is still the best way to remove that even if you are not selling anything.

[Juliafae]

Thank you so much! The direct description of how to get there helped a lot.

[Adam7]

Not a problem!

[KB31]

This worked for me:

<style>
span.mini-items
{ display: none !important; }

</style>

[spiritoflight]

---

@KB3 wrote:

This worked for me:

<style>
span.mini-items
{ display: none !important; }

</style>

---

  I tried that yesterday and could not get it to work, but then I found an approach that brought to light that not all our carts have the same css tag designation. Your car is using "span" and mine seems to be called via an ID tag!

  When I looked at the published page in my browser and right-clicked on the cart and selected  *Inspect Element", I saw that the Cart was being called as id="wsite-nav-cart-a" (as shown above). So instead of using your format, I used the following and they both worked - adding them (one or the other) to the main_style.css under ASSETS!!

This one hides it and eliminates the space it was in.
#wsite-nav-cart-a { display: none !important; }

This method makes it invisible, but still takes up the space and "hover" still works unfortunately.

#wsite-nav-cart-a {visibility:hidden; !important; }

So, for others, trying that CSS cart hide approach. If his or my code method doesn't work, try inspecting the cart for its actual html ID name, then use the # in front of your css command.

Unfortunately, for me, when I use the first method display:none, there are two more page entry menu items before the cart. When the cart is  showing or just hidden, those two menut items are placed under an added "More..." menu item, then the cart is after that. But, if I use the display:none, then the two menu items get wrapped around directly below the left side of the first menu items above it. I don't know how to fix that issue yet.

[V-V]

Hi Adam,

Sorry, I'm not very code fluent, and so I was hoping to get some help in working out where to insert this code to remove the "CART" from my navigation bar. 

Is there also a possiblity to instead add this CART to the top of my webpage inside the header? 

Many thanks in advance,

V-V

[Adam7]

Moving where the cart is added would be a lot trickier than simply hiding it. If you just want to hide it, though, post a link to your website and I'm sure one of our Community members would have some ideas.