Return to previous page

Add to cart – Button -> Icon and other Button-Style

This topic has 7 replies, 2 voices, and was last updated 6 years, 4 months ago ago by Olga Barlow

Tagbag

Participant

August 7, 2018 at 12:41

Hey,

First of all, there is a little mistake on your preview set of “Add to Cart”-Button:

The button on the bottom left is missing the padding ^^

1)
But my first question would be:

how can I add the icon to the “Add to cart” button? I’ve been with: after trying. But did not succeed ..

It should looks almost like that:

2)
Next question would be how to install the presets set from the “Add to Cart” button in general.

I think this is totally good for example:

3)
Next question would be: Could I also change the icons? Or would that require additional programming?

Regards
Joey

#197785 Copied

6 Answers

Tagbag

Participant

August 7, 2018 at 12:43

1) * I’ve been with: after trying

–> i tried it with :after^^ my bad, sorry

#197786 Copied
Olga Barlow

Support staff

August 8, 2018 at 10:34
Hello,

Very strange but we don’t see that problem https://gyazo.com/bafaca03ede5eb764ff8c3906a447c2d
What browser do you use and what version?

1) Try this one
```
.single_add_to_cart_button:after {
    content:  "\e916";
    font-family:  'xstore-icons';
    transition: inherit;
    padding-left: 7px;
}
```
2) This is Massive Addons element and can be used as the individual button only. To install button preset go to Massive Panel > Style Presets > WC Add to cart http://prntscr.com/kg3tix and find “Full Bright Red To Dark Red” style. Install it and then you can use it http://prntscr.com/kg3vbn then just change colors.

3) Go to Theme Options > General > Header Settings > Cart icon > choose the icon that is most suitable for you. If you want to change the icon to your custom icon then some additional customization is required.

Regards
#197814 Copied
Tagbag

Participant

August 8, 2018 at 11:46

Hey,

When I go to the page, the button now looks normal. I use Chrome. Rly strange ^^

1) Thank u. Is there a list of “xstore-icons”?

2) Awesome. I will to try it ..

3) actually meant custom icons. But that is not that bad, the given look good too.

Regards

#197825 Copied

Olga Barlow

Support staff

August 8, 2018 at 13:35

Hello,

You are welcome.
1) We don’t have the list of xstore icons at this moment. For the cart icon you can use one of the following contents:
content: “\e90c”;
content: “\e90d”;
content: “\e916”;
2), 3) great.

Regards

#197830 Copied

Tagbag

Participant

August 8, 2018 at 13:42

Can u tell me where i can find the add to card settings? From your second screenshot

Regards

#197834 Copied

Olga Barlow

Support staff

August 8, 2018 at 14:16

Hello,

Install and activate Massive Addons plugin. Go to Massive Addons > Massive Panel > Easy Mode > Off.
Then go to Pages > edit page where you want to add that button and use Add to cart element http://prntscr.com/kg76ki

Regards

#197838 Copied
Viewing 7 results - 1 through 7 (of 7 total)