Home › Forums › Space themes support forum › How to customize cart canvas and open it by link?

How to customize cart canvas and open it by link?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 20, 2024 at 8:31 am #550539

    Christian |cswebdesigns
    Participant

    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.
    March 20, 2024 at 6:18 pm #550795

    Luke Nielsen
    Keymaster

    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

    April 17, 2024 at 12:50 pm #557959

    Christian |cswebdesigns
    Participant

    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.
    April 18, 2024 at 5:46 pm #558590

    Luke Nielsen
    Keymaster

    Hello,

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

    Thank you in advance.

    Kind Regards

    April 18, 2024 at 8:16 pm #558629

    Christian |cswebdesigns
    Participant

    See extra information please

    April 23, 2024 at 11:50 am #559772

    Luke Nielsen
    Keymaster

    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

    April 24, 2024 at 8:14 am #560073

    Christian |cswebdesigns
    Participant

    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.

    April 24, 2024 at 5:48 pm #560356

    Luke Nielsen
    Keymaster

    Hello,

    2. Try to use the code below:

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

    Let me know the result.

    Kind Regards

    April 24, 2024 at 6:21 pm #560370

    Christian |cswebdesigns
    Participant

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

    THANK YOU!

    April 24, 2024 at 6:36 pm #560373

    Christian |cswebdesigns
    Participant

    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.
    April 26, 2024 at 4:28 pm #561108

    Luke Nielsen
    Keymaster

    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
Viewing 11 posts - 1 through 11 (of 11 total)