Return to previous page

Hello how can i edit the icon of add to cart button?

This topic has 6 replies, 3 voices, and was last updated 1 years, 4 months ago ago by Rose Tyler

Tal

Participant

August 20, 2023 at 21:27

hello

1. how can i edit the add to cart icon to my svg one?
here :
https://prnt.sc/GzfN0HuMgi20

and in single product too:
https://prnt.sc/VCH_zCs84jnH

2.how can i edit the color of this element in search? :
https://prnt.sc/JZ0y0SWZTbTt

thank you!

#365067 Copied Theme version: 9.1.4 WooCommerce version: 7.7.0

5 Answers
Tony Rodriguez

Support staff

August 21, 2023 at 06:14
Hello, @Tal,

Thank you for contacting us and for using XStore.

1. We regret to inform you that currently, it is not feasible to modify the ‘Add to Cart’ icon to an SVG icon. However, we would like to suggest an alternative solution. You can utilize the XStore icons available at https://xstore.8theme.com/xstore-icons/ by implementing the custom CSS code.

Should you wish to replace the ‘add to cart’ icon with one from XStore, kindly inform us of your preferred icon. We will then provide you with a custom CSS code to address your requirement.

2. In order to solve your issue, Please copy and paste the following CSS code to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache.The result should look like this: https://imgur.com/ooHDLU0
```
.et-content-dropdown .ajax-results-title {
background-color: red !important;
}
```
Note: you may change the following background color CSS code as per your requirement.

We trust this will be of assistance to you.

Best Regards,
Team 8Theme.
#365077 Copied
Tal

Participant

August 21, 2023 at 10:17

hey.
1. i want to change it to this icon :
et-shopping-cart-2

e90d

can u send me css for this?

2.thank you !

#365104 Copied
Rose Tyler

Support staff

August 21, 2023 at 10:59
Hello, @Tal,

Thank you for your response.

Please use the next custom CSS code:
```
.et_cart-type-2 .footer-product .button:before, .et_cart-type-2 .single_add_to_cart_button:before, .et_cart-type-2 .quantity-wrapper .button:before, .et_cart-type-2 .product-view-overlay .quick-buttons .button:before {
    content: "\e90d";
}
```
Best Regards,
Team 8Theme.
#365114 Copied
Tal

Participant

August 21, 2023 at 11:36

hey
this code dont work for me :

.et-content-dropdown .ajax-results-title {
background-color: red !important;
}

its not change the color of this :
https://prnt.sc/JZ0y0SWZTbTt

#365118 Copied
Rose Tyler

Support staff

August 21, 2023 at 12:18
Hello, @Tal,

Thank you for your response.

Please change this https://prnt.sc/Gy9L2CVXusAT to
```
.et-content-dropdown .ajax-results-title {
    background-color: #FF433D !important;
}
```
Best Regards,
Team 8Theme.
#365126 Copied
Tagged: custom cart button woocommerce, customize add to cart, edit cart button icon, woocommerce button icon change, woocommerce themes modification, wordpress cart icon editing, wordpress woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)