WooCommerce cart icon is not displaying even though the navbar cart feature is turned on

[Curiouser]

Hi, I’m having a problem displaying the WooCommerce nav bar cart icon using Cornerstone. When I turned on this navbar cart, nothing happened, and it’s not displaying on my website. What you see on the website right now is the custom links cart icon using the WordPress menu, but I want to be able to see the icon along with the cart total or the number of items in the cart using the navbar cart feature in Cornerstone. What should I do in the settings for it to appear on my website?

Website link: https://www.amytwon.com/

[prakash_s]

Hello @Curiouser,

Thanks for writing to us.

It seems that you are using the Pro theme custom header, where you have added a Font Awesome icon as text in the WordPress menu. I would suggest you please remove this menu item from the WordPress menu and add a Button element. You need to enable the Graphic option in the button element.

Add this "{{ woocommerce.cart_url }}"dynamic content code to the URL field for the Cart page URL.

Add dynamic content code to display the cart total or cart item total.

{{ woocommerce.cart_total }}
{{ woocommerce.cart_items }}

Select the cart icon from here.

Hope it helps
Thanks

[Curiouser]

Awesome! Thanks for the reply. I tested it out, and it is working as of now. However, one thing I noticed is that it messed up my layout. I hid it for now, but can you also help me align the cart icon alongside the blog text?

The layout should be something like this:

[prakash_s]

Hello @Curiouser,

I checked your site, and it seems that you have not added the Button element. Please add the button element and let us know. Alternatively, you may share the admin login details and exact Header URL so we can check it on our end.

Thanks

[Curiouser]

Hi, I appreciate the reply again. I’ve added the cart button to the website, and this is how it currently looks. Can you help me with the alignment? It’s messed up my whole navbar layout.

Link: https://www.amytwon.com/

[ruenel]

Hey @Curiouser,

Instead of using just 1 Container, add two more Containers in your Bar element. The structure would be like this:

Bar element
   Container 1
       Menu 1 for the left side
   Container 2
       Logo Image in the center
   Container 3
       Menu 2 for the right side
       Cart  Dropdown or Cart button

Hope this makes sense.

[Curiouser]

Hi, I followed your recommended structure for the nav bar layout, but the cart button is currently not showing on the page. What could be the issue here?

[tristup]

Hi @Curiouser,

The Cart icon is there, but due to the margin-left and margin-right added to the Navigation. I have temporarily removed the margin through the Browser Debugger and it starts showing. I would suggest you remove the custom CSS code to get rid of this problem.

Please remember that we don’t provide any support for custom coding and related issues.

NOTE: If you want to make the Navigation and the Logo center, you can achieve it using the Bar, Container, and the settings available on those elements.

Thanks

[Curiouser]

Hi, thanks for the reply. I managed to fix the layout for desktop, and although I didn’t use any custom code for the menu, I found that the margin is set to 450px on the navigation inline and not on the container.

Anyway, one more thing: since I have already applied it on the desktop, is there a way to apply the same cart feature on mobile? I see the navigation modal, but it doesn’t allow me to customize it, like adding the cart. I appreciate you taking the time to address this issue.

[prakash_s]

Hello @Curiouser,

I would suggest you please use the Navigation Off-canvas element, where you can add the Navigation Layered element and Button element for the mobile screen.

It appears that you have added margins to the left and right of the Header Bar 1 and Header Bar 3. Please check it.

Hope it helps
Thanks

[Curiouser]

It’s fixed now. Thank you all for your help, and I appreciate the time you took to address my issue.

[ruenel]

You aremost welcome, @Curiouser.