WooCommerce Store Fonts and Colors Setup Guide with Astra Pro Plugin

Astra Pro The plug-in is WooCommerce The store provides a number of visual settings, including font styles, color matching and some details of the function adjustment, suitable for the pursuit of interface aesthetics and ease of operation of the site builder to use.

This article sorts out the actual setup of the Fonts, Colors & Extras module to help you quickly get up to speed on the key features that are actionable.

Plugin activation and module opening

There are three steps to complete before using these features:

Install Astra Theme
start using Astra Pro plug-in (software component)
start using WooCommerce plug-in (software component)

Go to the WordPress backend and open the Astra module page, check the box WooCommerce module, you can enter the related setting interface.

Font Settings section

In the Customization panel, go to Paths:exterior condition > customizable > WooCommerce, you can see several options about fonts.

Basic Font Settings

Setting up the overall content of the sitecalligraphic stylestyles, the WooCommerce area will also use these settings.

Catalog Fonts

Includes the following three:

Product title: control the font style of the product title
Commodity price: control the font size, font, thickness of the price
Short description: applies to the brief content introduction on the listing page

Single product page fonts

The following can be adjusted independently:

Product Title Fonts
Product price font
Product description font
Breadcrumb navigation font

These settings are suitable for differentiating a sense of hierarchy on different pages and enhancing the readability of information.

Color and background settings section

Outside of fonts, color and background settings are also concentrated within the same path.

Basic Color Settings

The colors of the following sections can be set:

Text color: common to all body text areas on the page
Link color: applied to all jump links in the product page
captionColor: This color will be used for title areas such as product names.

Product list page color settings

Individually adjustable:

Product Title Color
Product Price Color
Product Description & Category Color

Single product page color settings

The following items can be set:

Product Title Color
Product Price Color
Product Content Color
crumbcolor

These adjustments help create a more unified page style and also facilitate an overall match based on the brand color palette.

Other Module Function Settings

Astra Pro hit the nail on the head WooCommerce The module also contains some additional features suitable for enhancing the interactivity and convenience of e-commerce pages.

Input Box Style

Modern style input boxes can be enabled to make form elements more relevant to contemporary web design styles.

Promotional Label Style

With this option turned on, the label style of promotional items can be customized, which helps to enhance the display of discount information.

Product Quantity Button

Quantity increase and decrease buttons can be added to the product page, providing a total of three different layouts for different styles of e-commerce sites.

Checkout Process Navigation

existcheckout pageShowcase process navigation, buyers have the flexibility to jump between sessions, making it easy to change address or order information.

Summary statement

Astra Pro offered WooCommerce The module covers a variety of aspects such as page layout, color matching, interaction details and so on. These settings do not need to write code, and can be done through the operation panel, which improves the vision and optimizes the function of the store at the same time.

Related articles

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off