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

WooCommerce Module Overview

Astra works seamlessly with WooCommerce to provide elegant design settings to customize it to your heart』s desire.

At the same time, the WooCommerce Addon gives you extended capabilities to style and design your WooCommerce store. With minimal time and effort and powerful customization options, you can make your store more stylish and stand out.

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

Here are steps to activate the add on and explore the premium settings –

Step 1 – Make sure you have the Astra Pro and WooCommerce plugin installed and activated.Step 2 – Activate the WooCommerce addon from Appearance > Astra Options > WooCommerce.

Step 3 – You can now find these settings under Appearance > Customize > WooCommerce.

You will see the various tabs here.

The WooCommerce plugin itself provides very few customizer settings. The Astra options are combined with WooCommerce』s default options so that you can find everything at one place.

All tabs and related settings are explained below –

GeneralShop Single ProductCart PageCheckout Page

Site Identity Spacing Controls

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 manage the spacing using the Spacing module available with Astra Pro. Please refer document, to begin with, Spacing module.

This will allow you to add spacing around site identities like Logo, Site Title & Tagline.

You can find settings under Appearance > Customize > Header > Site Identity.

If you want to know more about Site Identities please visit here.

How to Add EDD Cart in Header? (Old Astra Header)

This is a premium feature available with the Astra Pro Addon plugin and old Astra Header (prior to Astra 3.0.0). To use this Pro feature, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

With Astra, it is possible to add a cart icon for the Easy Digital Downloads plugin with simple settings. This article will explain how to add a cart icon in the primary header.

Before that please verify if you have the Easy Digital Downloads plugin installed and activated.

Make sure you have activated the Easy Digital Downloads plugin.

To find the setting, from the WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu > Last Menu in Item and choose Easy Digital Downloads. It will display the Easy Digital Downloads cart icon at the end of the primary menu.

Like the primary header, you can add a mini cart to Above Header and Below Header.

Make sure the Header Sections addon is activated.

Then go to Appearance > Customize > Header > Above Header > Section ( 1/2 ) and choose Easy Digital Downloads.

Astra Pro』s Easy Digital Downloads add-on provides options to change the cart icon, add styling to it, display cart title and total. After activating the addon the setting can be found in the customizer under Customize > Easy Digital Downloads > General

Apart from the header, you might need to display a mini cart icon anywhere on the site. Easy Digital Downloads addon from Astra Pro Provides Mini Cart Shortcode, that allows you to display the mini cart icon anywhere you want.

[astra_edd_mini_cart]

Refer to the article here for more information.

Build Your Footer

Similar to the Header, the Footer is a section shown across all (or almost all) pages and posts on your posts. The main difference is that the Footer is located at the bottom of your website. Thus, contrary to Header, the Footer is often the area that website visitors see the last. It』s not rare that people miss the opportunity to build a good footer, but this can really make a difference with keeping users on your website as well as with conversions, subscriptions, etc.

This is the place where your visitors expect to find some key information like company details, contact information, social media links, or some additional or related content and links.

This is often a great place to add your links to other offerings you might have or put the most important links and call to action buttons to avoid the need of scrolling back to the top.

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your CustomizerStyle Your Website With Global SettingsBuild Your Header Find the Way With Breadcrumbs Set Up Your BlogAdd Your SidebarsBuild Your Footer (currently reading)Host Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra?Getting the Most Out of Astra Theme

Here again, the Astra theme comes with a drag & drop Footer Builder allowing you to build your footer equally easy as your header.

General and Design tabs

General tab is your default view when opening the Footer Builder. Here you have an overview of your footer setup.

On a left side menu, all of your active footer elements will be listed.

Rest of the screen is showing a live preview of your footer and the position of your elements across footer sections in your Visual Footer Builder.

Design tab gives you options of setting the Background Color & Image for the whole footer, as well as adding Padding and Margin.

Visual Footer Builder

Same as with Header, the Visual Footer Builder consists of three separate sections too.

These three Footer sections are:

Primary Footer – the middle section; this is your main footer section.

Above Footer – the upper section; often this is the place to add your subscription form or call to action buttons

Below Footer – the lower section; usually Copyright information and come contact or company information are placed here (like address, phone number/e-mail, company registration number etc.)

As with the header sections, each footer section customizations are accessed by clicking on the 「cog」 icon on the left side of the sections.

Each section has two tabs:

General tab – Footer

Column – select the number of columns you want to add to this footer section;

Layout – choose the column layout based on the selected number of columns;

Inner Elements Layout – display widgets in the same column Stacked (on top of each other) or Inline (next to each other)

Width – set the footer content width to Full Width (edge to edge) or to Content Width

Height – set height of this footer section.

Vertical Alignment – vertically align element content across all the columns within this footer section to Top, Middle or Bottom of the section.

Hide on Mobile – hide this header on mobile devices.

Design tab – Footer

Top Border Size (& Color) – add the top border to the footer section by setting the size of your border.

Border Color – Once you set your border size, an additional option will appear (Border Color) for choosing the color of the border;

Background – set this footer background color;

Inner Column Spacing – add space within each column;

Padding – add padding on one or more sides of the footer;

Margin – add a margin on one or more sides of the header.

Each footer section can be customized separately for desktop and mobile. You can add different footer elements or change their positions for each viewport.

Footer Elements

You can build your footer the same way as your header. Compared to Header Builder, the Footer Builder offers a somewhat smaller number of elements. You will be able to add the following elements to your footer sections: Footer Menu, Social, HTML, Widget, and Copyright.

Further down, we will show you how to use elements specifically available for the footer and a few of those used also for headers but with slightly different settings. The Rest of the elements are used the same way as with Header Builder.

Primary Menu

Here, you will see the menu items you added to your Footer Menu (Dashboard > Appearance > Menus).

In the General tab you can set the menu Layout to Inline or Stack and set the menu items Alignment.

The Design tab will allow you to set the Text and Background colors, Menu Font Size, Menu Spacing and Margin.

Social (Footer)

Compared to the Social element used for header, the footer Social element has the additional Alignment option in the General tab

This element allows you to simply add and style your Copyright and it can be used only within the Footer. You can use the following shortcodes here:

[copyright] 2021 [site_title] [theme_author]

Previous: Add Your Sidebars

Next: Host Google Fonts Locally – Performance Is the Key

Transparent Header in Astra Theme

From Astra Theme Version 1.6.0, Transparent Header option will be available with free Astra Theme. Prior to this version, Transparent Header option was available with Astra Pro Addon plugin.

See the initial announcement post for this feature.

Note:

If you are using Astra Header Footer builder available with Astra version 3.0 and above, refer to the document list here.

Quick Steps on How to Add Transparent Header on Your WebsiteStep 1: Find the Transparent Header Options under the customizer [ Appearance > Customize > Header > Transparent Header ] to edit Transparent Header Options.Step 2: Under the Transparent Header section you can Enable it on complete website, set a different logo, and add a Border Bottom color.

How Transparent Header Works?

Transparent Header allows you to easily create beautiful and attractive headers. Enabling this option will set your primary header background to transparent and pull the page content to the top. It will merge the primary header and the page』s content. That means your top part of the page content will be set as a background to the transparent header.

For example, if the page contains an image as a top section, it will be pulled up and set as a background image for the transparent header.

Layout settings for Transparent Header

After updating the Astra theme to version 1.6.0 and above, Transparent Header settings will be available in the customizer. From the WordPress dashboard navigate to Appearance > Customize > Header > Transparent Header. Below are the available options.

Enable on Complete Website

Tick the checkbox for this option if you wish to display a transparent header on the entire website. When you enable this option, it offers the following exclusion rules. That means you can choose some pages and posts, where the transparent header can be disabled.

Disable on 404, Search & Archives?: This setting is generally not recommended on special pages such as archive, search, 404, etc. If you would like to disable the transparent header on these pages, tick the checkbox.Disable on Blog Index page?: From Homepage Settings, if you have set Your homepage displays > Your latest posts then the front page becomes a Blog Index page. If you would like to disable the transparent header on it, tick the checkbox. Disable on Pages?: If you wish to disable the transparent header on all pages, tick the checkbox. Disable on Posts?: If you wish to disable the transparent header on all posts, tick the checkbox.

Note: Transparent Header can be set from Page Meta settings as well. Just Edit the page/post, in the right sidebar, you will find the Astra Settings section. This allows you to enable/disable transparent header for particular page/post. Note that the page meta setting has high priority than a customizer setting.

Enable On

Choose a device to display a transparent header. Options are –

DesktopMobileDesktop + Mobile

Styling

Different Logo for Transparent Header?: When you enable transparent header, by default it displays the site logo set under Layout > Header > Site Identity. If you wish to set a different logo that site logo on the transparent header, tick the checkbox and set a logo.Bottom Border Size and Color: Set a bottom border for a transparent header.

Colors & Background for Transparent Header

Settings are available in the customizer under Header > Transparent Header. Set different colors for a transparent header with the following options –

Background – Background Color of the Transparent HeaderSite Title – Site Title ColorMenu – Background Color, Link / Text Color, Link Active / Hover ColorSubmenu – Background Color , Link / Text Color ,Link Active / Hover ColorContent – Text Color, Link Color, Link Hover Color

Note:

1. Typography for Transparent Header will be inherited from Global > Typography > Base Typography.2. Transparent Header can be enabled or disabled for a particular page from Page Meta settings.

Starter Templates — Basics and FAQs

Astra provides a stunning library of pre-built templates. Instead of designing a website from scratch you can import Starter Templates (formerly Astra Starter Sites) with few clicks and customize them in your own way.

Starter Templates are available with your favorite page builders and WordPress default editor – Elementor, Beaver Builder, Brizy and Gutenberg Editor.

Starter Templates library has a number of templates, some are FREE (without any tag) while some are marked with a PREMIUM tag.

FREE and Premium Starter Templates

Templates without any tag ( Free Starter Templates )Templates with tag – PREMIUM ( Premium Starter Templates )

Templates Without Any Tag ( Free Starter Templates )

Starter Templates that do not have any tag are available for free. These templates are built with free resources like – free versions of page builders (Elementor, Beaver Builder, Brizy) and free external plugins.

How to Import? – For a detailed step-wise explanation on how to import the FREE starter templates, you can refer to the article here.

Templates With Tag PREMIUM

In the library, templates with PREMIUM tags are accessible only to those who own the Essential Bundle and Growth Bundle.

Why is it so? – In 『Premium』 templates, you will see advanced design styles and features. These sites are built with – Page builders (Elementor, Beaver Builder, Brizy) and a few of the premium plugins.

Note: The Growth Bundle owners can access all the sites marked as Premium. While those who own an Essential Bundle can access the Premium sites for a specific page builder (depending on their choice) only.

How to Import? – The Essential Bundle and Growth Bundle comes with the Premium Starter Templates plugin. You will find it along with the other plugins in your store account. Refer to the article here to see how you can install the plugin.

Getting the Most Out of Astra Theme

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your CustomizerStyle Your Website With Global SettingsBuild Your Header Find the Way With Breadcrumbs Set Up Your BlogAdd Your SidebarsBuild Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra?Getting the Most Out of Astra Theme (currently reading)

Free Theme and Constantly Evolving

Astra theme started in 2017, and in 2020 it already had more than 1+ million active installs. Very quickly it became one of the Fastest, most Lightweight, and Highly Customizable themes for WordPress.

As you probably know WordPress is an open-source content management system. Being an open-source means that anybody can contribute to it.

Keeping in mind that all of them have kind of unique living styles, you can imagine that the developers can have more or less different coding styles. That is why we have WordPress Coding Standards. Astra theme strictly follows these standards, using constantly very clean code, so it』s very simple for anybody to work with it.

One of the reasons that theme is so popular, is that it』s constantly evolving and becoming more advanced while staying completely free. Since its beginnings we have released more than 200 theme updates, more than 270 templates, integrations with WooCommerce, LearnDash, LifterLMS, Easy Digital Downloads, etc.

When Gutenberg builder was added to WordPress 5.0 we made the Astra theme fully compatible from the start. We also added our free Ultimate Addons for Gutenberg that come already included with the Astra theme. And not to forget, the Astra themes』 compatibility with Elementor, Beaver Builder, and Brizy too.

All of this was coupled with the constantly expanding list of the theme features as well as a solid number of fully compatible free and paid plugins.

Astra 3.0 Theme Improved the Customizer Speed

With each Astra theme update, we are working on improving the performance of the theme and especially the Customizer. And with Astra 3.0 we made quite a leap forward – our already fast Customizer became 70% faster!

Using React JS combined with a lazy-loading feature which is also incorporated in the customizer, our customizer dropped from great 3.5 seconds to loading in around 1 second.

Since then, most Astra theme updates continuously bring further improvements and optimizations.

Astra Theme 3.0 also Brought a lot of Other Changes

Besides the Customizer speed increase, Astra 3.0 brought even more advancements and functions.

We optimized HTML and CSS significantly reducing the amount of code. The result is that our average page load times were reduced from 0.9 seconds to 0.7 seconds!

The biggest improvement that came with Astra 3.0 was our new Header Footer Builder. This created a completely new experience of visual Header and Footer building with a significant number of available elements and options, different Header and Footer design layers (Above, Primary, and Below), and much more.

With the following major updates, came the completely redesigned customizer UI that was covered by this guide, as well as new controls to duplicate and delete header and footer elements, Google Web Stories, SVG Icons support, Related posts… and there are many more to come.

Free Plugins

We constantly strive to help our users have an amazing website-building experience. You can check some of our free plugins that you can use:

All In One Schema Rich Snippet – you probably heard about schema markup? It』s a code you place on your website which provides additional information to help Search Engines understand what is the content on your pages really about. You can use this plugin to easily implement schema types like Review, Events, Recipes, Article, Products, Services, etc.

Ultimate Addons for Beaver Builder Lite – these ultimate addons will boost your Beaver builder with great additional modulus.

Elementor – Header Footer & Blocks Template – using this plugin you can add headers, footers, and blocks anywhere on your website and design these by Elementor without needing any other plugin or addon.

And these are just a few of the free ones. Feel free to also check out some of our premium plugins.

Education

On top of the Astra theme and our products, we are proud to provide great support for both our free and Pro users. Our Blog and extensive Knowledge base cover a massive amount of detailed documentation, articles, and guides for building websites with Astra.

Though our products are simple to use and developed with user-friendliness on our minds, they are continually evolving. That is why we regularly update and expand our Knowledge base.

Next to the docs that will clarify any bump or issue you might encounter with Astra, we also create detailed guides, walkthroughs, and blog articles to make your work easy and help you get the most out of the Astra theme and our other products.

Support & Community

On top of the Astra theme and our products, we are proud to provide great support for both our free and Pro users. Our Blog and extensive knowledge base cover a massive amount of detailed documentation, articles, and guides for building websites with Astra.

Further, our Support team is available to help you 24/7, all year round with any issues you can』t solve on your own or couldn』t find in our knowledge base or blogs. Just drop us a message here and our support engineers will help you out in no time.

Last but not least Astra theme is backed by a huge community ready to help and share knowledge at all times. Join our Facebook groups to become a part of Astra Comunity:

Astra WordPress Theme CommunityAstra and Elementor Users

Astra Pro

We hope that you enjoyed this Astra Theme Walkthrough. As we work on constantly improving our free theme, we know that some of our users require more powerful features, an enhanced list of customization options, and premium support. For this reason, we created Astra Pro Addon.

Please check the full list of features available with Astra Pro and our comparison with the Astra free theme.

We invite you to visit our official website and find out more about the world of Astra.

Growth and Essential Bundle

Having Astra Pro is a great addition to your theme, but you might also need additional options for your content or a boost in your online sales. Also, if you build websites for your clients, you might be dealing with a number of different requests and preferences.

This is where our Bundles step in. Next to Astra Pro which is included in our bundles, you would be getting additional products to help you expand your business and premium support.

Essential Bundle is a great choice to boost your online business or start the agency or freelancer work. Mini-Growth Bundle gives you a balanced mix with just the right combination of products you would need like:

Ultimate Addons for Elementor or Ultimate Addons for Beaver Builder (you can choose the one you prefer) to expand your preferred Page builder capabilities and help you build amazing website designsPremium Starter Templates and WP Portfolio plugin.

You can find more details about the Essential Bundle in this article.

Furthermore, our Growth Bundle will boost your traffic (Schema Pro plugin) and your conversions (Convert Pro plugin), while giving you both page builder addons (Ultimate Addons for Elementor AND Ultimate Addons for Beaver Builder) and access to our SkillJet Academy. You can find more details about Growth Bundle in this article.

Previous: How To Build Quick Sites With Astra?

FAQs – Astra Header/Footer Builder

What is Astra Header/Footer Builder?

Astra Header/Footer Builder is a new visual builder inside Astra customizer. This is a powerful way to design creative header and footer for your website. You can add various items in header/footer and arrange a structure with simple drag and drop.

This feature is available with the Astra theme version 3.0.0 and above. Advanced options are available with Astra Pro version 3.0.0 and above.

How can I get Astra Header/Footer Builder?

Astra Header/Footer Builder comes inbuilt with Astra theme while Astra Pro adds advanced options to it.

Astra Theme is available on WordPress here Astra Pro is available on your store account. Just login to your account and visit the Downloads section.

How new Header/Footer Builder will affect old design? Will my current header/footer design be migrated?

No, when you opt to use new Header/Footer Builder, old design will not be migrated. You will need to rebuild the old header/footer design.As soon as you activate new Header/Footer Builder the old design will be replaced and will no longer be visible.

In case you wish to continue using old header/ footer settings, you can choose the option from Astra Options (Appearance > Astra options > Use Old Header/Footer).

What will happen to my Above and Below Header from Astra Pro?

Above and Below Header will be available from Astra theme now. Though advanced options will come from Astra Pro. As mentioned in the above answer, when you switch to a new Header/Footer Builder, you will have to rebuild old design.

What will happen to my Typography, Spacing, Colors & Background Addon options in the new Header/Footer Builder?

All the Typography, Spacing, Colors & Background options will remain the same with respect to new Header/Footer Builder. That means when you activate these addons, respective options will be added into customizer for individual elements like Primary Menu, Secondary Menu, etc.

What are different elements do I get with Astra theme and Astra Pro plugin?

Here is a complete list of widgets available in new Header/Footer Builder with Astra theme and Astra Pro.

Do I have a limited no of Elements or Can I Use Multiple Elements in header/footer?

You get all the elements as mentioned in the list above. But in case you need more elements, you can get it with Astra Pro. Refer article here to see how.

Colors & Background Options for Transparent Header (Old Astra Header)

Color options for Transparent Header are available with Astra Pro Colors & Background Addon.

Note:

If you are using Astra Header Footer builder available with Astra version 3.0 and above, refer to the document list here.

Activate the addon from Appearance > Astra Options > Colors & Background. After activating the module, you can find the settings under Appearance > Customize > Header > Transparent Header

Below are the available options-

1. Background Overlay Color

You can set an overlay background color for a transparent header.

2. Site Title Color, Site Title Hover Color

If you have enabled site title and site description from site identity tab, you can set its color on a transparent header. A color set will be applied to site title as well as to description.

3. Menu Background Color, Menu Link / Text Color, Menu Link Active / Hover Color

You can set colors for the primary menu with a transparent header.

Transparent Header with Header Sections Addon

If you have activated Header Sections module from Astra Pro Settings and using Above/ Below Header sections then background overlay color set for the transparent header will be applied to above/below header section.While content color will be applied from Above/ Below Header Color settings.

Transparent Header with Sticky Header

Sticky Header will inherit all color settings from a header and primary menu. Transparent Header color will not affect sticky header.

How Do License Upgrades Work?

This article explains how license upgrades work.

Lifetime to Lifetime Upgrades:

Customers need to pay only the difference amount.Example – If a user wants to upgrade from Astra Pro ($249 / Lifetime) to Astra Growth Bundle ($699 / Lifetime), he will have to pay only $450 ($699 – $249)

Annual to Lifetime Upgrades:

Customers need to pay only the difference amount (provided they have an active annual license)Example – If a user wants to upgrade from Astra Pro ($59 / Year) to Astra Pro ($249 / Lifetime), he will have to pay only $190 ($249 – $59)

Annual to Annual Upgrades:

In case if you upgrade to annual license, the original date of license expiry is considered, regardless of the date of upgrade. The amount you will be charged will be based on the price difference and the time left in your current subscription before renewal. This means that you will have to pay a complete annual fee in case your earlier license has expired.

Example – A customer purchased an annual license for Astra Pro ($59 / Year) on January 1, 2017. On July 1, 2017, the customer upgrades his license to Astra Growth Bundle ($249 / Year). The price difference is $190 and there are 6 months left in his current subscription period. The customer will pay $95 to upgrade. On January 1, 2018, the subscription will renew and the customer will pay the license renewal amount and own an active license key until January 1, 2019.

The expiration date of the license will not change; an upgraded license will still expire on the original expiration date whether prorated or not.

Note: Above upgrade process will be applied to all Astra packages i.e. ASTRA PRO, Essential Bundle, and Growth Bundle.

How to Upgrade?

Just visit the upgrades page on our store to see your available options.

Have questions? Get in touch, We will be happy to help!