Return to previous page

Is it possible to use an icon instead of text in Design type: Default when the setting: Add to cart

This topic has 6 replies, 2 voices, and was last updated 2 minutes ago ago by Luca Rossi

Goostaf

Participant

December 13, 2024 at 17:45

Sorry for the many questions..Is it possible to use an icon instead of text in Design type: Default when the setting: Add to cart with quantity is turned off? If we turn this option on, instead of text there will be a cart icon, but we don’t need this feature, and we want to see an icon instead of text to fit in front of the price, is it possible?

Files is visible for topic creator and
support staff only.

#427537 Copied Theme version: 9.4.5

5 Answers
Luca Rossi

Support staff

December 16, 2024 at 09:48
Hi @Goostaf,

The fastest way is using the custom CSS codes, please try adding this custom CSS codes:
```
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 6px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 6px;
}
```
https://prnt.sc/qG7CC5PofNhD

Let us know how it goes!
#427643 Copied
Goostaf

Participant

December 16, 2024 at 14:34

Thanks, is it possible to square the button? It’s like it’s rectangular now, the same as when Add to cart with quantity is enabled

#427699 Copied
Luca Rossi

Support staff

December 17, 2024 at 07:54
Dear @Goostaf,

We can force the width & height of the buttons:
```
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
    width: 40px;
    height: 40px;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 8px;
}
```
https://prnt.sc/JxTkkEqCMRkw

Hope it helps!
#427756 Copied
Goostaf

Participant

December 19, 2024 at 09:21

its thanks, but now how to move to the right against the price, so that it would be the same as with the enabled setting Add to cart with quantity (screenshot)

Files is visible for topic creator and
support staff only.

#428050 Copied
Luca Rossi

Support staff

December 19, 2024 at 10:05
Hi @Goostaf,

Please use this custom CSS codes:
```
.product-details {
    max-height: 100px;
}
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
    width: 40px;
    height: 40px;
    top: -45px;
    float: right;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 8px;
}
```
https://imgur.com/Vt5PLFn

Best Regards,
The 8Theme Team.
#428055 Copied
Viewing 6 results - 1 through 6 (of 6 total)