分類： 入門

Not Receiving Update Notification for Astra Theme?

If you do not receive an update notification for Astra Theme, chances are — the theme folder is renamed.

Changing the theme folder name stops updates from https://wordpress.org/ as the theme folder is used as the slug for WordPress updater.

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 cause many problems. WordPress recognizes themes by the folder and it is strongly recommended not to rename folders unless there is intention behind.

Astra 2.2 for Existing Users

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.

How to Add RTL CSS via Child Theme?

Need to add custom CSS for RTL site? Usually, many of us add .rtl CSS class while writing a custom CSS for RTL site. These CSS loads even if we view the LTR site. Well, this is not a recommended way. In this article, you can explore how custom CSS can be added to the RTL site.

It is recommended to add custom code via a child theme. So make sure you have the Astra child theme installed and activated. Login with FTP and edit Astra child theme Create a new file and name it as rtl.css and add all custom CSS in this fileEdit functions.php file in child theme and add the following code snippet

/**
* Load the parent rtl.css file
*/
function astra_child_enqueue_rtl_styles() {
if ( is_rtl() ) {
// Load RTL CSS.
wp_enqueue_style( 'astra-rtl', get_stylesheet_directory_uri() . '/rtl.css', array('astra-theme-css'), ASTRA_THEME_VERSION );
}
}
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_rtl_styles' );

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file. 

Above code snippet will load RTL CSS only when the site is viewed in RTL mode. CSS will not load in LTR mode.

How to Change the Direction for Submenu Opening?

By default, submenus will open to the right side. Sometimes if the submenu structure is long, it might open out of the viewport in the right and user will not able to see it. 

To fix this add a below-mentioned CSS class to the parent menu who』s submenu is displaying out of the viewport.

ast-left-align-sub-menu 

For example:  If following is the menu structure:About> About Team>> Team Members>>> Team Responsibilities>>>> Team ContactsThen add a CSS class ast-left-align-sub-menu to the parent menu – About Team  So that their sub-menus will open to the left instead of right. 

Detailed steps to add CSS class – 

Step 1: From the dashboard navigate to Appearance > Menus.

Step 2: At the top right corner click on Screen Options and enable the CSS Classes option.

Step 3: From the menu structure click on the menu whos submenu needs to be opened at the left.

Step 4: Add CSS class ast-left-align-sub-menu and click on save. 

Now the submenus will open like –

EDD – Easy Digital Downloads Module Overview

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. Also, make sure that you have the Easy Digital Downloads plugin installed and activated.

We have seen the EDD integration with Free Astra theme.

Easy Digital Downloads Addon gives powerful and exclusive styling options for your EDD store. You can make your store all the more stylish with minimal efforts and simple customization settings.

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

Once you activate the Addon, settings will be available in the customizer under Appearance > Customize > Easy Digital Downloads.

Following are available settings –

GeneralProduct ArchiveSingle ProductCheckout Page

More Customization options –

Colors & Background options for EDDTypography options for EDD

Related Articles –1. How to Disable EDD Inbuilt Styling?2. How to Add Download Archive Page to Menu?3. How to Add EDD Cart in Header?4. Easy Digital Downloads Mini Cart Shortcode

How to Display a Mini Cart Anywhere Using Shortcode? (Astra and EDD)

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

Get SkillJet Access – Brainstorm Force Customer

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.

How to Display a Breadcrumb Anywhere within a Page or Post with Shortcode?

From version 1.8.0, we have introduced a built-in breadcrumb feature into the Astra theme.

This allows you to display breadcrumbs and manage its styling through color and typography options.

Here is an article that will brief you on how you can add breadcrumbs using the Astra theme and document too.

The above method focuses on three default positions – viz. inside the header, below the header and above the title.

But, what if you want to display it anywhere on the page or post? All you need to do is paste a shortcode and you see it there!

This is the shortcode – [astra_breadcrumb]

Note: To use the Breadcrumb shortcode anywhere on the page, you will need the Astra Pro plugin installed and activated.

You can add this to any custom layout or just anywhere – maybe the header, the footer, sidebar widget, within a page builder widget, etc.

Native AMP Support in Astra

Astra integrates beautifully with AMP (Accelerated Mobile Pages). AMP allows loading web pages faster on mobile devices than their usual speed. This document will help to understand AMP in detail and how Astra works with AMP. Let』s take a look! 

What is AMP (Accelerated Mobile Pages)?

AMP gives faster page loading experience on the mobile web. Your website pages will load on mobile devices without delay. AMP allows restricted HTML and JS to render on mobile devices and so the speed of the pages will be increased.

AMP is an open-source project for the betterment of future web on mobile devices. It is an initiative by Google. It is recommended to use AMP pages as most of your website viewers will be using smaller devices.

What is mean by Native AMP Support in Astra?

As mentioned earlier AMP restricts HTML, CSS, and JS to load on mobile devices. It does not allow more than 50KB CSS to load on mobile. Because of this, you can not see the exact Non-AMP pages design on AMP pages.

Astra』s native AMP support takes care of allowed CSS size and manages the design of the mobile pages accordingly. Astra tries to retain the original design of the pages in AMP mode. So that your AMP pages look much similar to Non-AMP/ original design.

How AMP can be enabled on the website?

To start using AMP, you need to enable it on the site with a plugin. Install the following plugin on your website just like any other WordPress plugin.

AMP: This plugin is freely available on WordPress.org

Read how the AMP plugin can be configured with recommended settings.

Important Note: Due to JS and CSS restrictions by AMP some of the Astra theme and Astra Pro settings will not work. Here is the complete list for the options that won』t work with AMP.

Single Product – EDD Module Options

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.

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

Read about the module here. And make sure that the Easy Digital Downloads Module is activated from Astra Options under the Appearance.

You can find the settings under Appearance > Customize > Easy Digital Downloads > Single Product.

Below are the options that will work on the single product page – Customize > Easy Digital Downloads > Single Product

Disable Product Navigation: Remove the navigation from the bottom of the single product page.Disable Add To Cart Button: Remove the Add To Cart button from the bottom of the single product page.

Colors

You can set the Colors for the Product Title, Price Color, and Content Color.

Typography

You can set the Typography for the Product Content from here.