[Resolved] Change cart menu and breadcrumb

[Caroline]

Hi.
I want to change some things on my shop but need some help.
1. I want to change is the word “hjem” in my breadcrumbs too “alle produkter”.
2. Change the placing of the cart in my menu
3. Change the text next to the cart symbol to (item count) price.

I try to add a picture of the changes I want

https://ibb.co/cU6qGp

[Caroline]

I also wonder if it is possible to get the page with product to look like this?
http://themes.kadencethemes.com/virtue/shop/

[Tom]

Hi there,

1. Are you using a specific plugin for breadcrumbs? This is usually handled within the breadcrumb options.

2. So you want the cart and search bar to be in its own bar below the navigation?

3. Perhaps something like this will help?: https://generatepress.com/forums/topic/adding-a-cart-icon-with-number-of-items-and-total-cost-in-nav-menu/page/2/#post-468909

4. What about the products do you like there?

[Caroline]

1. No I dont use a plugin for breadcrumb. Just choose to show it in GP woocommerce section.

2. No I want the navigation to look like the part under my original navigation. So change the one so it looks like the example under.

3. That only shows the number of items, and it dont auto update when you add more to the cart.

4. I like the way the product shows https://ibb.co/cwrnE9

[Tom]

Got it.

1. This should help: https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/

2. To move the cart to the left, add this CSS:

nav li.wc-menu-item {
    float: left;
}

3. Give this a shot: https://gist.github.com/generatepress/d52d96cf98522b815fcde4892b573d0e

4. The full width/no padding image along with the full width add to cart button?

[Caroline]

I just answer number 4 and will try the rest later today 🙂

I like the full width/no padding image along with the full width add to cart button, but also the frame around and that the product title are so close to the image. I dont use ratings so the add to cart and price will get closer to the product title as well.

I also wonder if I can change the text on the add to cart button as well?

[Caroline]

I had to try the others now and It works great 🙂
On my cart in the nav it now says 1 kr80.00 (inkl. mva) Can I change it to say (1)-kr80.00 like the first image I add.

And can I get the prices in the navigation to show grand total? So it shows the price the customer have to pay independent of my tax settings in cart and checkout pages?

[Tom]

Just updated the code to include brackets: https://gist.github.com/generatepress/d52d96cf98522b815fcde4892b573d0e

Then use this CSS to add a dash:

.amount:before {
    content: " - ";
}

.cart-contents > span.amount {
    margin-left: 0;
}

So you want the navigation to show the total including taxes? Doesn’t the user need to input their details in order to get the grand total?

To change the add to cart text, you can do this: https://stackoverflow.com/a/43046121/2391422

Can you link me to your shop as it is now? Then I’ll be able to give you some CSS to achieve a similar layout to the one you’re looking for.

[Caroline]

So you want the navigation to show the total including taxes? yes
Doesn’t the user need to input their details in order to get the grand total? I dont think so. I only sell to Norway and we only have one taxrate here

I have added my website to the first post. Its not done so I will put on the coming soon setting again soon.

[Tom]

Try something like this:

.woocommerce .wc-columns-4 ul.products li.product {
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.woocommerce ul.products li.product .button {
    width: 100%;
    box-sizing: border-box;
}

I took a look around but I’m not sure about the grand total – you may need to ask WooCommerce support. I *think* the grand total is only calculated on the cart page.

[Caroline]

what about just have the price in navigation to show the total including taxes? And remove the text in navigation that says included taxes?
Also wonder if it is posible to show the price even if it is 0.

And When I use the css I get this message in yellow “Using width with border can sometimes make elements larger than expected”
And it looks strange on my mobile

[Tom]

That’s the part I’m not sure about. I’m not seeing a function that outputs the price including the taxes.

I’ve updated the code to include the price even if it’s 0: https://gist.github.com/generatepress/d52d96cf98522b815fcde4892b573d0e

I also updated the code above to fix it on mobile: https://generatepress.com/forums/topic/change-cart-menu-and-breadcrumb/#post-687282

[Caroline]

Thank you so much for the help. I have asked WooCommerce support now, so just waiting for them to reply. You dont know how to remove the text that says (including tax) behind the amount either?

[Tom]

That doesn’t appear for me on your site? Perhaps it’s a setting you have checked within the WooCommerce settings?

[Caroline]

I had set it to show price without tax in cart page so the amount in the navigation was without too. But I have changed it now.

[Author]

Posts