Icon inside "Add to cart form"

[scenaryo]

Hi!
Is it possible to add an icon (e.g. a cart icon) inside the “Add to cart” button using the “Add to cart form” element available in the WooCommerce Single Product Layout?
Thanx

(https://look4hair.com/negozio/tutti-i-prodotti/corpo-viso/esigenze-corpo-viso/trattamento-antismagliature/regea-naturae-crema-smagliature-intensiva-250-ml/)

[prakash_s]

Hello @scenaryo,

Thanks for writing to us.

Regretfully there is no option to add the icon in the Add to Cart form element. In order to add the icon to the Add to Cart button I would suggest you please go to the Add to Cart element —>enable the Graphics.

Hope it helps
Thanks

[scenaryo]

Hi @prakash_s,
Unfortunately not, because I have to use the “Add to cart form” element.
Is there no way to integrate an icon, perhaps via php directly on the file that prints the button?
Thanx

[prakash_s]

Hello @scenaryo,

In order to add the icon to the “Add to Cart Form” element you can add it using the custom CSS code. Please add this custom CSS code to Global CSS.

.single-product button.single_add_to_cart_button.button.alt:before {
    content: "\f07a";
    padding: 0 15px;
    font-family: "FontAwesome" !important;
    color: #ffffff;
}

Code output

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[scenaryo]

Hi @prakash_s,
thank you very much!

[prakash_s]

You are most welcome @scenaryo