诗语，作者 Astra 文档 - 第 30 页共 38 页

Colors & Background options for WooCommerce

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can customize color and background options for WooCommerce Pages using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

Activate the WooCommerce Module from Astra Options.

Colors & Background options will be available under Appearance > Customize > WooCommerce > Product Catalog and also under Appearance > Customize > WooCommerce > Single Product

Below are the available tabs –

Base ColorsProduct CatalogSingle Product

Base Colors

From here you can apply color to the text (Text Color), and to the links (Link Color) which would apply a color to the five-star rating, Shop page title, Filter link and other links which appear with the products on all pages. Also, the Heading Color will be applied to Product titles.

Product Catalog

Product Title Color: Applies color to product title on the shop page.Product Price Color: Applies color to product price on the shop page.Product Content Color: Applies color to product short description and category on the shop page.

Single Product

Product Title Color: Applies color to product title on the single product page.Product Price Color: Applies color to product price on the single product page.Product Content Color: Applies color to product description on the single product page.Breadcrumb Color: Applies color to Product Breadcrumb on the single product page.

Shop WooCommerce

You can style the shop page where all your products are listed. This can be your main shop page or the product archive page.

Quick Steps on How to Style WooCommerce Store Page Using the WooCommerce ModuleStep 1: Make sure you have the Astra Pro Addon and WooCommerce plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the WooCommerce module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > WooCommerce ] to edit module settings

You can find the settings under Appearance > Customize > Layout > WooCommerce > Product Catalog

Choose Product Layout

Astra has two layout options for your Shop page:

Grid View

Where you can display your shop in a grid style, where the product image is displayed at the top.Product-related information like price, sale price, category, etc is displayed below the image.

List View

Where the image and product related information is displayed side by side.

Shop Columns

You can choose the number of columns to be displayed for your products on the shop page, in Grid View and List View.

Grid View

List View

You have control to choose the number of columns on your responsive devices:

Products Per Page

Just like the Blog posts on the archive page, you have control to decide the number of products on the main shop page.

Shop Pagination

Number

The number option restricts the number of products on an individual page.The remaining undisplayed products are divided into further pages

Shop Pagination Style

You can change the change this style to Circle or Square

Infinite Scroll

This option on the product page stands for the unlimited display of products.The page gets extended as far as you keep adding the products on the product archive page with an infinite scroll.

Event to Trigger Infinite Loading

Scroll

Keeps you scrolling the page.

Click

The Scroll may elongate the page and the viewer may lose interest after scrolling at a certain level. To avoid this choose an option of Click where the Load More button appears.This button appears after a certain number of products are displayed in rows.You can change the button text as per your needs.

How to White Label Astra?

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

What is White Label branding?

White label Branding is the ability to rename and present a product or a plugin as your own. This helps you hide the actual identity of the theme and plugins used and lets you use your brand name instead.

Astra Pro comes with an option for white label branding. You can change almost every field to prove that the product is yours and you are the whole and sole developer who has worked on a website.

In order to edit the Astra Pro white label settings, you will need to click on 「Astra Options」 under Appearance, then click white label settings option and add all necessary details in the fields given.

Following is an image of how you can fill the details:

Save your settings.

If you have installed Starter Templates plugin or Astra Premium Sites plugin (available with Astra Essential Bundle or Growth Bundle), you can see options for these plugins as well.

Save your settings.

If you are using the following plugins/options with Astra, you would see options to while label them as shown in above screenshot.

Astra HooksCustom FontsCustom Typekit FontsLightweight Sidebar Manager

Later, if you wish to hide these settings from your client or anyone who would be accessing the backend of a website, you can simply opt to hide these settings by enabling the checkbox for Enable White Label as seen below.

Save your Settings.

Note: If you wish to see these (White Label) settings again after hiding them, you can do so by reactivating (deactivate, then activate again) the plugin from the plugins page.

Want to see where this all will be displayed?

We have a few images for you to understand all the places where all your white label settings will be seen.

This is where the Astra Pro Plugin Name, Agency Author name, Agency Author URL and the Plugin Description will be replaced.

The following image shows the replaced Theme name.

Does White Label Feature Make Changes in the Code?

How to Edit style.css in Child Theme?

If you want to add custom CSS to the theme you can add it to the child theme』s style.css

Initially, you need to install and activate the Astra child theme. You can edit child theme』s style.css in following ways-

Through WordPress Dashboard

Navigate to Appearance > Theme Editor.Select Astra child theme to edit, from the upper right corner.Select Stylesheet (style.css) to edit and paste the code at bottom of the file.Save the changes.

Through FTP

Open your WordPress site via FTP. We would recommend you to use FileZilla.Navigate to wp-content > themes > astra-childRight-click style.css and select View/EditAdd your code at the bottom of the file and save it.

LifterLMS Integration in Free Astra Theme

This document lists the free features available with the Astra theme and LifeterLMS plugin. To use these features, you need to have the Astra theme along with the LifterLMS plugin installed and activated on your website.

If you have LifterLMS plugin installed and activated, you get the following options with the Astra theme.

Container Settings

Astra gives you an option to set a dedicated container for the LifterLMS courses. These options overwrite all the default container layout settings.

For managing the container navigate to Appearance > Customize > Global > Container > LifterLMS Layout

You can keep the setting default or change into the following layouts –

Boxed LayoutContent BoxFull Width / ContainedFull Width / Stretched

Boxed Layout

Content Box

Full Width / Contained

Full Width / Stretched

Sidebar Settings

Sometimes you would need to set different sidebars for LifterLMS pages than site sidebars. Astra supports default LifterLMS sidebars. Like the container settings, Astra gives you the option to manage the sidebar on the LifterLMS pages.

You will find the settings under Appearance > Customize > Layout > Sidebar > LifterLMS.

Following options are available:

LifterLMS

It will manage the sidebar on pages like Checkout, Profile, Quiz, Courses, Memberships, Membership single.

LifterLMS Courses/Lessons

It will manage the sidebar on Single Course & Single Lesson pages.

For adding the sidebar widgets go to Appearance > Customize > WidgetsYou can drag & drop the widgets from left side Available Widget option

Astra gives you the following options for LifterLMS and LifterLMS Course/Lesson sidebar:

Default: Whatever setting you have applied for your website will be applied to the pages related to LifterLMS No Sidebar: This setting will hide the Sidebar from the pages related to LifterLMSLeft/Right Sidebar: This setting will display the Sidebar on the pages related to LifterLMS

Sidebar Width

Manage the sidebar width of the LifterLMS pages.

LifterLMS Layout Settings

You will find the settings related to the LifterLMS layout in Astra customizer. For settings go to Appearance > Customize > LifterLMS

Here there are options to set columns for the Course and also for the Membership.

Membership Columns

This is the page where various memberships for the courses appear.With Astra, you can manage the number of columns per row.

Styling options for LifterLMS with Astra Theme

Default colors of the site set under Appearance > Customize Global > Base Colors will be applied to the LifterLMS pages.

Typography that you set for the body and headings under Appearance > Customize > Global > Base Typography will be applied to the LifterLMS pages by default.

Typography for Headings of LifterLMS

LifterLMS Pro Module will extend the features ahead.

Do Not See License Activation Form for Astra Pro Addon Plugin?

If you do not see the license activation form for Astra Pro, chances are —

1. Astra Pro plugin is not installed

Make sure you have installed and activated the Astra Pro plugin. See How to Install Astra Pro Addon plugin?

2. Astra Pro plugin is not able to find the theme installed on your website.

This can happen if the theme folder is renamed. To verify and fix, follow the steps below:

Login to the FTP of your website and go to wp-content/themesEnsure you have a folder: astraIf it is something else, rename the folder back to astra (or just reinstall Astra theme)

Renaming the theme folder can be a cause of many problems. WordPress recognizes themes by the folder and it is strongly recommended not to rename folders unless there is the intention behind.

3. Astra theme has a stable version while Astra Pro has a beta/RC version or vice versa.

Check if the theme and the plugin both have a stable version. Else both should have a beta/RC version. Sometimes if the versions are different the license box does not display.

Fix for – Parse error: syntax error, unexpected T_FUNCTION

This error is generally seen on servers that have an outdated version of PHP running on your site.

We all know the importance of PHP in core WordPress. It is the foundational coding technology used for the CMS.

PHP versions below 5.5 are declared unsupported by PHP itself and have come to 「End Of Life「. Upgrading to the latest version of PHP is essential to ensure that your site is secure and compatible with all the versions and features of WordPress.

To upgrade the PHP version for your website, just contact your hosting company and they will be happy to do it for you.

Read more about Why Upgrading PHP is important?

How to Add Background Images?

Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.

You can enhance the design of the Body, Header, Content, Sidebar, and Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a background image to following areas-

Body (?)Footer Widgets (?)Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

Primary Header (?)Above Header (?)Below Header (?)Content (?)Sidebar (?)Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following CSS properties for the image –

RepeatBackground Image PositionBackground SizeBackground Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

Important Notes:

After adding a background image, make sure to adjust the opacity of background color with color picker.Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

How to add Google Analytics code with Astra theme?

Google Analytics code can be added to the Astra theme with Astra Hooks plugin. It provides hooks so that you can insert custom code at various locations on the website without editing the theme』s core files.

Please follow the steps to add Google Analytics code-

Download Astra Hooks plugin. Install it like any other WordPress plugin and activate it.From the WordPress dashboard navigate to Appearance > Customizer > Hooks > Header > wp_head.Add the code with wp_head action.Publish it.

Other Notes:Astra Pro Addon plugin users can add Google Analytics code with Custom Layouts Module. (Recommended)

Overview of LearnDash Integration in Astra Theme

UPDATE — This article only applies to the Legacy theme that LearnDash offers. If you wish to use LearnDash 3.0, we have an update, you can read the announcement post to know the changes we』ve done in the Astra theme and also go through the knowledge base article to use Astra with LearnDash 3.0.

In this article, we』re going to take a look at the key highlights and options you will find for LearnDash in the free version of Astra. To see extra options and features you can get with Astra Pro, please refer this article.

Integration Highlights:

Easily Customizable

Astra is fast, flexible starter theme which means you can use it to build any kind of website. Out of the box, it comes with simple, minimalist design. Users can tweak it from intuitive settings in Live Customizer to achieve desired results.

Optimized UI

LearnDash is a great LMS Platform. But it』s UI leaves a lot to be desired on it』s own. So on popular demand, Astra theme has designed an integration with LearnDash to give it a modern, clean design and interface.

Uniform Design

Astra + LearnDash not only look great together; but uniformed as well. LearnDash takes colors, fonts and style set in the Customizer options of Astra theme.

Screenshots:

Because, a picture is a worth thousand words! Click on any image below to open a gallery of some screenshots:

Dedicated Settings for LearnDash

We have provided dedicated design options for LearnDash, so users can achieve make customizations easily without custom code. Some basic options are provided in the Astra free theme, where as more advanced customization options are available from Astra Pro Addon.

Options in Astra Theme

Container:For all single course pages, topics, lessons and quizzes — you can have a different container layout.

Sidebar:Astra provides you control so you can choose the position of sidebar on LearnDash pages.

Table of Contents:Beautify the LearnDash Table of Contents easily with dedicated options. The 「Display Serial Number」 option helps you enable or disable the serial numbers for the table rows; and 「Differentiate Rows」 option will style even odd rows a bit differently with different background colors for better UX.

More Options and Features with Astra Pro

Astra Pro extension for the free Astra theme takes the integration with LearnDash to the next step. It offers amazing options such as Distraction Free Learning, student』s Gravatar in header, more controls for design of course contents table and much more.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the LearnDash module of Astra Pro Addon.