Change all cart icons

Hello,

I want to change all cart icon in my website not only cart page also add cart and all other cart icons

Hello,

For the Add to cart button on the Shop, page buttons try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-add-btn-replace .add-to-cart-loop:before {
content: "\f123";
    font-family: woodmart-font;
}

For the Sidebar Empty Cart Cart Icon try adding the following Custom CSS.

.cart-widget-side .widget_shopping_cart .empty:before {
    content: "\f147";
    font-family: woodmart-font;
}

For the cart page empty text icon:

.cart-empty:before {
    content: "\f147";
    font-family: woodmart-font;
}

You can change the cart icon in the header by editing the cart element from Woodmart >> Header Builder.

Screenshot for Clarification: https://prnt.sc/x3x2bl

If you are trying to ask anything else then please provide with some relevant screenshots of the specific area to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hello where should I put my svg icon link?

https://ibb.co/HhWszbJ
https://ibb.co/cJJzKR6
https://ibb.co/0Y9KJqm
https://ibb.co/6y0800n

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-hover-quick .woodmart-add-btn>a:hover:before {
    content: "";
    background: url(https://website.com/wp-content/uploads/2021/01/img-sepet-251251.svg) no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    margin-left: 45%;
}

.cart-widget-side .widget_shopping_cart .empty:before {
    content: "";
    background: url(https://website.com/wp-content/uploads/2021/01/img-sepet-251251.svg) no-repeat;
    background-size: contain;
    height: 70px;
    width: 70px;
    margin-left: 35%;
}

.cart-empty:before {
    content: "";
    background: url(https://website.com/wp-content/uploads/2021/01/img-sepet-251251.svg) no-repeat;
    background-size: contain;
    height: 100px;
    width: 100px;
    margin-left: 46%;
}

You can try adjusting the margin value according to your needs.

Best Regards.

Hello, thank you for answer I added code to custom css area icon changed but this time every time hover happens icon changes to old version

see in this video: https://gyazo.com/005705e3db8884371c86974aa8ad5043

also how can I center cart icon?

https://imgbb.com/

it shows on top

There is also on mobile verion: https://gyazo.com/947f184e100361a24a6d58573d6f4bb2

Header builder cart icon not showing (svg)

https://ibb.co/b57xYpN

Hello,

I saw the screenshots you attached.

Please move the Custom CSS I provided to Custom CSS for the Desktop area under Theme Settings >> Custom CSS.

And provide with the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hello, please check private content

Hello,

How can I get this icon?

https://ibb.co/wdvkGLm

The reason I want to change all the icons. I want all of them to be the same. If I can get this icon I can make it all icons same.

Hello,

I saw the screenshot you attached.

The icon you mentioned is the same for mobile and desktop on the shop page. Therefore to get the same icon on the sidebar cart and the cart page.

Please remove all the previous CSS I provided and try adding the following in the Global Custom CSS area under Theme Settings >> Custom CSS.

.cart-widget-side .widget_shopping_cart .empty:before {
    content: "\f123";
    font-family: woodmart-font;
}

.cart-empty:before {
    content: "\f123";
    font-family: woodmart-font;
}

And for the header you can change the icon by editing the header.

Best Regards.

Hello, this is same icon right?

https://ibb.co/TckmFWP

Hello,

I saw the screenshot you attached.

Yes the icon you mentioned is the same as you required.

Best Regards.

Hello, what is exact size and width for cart icon? I want to make it same as wishlist and compare icon

https://ibb.co/k8Q0Jgr

Hello,

I saw the screenshot you attached.

The Icon you are trying to add as SVG is already available in the header builder. You can try changing the icon from there.

Screenshot for Clarification: https://prnt.sc/x9lnqv

Regards.
Xtemos Studios.

I dont want to use default cart icon I want to use this one: https://ibb.co/k8Q0Jgr

What is excact width and height for header icons?

Hello,

The fonts used by means of font-size.

You can try using a 25x25px icon then clear cache and check back.

Regards.
Xtemos Studios.

Hello whats name of this icon?

https://prnt.sc/x9lnqv

Hello,

I saw the screenshot you attached. This icon is from the default WoodMart font family. And the content used for the icon is as follows:

content: "\f123";
font-family: woodmart-font;

Best Regards.

hello,

unfortunately it’s not the same icon.

I need this icon code: https://prnt.sc/x9lnqv

Another staff helped me thank you.

Hello,

We are thrilled that you loved your experience with XTEMOS,
We put customer experience and satisfaction as our priority, and your words reaffirm the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts