Replace Add To Cart Button?

Store Builder Questions
1

Is there and easy way using css :before to replace all add to cart buttons? I mean for product details page, category grid and other views at once?

2

Is there and easy way using css :before to replace all add to cart buttons? I mean for product details page, category grid and other views at once?

What is the goal of this modification?

3

Well main idea is to make button smaller and not just using padding.

Basically it would be enough to replace add to cart text with some fontawesome icon. But from other point fontawesome icon can look good next to wishlist icon and compare icon without @primary-button and @secondary-button backgounds..

4

We have just tried the following code:

.ty-btn__add-to-cart {

font-size: 0px;

}

.ty-btn__add-to-cart:before {

content: “\e900”;

font-family: icomoon;

font-size: 20px;

}
result:

http://prntscr.com/d71tgk

You can use this idea

5

All works well, but how to remove .ty-btn__primary bg color & hover, also .ty-btn that adds padding from it?

display: none; somehow?

6

Try



.ty-btn__add-to-cart, .ty-btn__add-to-cart:hover {

font-size: 0px;

padding: 0 !important;

background: none;

} .ty-btn__add-to-cart:before {

content: “\e900”;

font-family: icomoon;

font-size: 20px;

}

7

This hides everything. Thanks for effort.

8

This hides everything. Thanks for effort.

Just add required color for the icons. Looks like you use white font with white background