DEV Community

Cover image for How to customize colors and fonts in WooCommerce store with Avada Theme?
Shalim Mora
Shalim Mora

Posted on

How to customize colors and fonts in WooCommerce store with Avada Theme?

After a long time, I returned with a topic for which I did not find helpful information on the web and I ended up finding the answer without help, as always the answer was obvious but I did not see it.

It turns out that I installed WooCommerce on my site so that my clients can pay my fees through it, but when I finished I could see that the shop page was a little different from the rest of my site, for example, the colors of the buttons were inverted, the sources too, etc, etc…
And well, when going to the store page to edit it, it only had a code that is used to make the store page appear, as well as on the Cart and Checkout page.

Image description

Well let's start!, first you have to go to: Appearance>Global Options

Image description

Once inside there is a huge menu on one side of the Dashboard, go to the Typography>Heading Typography option

Image description

We are only interested in:

H3-The font of the product name on the product page

Post title typography - the font of recommended products

H2 -The source of the items you have in the cart and the cart totals

H4- The source of subtotal and total on the cart page and the Checkout page

H3- Billing details and "your order" on the checkout page.

Then in the same menu, they go to the 'Body typography' and practically here it is to configure all the small text.

Image description

In the same menu, there is the Avada Builder Elements option, personally, I only configured the buttons and you should take into account that as you configure the buttons here, they will be seen on your entire site, not only on the WooCommerce store.

Image description

Finally, they have to go to the WooCommerce option> General WooCommerce and WooCommerce Style and in both, they can make many customizations within the Store, Cart, and Checkout.

Image description

And well that's all for today, if you want to see how my WooCommerce Store turned out, you can see it here.

Lee este post en Español

Top comments (0)