Author 诗语

Astra 2.2 brings new customizer options for headings and buttons.

What will happen if you update the theme and plugin?

If you are existing Astra user and update Astra theme and Astra Pro to version 2.2, you would be able to see these new options in the customizer, But they will NOT be functional. That means you can see the new options but they will not work and cause any change on the website.

Even after updating both theme and plugin, everything will remain same on the website.

Why this is so?

Astra 2.2 adds new customizer options and these options would impact the current way customizer settings are applied. And so we have restricted inheriting any automatic changes on existing websites, to ensure that there』s no unexpected effect.

We have taken the utmost care that Astra 2.2 won』t disturb your existing website design and structure.

How existing users can avail Astra 2.2 features?

A simple answer is – using a single line of code.

To make Astra 2.2 features work on existing websites, you can use custom filter code.

As mentioned above, even if the Astra theme and Astra Pro are updated to version 2.2, new customizer options will not work unless the custom filter is added to the child theme.

How existing Astra users can work with Astra 2.2 update?

1. Update the Astra theme and Astra Pro to version 2.2 from the WordPress Updates page. 2. As mentioned above, nothing will be changed on the website.3. Now copy the following code and paste it into the child theme』s functions.php file. 4. For Theme, use –

add_filter( 'astra_page_builder_button_style_css', '__return_true' );

5. For Addon, use –

add_filter( 'astra_addon_page_builder_button_style_css', '__return_true' );

Note: Do NOT remove this code in order to keep using Astra 2.2 features.

After adding custom filters –

Once you add above code to the child theme』s functions.php file, new Astra 2.2 options will be working for you.

With this, you might notice a slight change in buttons.

This is because static default value for buttons line-height is changed in this update. That might change the existing look of buttons.

You can alter it easily from the customizer buttons settings and it will be applied globally to all buttons on the website.

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

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

The Easy Digital Downloads addon in the Astra Pro provides a shortcode [astra_edd_mini_cart] to display the mini cart icon anywhere you want. This can be used on page builders/sidebar widgets etc.

[astra_edd_mini_cart] had an attribute direction for the direction this should open the mini cart on hover.

Options:[astra_edd_mini_cart][astra_edd_mini_cart direction="top left"][astra_edd_mini_cart direction="bottom right"][astra_edd_mini_cart direction="top right"]

The design of the cart in the menu can be fully customized using the options in WordPress customizer. The setting can be found in the customizer under Customize > Easy Digital Downloads > General.

Related Documents:

Ultimate Guide on WooCommerce Shortcodes

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

Once you purchase Essential Bundle or Growth Bundle, follow the steps below to install the plugin and activate its license. Activating the license will allow you to import starter templates with the 『Premium』 tag.

Step 1 – Login to your store account.Step 2 – Visit Account > Downloads. Step 3 – Choose to download Premium Starter Templates plugin.

Step 4 – From your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload zip from the above step.

Once you activate the plugin you will have to activate the license key.

Step 1 – Visit store account and go to Account > Licenses and copy the license key.

Step 2- Navigate to WordPress dashboard > Plugins > Installed Plugins > Premium Starter Templates and click on Activate License. A popup window will appear where you need to enter the license key.

Note: The Premium Starter Templates is a different plugin than the Starter Templates plugin that is available for free on WordPress.org.

Once you are set with the plugin start importing your favorite template.

Related Docs –

How to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?

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.

Also, make sure that you have the Easy Digital Downloads plugin installed and activated.

You can add a Cart Icon using Easy Digital Downloads module available with Astra Pro. Please refer document, to begin with, Easy Digital Downloads module.

Header Cart Icon

Header Cart Icon is the icon that appears at the end along with the primary menu in the header. Refer How to Add EDD Cart in Header?

This cart icon can be customized with the following settings – Customize > Easy Digital Downloads > General

Icon: There are 4 different kinds of Icon styles available for you to choose depending on the products you are selling on your store.Default, Cart, Bag, BasketStyle: You can set filled / outline styles to the icon.Display Cart Totals: When a buyer adds a particular amount of products in the cart, that number along with the total price addition appears in the Display cart Totals.Display Cart Title: It simply displays 「Cart」 name on the menu.

With Astra Version 1.8.3 and above, improvement is added with property font-display: fallback; for loading Astra Font.

@font-face {
font-family: "Astra";
src: url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url(
https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");
font-weight: normal;
font-style: normal;
font-display: fallback;
}

While loading a website, there is a very short period of time (100ms according to Google) for which text will not display in a font applied to it. That means custom fonts ( Astra fonts ) will be invisible for a small period of time. Once your website is fully loaded text will display with a font set from the customizer.

For this short period of time browsers have introduced new property font-display which adds a fallback font until custom font is loaded.

For more information, please refer to the doc below – https://developers.google.com/web/updates/2016/02/font-display

Are you working with the following setup on your WordPress site –

Astra theme ( with/without Astra Pro Addon plugin )Elementor plugin ( with/without Elementor Pro plugin )

While trying to build a page, sometimes you might face the popup in Elementor that says 『The preview could not be loaded』. This problem can be caused due to many reasons.

1. For initial debugging refer the following document by Elementor How to Fix the 『Preview Could Not Be Loaded』 Error

2. One of the reasons of this problem can be hosting. The following solution might work in some scenarios but it is not always the case. Initially, check the above document and then try the following solution. Sometimes the plugin reaches a default limit set with the server. You can try raising the default limit with the following code. The code needs to be added into the .htaccess file

SubstituteMaxLineLength 10M

If you own the Astra Growth Bundle by Brainstorm Force, you can easily unlock SkillJet access with following steps –

Step 1: Login to your store account, hover on the Account menu and select SkillJet Academy.

Step 2: Once on the SkillJet Academy page, click on the 『Access SkillJet』 button.

Done!

You will be logged in to the SkillJet website automatically.

Go ahead and access your courses from the 『My Courses『 page.

Astra gives you a great experience of building a page with Gutenberg editor. Below are the points that explain how Astra suits best with Gutenberg editor.

Support Container Layout 

Container layout set for Astra from the customizer will be applied to the Gutenberg editor as well. So that user will get the experience of how the final page will look in the frontend. Read more about the container layout here.

Gutenberg editor with Boxed / Content Boxed – Container Layout

Gutenberg editor with Full Width / Contained – Container Layout

Note: It is not recommended to use Full Width / Stretched layout with Gutenberg editor. It is specially designed for page builders which need full control over the container width. So if you enable Full Width / Stretched layout, the content will not be stretched to the fullest with Gutenberg editor but will be stretched in the frontend.

Support Wide / Full width alignment options

Gutenberg editor provides wide width and full width option for blocks like Image, Image Gallery, Cover Image, Posts etc. Astra supports these width options depending on the selected container layouts.

Wide width option will display full image but will have some space around it. While full width option will stretch the image end to end. In Boxed and Content Boxed container layout, full width image will stretch as per the width of the box. That means it will not display out of the box.

Image with Boxed / Content Boxed – Container Layout

Image with Full Width / Contained – Container Layout

Note: If the sidebar is enabled for the page, the image will not be stretched to fullest. As doing so will overlap the sidebar content.

Backend same as a frontend 

Gutenberg editor has the object to provide a visual editing experience. So with Astra, we make sure that the editor looks similar to the frontend. The customizer settings for background colors, text colors, typography etc. can be seen while editing the page. So that you can have an idea of how the page will look in the frontend.

Style blocks nicely

Astra is tested with every block of Gutenberg. Customizer settings will be applied to all Gutenberg blocks.

Support for Astra shortcodes

Astra shortcodes that come with Astra Pro Addon plugin will work best with Gutenberg editor.