How to customize cart canvas and open it by link?

Hi,

01.: How can I customize the cart canvas? See screenshots attached.

02.: How can I open the cart canvas by click as e.g. https://space.xtemos.com/demo/tethys/shop/? Which URL do I need for this? Why I need that: My client doesn’t want to have the cart icon in the menu but just the word “bag”. So I had to replace the cart widget in the menu by a html. If you want a look to understand, see private content.

Attachments:

You must be logged in to view attached files.

Hello,

1. If the template does not need to be changed, it’s possible via custom CSS code.

2. It’s impossible, unfortunately, because the off-canvas sidebar cart is opened using js “onclick” for classes.

Kind Regards

Hey Luke,

1. I think you missunderstood what I want here. I just want to have it as in the template – see attached. It looks completely different and I don’t know why.

2. Ok, that means I have to use the cart widget in the header builder. Is it possible to show this only as text “BAG” in the menu? No numbers, no currency, only the text “BAG”.

Attachments:

You must be logged in to view attached files.

Hello,

Please update the temporary access so we can check your settings.

Thank you in advance.

Kind Regards

See extra information please

Hello,

I apologize for the delay.

1. In order to change the side cart template, navigate to Elementor -> Settings -> Integrations and disable the “Mini Cart Template” – https://prnt.sc/pBA0NvvLManQ

Then if you have some products in the side cart, you need to remove them and add a new one to recheck the issue.

2. Yep, in the Header builder -> edit the “Cart” element and set the smile design – https://prnt.sc/7W_FOcEpGYbM

Kind Regards

Hi Luke,

1. Thanks you, that looks good now 🙂

2. I think you missunderstood. Here the requirement again: Is it possible to show this only as text “BAG” in the menu? No numbers, no currency, only the text “BAG”. So it should look like this but open the side cart: https://imgur.com/a/TOD3nl6

Hope we can fix this as well.

Hello,

2. Try to use the code below:

.xts-header-cart .xts-icon-cart:before {
    content: 'bag'
}

Let me know the result.

Kind Regards

Works. After a bit of styling via css it’s perfect – exactly what I need.

THANK YOU!

Only a small thing left: Do you remember the ticket about changing font color when hovering? Here the URL: https://xtemos.com/forums/topic/how-to-change-font-color-of-the-header-when-hovering-the-section/

Usually I am working with the overlay header but on the shop it is the main header with white background. Now the BAG is not visible there (only on the shop page).

How can I fix this? 🙂

Attachments:

You must be logged in to view attached files.

Hello,

Add this line of code to your custom via comma – https://prnt.sc/lCGjQtCvnb0P:

body:is(.single-product, .woocommerce-shop) .xts-header .xts-header-scheme-light .xts-header-el .xts-header-el-label {
    color: #1a1a1a
}

Let me know the result.

Kind Regards

[Author]

Posts