分类： 入门

Replace Deprecated Astra Theme and Astra Pro Hooks

Following Astra Theme 3.7.4 and Astra Pro 3.6.2 updates, we deprecated a significant number of functions, filters, and actions. Thus, some of the Astra hooks you might have added to your website should be updated.

Therefore, this document will help you replace these hooks on your website. Please use the lists below to update your code.

Deprecated Astra Hooks and Their Replacements

In short, further down, you will find lists of functions, filters, and actions. Accordingly, please update hooks if you added any filters, actions, or other functions to your website.

Astra Theme 3.7.4 and Astra Pro 3.6.2 versions are still compatible with old codes to avoid any issues. Although your website will still work well after the update, you should replace deprecated hooks with the replacements below.

Further, to help you with these updates, we added backend notifications:

Hence, you can do this by replacing deprecated hooks in your code with the replacements from the lists. This way, your website will remain fully functional and compatible with future updates.

ActionsFiltersFunctions

Deprecated actionReplacementastra_get_css_filesastra_addon_get_css_filesastra_get_css_filesastra_addon_get_js_filesastra_after_render_jsastra_addon_after_render_jsasta_register_admin_menu astra_register_admin_menu

Deprecated filterReplacementastra_bb_render_content_by_idastra_addon_bb_render_content_by_idastra_get_assets_uploads_dirastra_addon_get_assets_uploads_dirastra_pro_show_brandingastra_addon_show_brandingastra_dynamic_cssastra_addon_dynamic_cssastra_add_css_fileastra_addon_add_css_fileastra_add_js_fileastra_addon_add_js_fileastra_add_dependent_js_fileastra_addon_add_dependent_js_fileastra_render_cssastra_addon_render_cssastra_render_jsastra_addon_render_jsastra_languages_directoryastra_addon_languages_directoryastra_ext_default_addonsastra_addon_ext_default_addonsastra_get_addonsastra_addon_get_addonsastra_ext_enabled_extensionsastra_addon_enabled_extensionsastra_custom_404_optionsastra_addon_custom_404_optionsastra_cache_asset_query_varastra_addon_cache_asset_query_varastra_cache_asset_typeastra_addon_cache_asset_typeastra_load_dynamic_css_inlineastra_addon_load_dynamic_css_inlineastra_flags_svgastra_addon_flags_svgastra_display_on_listastra_addon_display_on_listastra_location_rule_post_typesastra_addon_location_rule_post_typesastra_user_roles_listastra_addon_user_roles_listastra_target_page_settingsastra_addon_target_page_settingsastra_get_display_posts_by_conditionsastra_addon_get_display_posts_by_conditionsastra_meta_args_post_by_conditionastra_addon_meta_args_post_by_conditionastra_pro_white_label_add_formastra_addon_white_label_add_formast_footer_bar_displayastra_footer_bar_displayast_main_header_displayastra_main_header_displaysecondary_submenu_border_classastra_secondary_submenu_border_classgtn_image_group_css_compastra_gutenberg_image_group_style_supportast_footer_sml_layoutastra_footer_sml_layoutprimary_submenu_border_classastra_primary_submenu_border_class

Deprecated functionReplacementastra_get_supported_posts                                      astra_addon_get_supported_postsastra_rgba2hexastra_addon_rgba2hexastra_check_is_hexastra_addon_check_is_hexis_support_swap_mobile_below_header_sectionsastra_addon_swap_mobile_below_header_sectionsis_astra_theme_3_5_0_versionastra_addon_check_theme_3_5_0_versionsticky_header_default_site_title_tagline_css_compastra_addon_sticky_site_title_tagline_css_compis_support_swap_mobile_above_header_sectionsastra_addon_support_swap_mobile_above_header_sectionsastra_return_content_layout_page_builderastra_addon_return_content_layout_page_builderastra_return_page_layout_no_sidebarastra_addon_return_page_layout_no_sidebarastra_pro_is_emp_endpointastra_addon_is_amp_endpointis_astra_breadcrumb_trailastra_addon_is_breadcrumb_trailastra_breadcrumb_shortcodeastra_addon_breadcrumb_shortcodeastra_get_templateastra_addon_get_templateastra_locate_templateastra_addon_locate_templateastra_ext_adv_search_dynamic_cssastra_addon_adv_search_dynamic_cssastra_ext_advanced_search_dynamic_cssastra_addon_advanced_search_dynamic_cssastra_ext_header_builder_sections_colors_dynamic_cssastra_addon_header_builder_sections_colors_dynamic_cssastra_ext_header_sections_colors_dynamic_cssastra_addon_header_sections_colors_dynamic_cssastra_ldrv3_dynamic_cssastra_addon_ldrv3_dynamic_cssastra_learndash_dynamic_cssastra_addon_learndash_dynamic_cssastra_ext_mobile_above_header_dynamic_cssastra_addon_mobile_above_header_dynamic_cssastra_ext_mobile_below_header_dynamic_cssastra_addon_mobile_below_header_dynamic_cssastra_ext_mobile_header_colors_background_dynamic_cssastra_addon_mobile_header_colors_background_dynamic_cssastra_ext_mobile_header_spacing_dynamic_cssastra_addon_mobile_header_spacing_dynamic_cssastra_ext_mobile_header_dynamic_cssastra_addon_mobile_header_dynamic_cssastra_ext_mega_menu_dynamic_cssastra_addon_mega_menu_dynamic_cssastra_ext_scroll_to_top_dynamic_cssastra_addon_scroll_to_top_dynamic_cssastra_ext_fb_button_dynamic_cssastra_addon_footer_button_dynamic_cssastra_fb_divider_dynamic_cssastra_addon_footer_divider_dynamic_cssastra_fb_lang_switcher_dynamic_cssastra_addon_footer_lang_switcher_dynamic_cssastra_footer_social_dynamic_cssastra_addon_footer_social_dynamic_cssastra_ext_hb_button_dynamic_cssastra_addon_header_button_dynamic_cssastra_hb_divider_dynamic_cssastra_addon_header_divider_dynamic_cssastra_hb_lang_switcher_dynamic_cssastra_addon_header_lang_switcher_dynamic_cssastra_ext_hb_menu_dynamic_cssastra_addon_header_menu_dynamic_cssastra_header_social_dynamic_cssastra_addon_header_social_dynamic_css

General WooCommerce

Parent Document – WooCommerce Module Overview

In this document, we will see the General section settings of the WooCommerce module of Astra Pro.

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

General

Sale Notification

The Sale Notification appears when you set the Sale price from the Product Data of the particular product you wish to give discounts.

Default

The Default option comes with the Sale bubble in a circle. It will appear in the right top corner on the shop page and in the left top corner on a single product page. It chooses the default theme color that you have used for your overall theme.If you wish to come up with additional color besides your default theme color setting you can add custom CSS.

Custom String

Sale % Value

Discounts are displayed in percentage instead of a discounted price.

Sale Bubble StyleWooCommerce Pro Addon gives you 4 styling options

Circle / Square: That』s the default filled circle that we saw above. (You can choose square)

Circle Outline / Square Outline: Circle/Square with a border/outline with a white fill color.

Header Cart Icon (Old Astra Header)

Note:

You might notice a few changes with the new Header Footer builder 3.0.0 update. We have provided the Cart Icon as an Element in the Header Footer builder, you can add it from the Header builder and style it as per the design requirement. [Learn more about elements and about Header builder]

Header Cart Icon is the icon the appears at the end along with the primary menu in the header.

For displaying the Header Cart Icon you will find settings underAppearance > Customize > Layout > Header > Primary Header > Custom Menu Item > WooCommerce

Icon

There are 4 different kinds of Icon style available for you to choose depending on the products you are selling on your store.Default, Cart, Bag, Basket

Style

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 the 「Cart」 name on the menu.

How to Translate Custom Layouts with WPML?

Custom Layouts is a premium feature available with the 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.

WPML and Custom Layouts

Firstly, you need to add WPML to your Astra website and turn it multilingual. In addition, if you need help doing this, you can check this article.

Secondly, we need to make sure that the option to translate the Custom Layout with WPML is active. Follow the steps below to activate this option:

Step 1 – Login to your website and navigate to Dashboard > WPML > Settings;

Step 2 – Nest, scroll down to reach the 「Post Types Translation」 section;

Step 3 – In the end, select Custom Layouts (astra-advanced-hook)  to be Translatable. Here you have options to show items only if there is the translation available in the selected language or to show content in the default language (fallback option). Choose the option which suits you better and click on the 「Save」 button to apply changes.

This will enable all Custom Layouts to be translated with WPML. You will find the translation options in your Custom Layouts list.

Translating Custom Layouts

Now that this option is activated, let』s show you how to translate your Custom Layouts:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Layouts and check the column next to the custom layouts titles in the list. You will notice the WPML language options for each layout. Layouts are set to your default language, and the column contains flags of the other languages available.

Step 2 – To create a version of the custom layout in another language, just click on the 「+」 icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation.

By default, the editor will display content in 「dual」 mode, showing the original content on one side and translation fields on the other side. 

We decided to add a French version of the layout in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you added all translations, click on 「Complete」 to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the 「Complete」 button until you provided all translations. If you need to pause translating, just click on the 「Back to list」 button. This will save you current progress and take you back to the custom layouts list. To mark the translation in progress, you will notice that the 「+」 icon changed to the 「cogs」 icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the 「Complete」 button, the translated version of your custom layout will be automatically added and linked with the original. In the layouts list, you will see that existing translated versions are represented by a 「pencil」 icon instead of a 「+」 icon to mark that the translation exists.

When it comes to the layout content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your Custom Layout translation. You can repeat these steps for any layout you want to translate.

Gutenberg Editor And Frontend UI Improvements With Astra (3.7.4)

Astra Theme version 3.7.4 brought interesting Gutenberg UI improvements for both Block editor and frontend user interface. 

This document will show you the changes we added and how to apply these improvements when you update your theme to 3.7.4.

Gutenberg UI Improvements Overview

We added Gutenberg UI improvements to several blocks as well as the whole Block editor:

Block layouts「Spacer」 block;「Pullquote」 block;「File」 block;Block edit controles;Block selection in the editor.

Let』s check out some details for each improvement:

Block layouts

We added layout compatibility for multiple blocks. The block layout now provides the following options:

Default Layout – a default boxed layout;Wide Layout – this layout will inherit the width of the container you set on your website;Full-width Layout – this layout will go edge-to-edge of the screen.

This layout is available for Group, Cover, Columns, Heading, and Media & Text blocks. This structure is available for these blocks even when they are nested. Check out this visual representation of improvement:

This improvement works both for the block editor and front end.

Spacer Block

The Spacer blocks were previously hard to notice. You would notice this block only when you clicked on it. Otherwise, the block stayed almost hidden.

We made the block improvements by adding a light background and by displaying its assigned height.

Pullquote Block

We added a quote icon for the Pullquote block both in the editor and in the front end. This is how the Pullquote Block looked like previously:

The improvements make the block more visible and emphasize that the block content is a quote.

File Block

Previously the File block didn』t have Style support which was improved in the mentioned update.

The style support is now available in the editor and the front-end as well.

Block Edit Controls

In previous versions, the block controls had a lighter color making them less visible.

The block edit controls are more visible now, as we gave them a darker color.

Block Selection

Before improvements, it was not easy to tell what space is some block taking and where to click to start editing it.

The improvement now allows you to see each block and its borders by simply hovering over it with a mouse.

How To Get These Impovements?

For all new websites, Gutenberg UI improvements will be applied automatically when the theme is updated. 

As these improvements can reflect on the front end, you』ll need to activate changes by adding a filter for existing websites. This way, you can check how these changes apply to your website and make any adjustments if needed. 

To apply the improvements to your website, add the following filter to the functions.php file of your Child Theme:

// Filter to enable Astra 3.7.4 Gutenberg UI improvements
add_filter( 'astra_get_option_improve-gb-editor-ui', '__return_true' );

If you don』t have your Child Theme installed, please check this article on how to do it.

If you are not sure how to add this code, please check this article.

Global Colors – Astra Theme

With Astra, you can keep a uniform color scheme on your website with global color options. These colors will be applied to theme sections throughout the website.

From the WordPress dashboard navigate to Appearance > Customize > Global > Colors.

Base Colors

This is default basic color option available with the theme –

Ensure you are on the Latest Astra theme version 2.6.0 and above to see new color picker options

Following are the options you will find –

Text Color – Color for body text and description on the website Theme Color – Color for all theme elements like button, selected text background color, etc. Link Color – Color for all text to which links have been added Link Hover Color – Hover color for all text to which links have been addedBackground (Color and Image) – This color will be applied as a background color to the body on the entire site. If you set both – color and image – make sure to adjust the opacity of the color to make the image visible. Improvement (*) from Astra theme and Astra Pro v2.4.0 you will find a responsive option besides the Background option.

Note:

Since version 3.7.0 Astra Theme comes with Global Color Palette feature. This feature allows you to set color palettes and control colors across your entire website from one place. For more details, you can check the 「Astra Global Color Palette」 article.

If you are using a page builder, you can override the above colors with the page builder』s color settings. Also, overriding the theme colors can affect your color consistency across pages. Page builder colors will be applied to your content build with the page builder. On the other side, other pages and posts (not built by that page builder) will still use the theme settings. Thus, it could happen, for example, that your text or heading font color is different on your pages (created using page builder) and your Blog Archive or Posts. It』s important to keep in mind that this should be checked, as the settings will not be automatically synced.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the options available with Astra Pro Colors & Background module.

How To Improve CLS For the SVG Logo?

Cumulative Layout Shift (CLS) is an important metric related to the website』s visual stability. More precisely, this metric tracks unexpected layout shifts that users experience on your website. This document will show you how to improve the CLS score if you』re using the SVG logo for your website.

When you add a logo image in the .png and .jpg formats to your website, the logo height will be added automatically based on the logo width. Contrary to this, if you upload the SVG image, WordPress will only set the logo width but not height.

As a result, some logo shrinking is possible, which can cause an unexpected layout shift in the header section. Astra Theme version 3.6.0 improved the way SVG logo images are handled, which prevents unexpected shifts. Hence, this change can help improve the overall CLS score. 

How Did We Improve This?

To improve this, we added some JavaScript code that will automatically calculate the height for the SVG logo once it』s imported to your website. After that. the height will be calculated based on the logo width you set in the customizer. You can find more details about this in our Blog article.

This SVG logo improvement will be reflecting on a standard and transparent header. This issue was not present with the sticky header logo.

How To Fix This?

For all new websites, the SVG logo improvement will be applied automatically. Once you upload the SVG logo and set the logo width, the height will be automatically calculated and saved. On the other hand, if you already have a website with an SVG logo, you』ll need to make some minor changes.

We didn』t apply this improvement to existing websites to avoid any potential issues that could have appeared. In some cases, applying this improvement automatically to logos already in use could result in unwanted changes.

To apply this improvement to your website, please follow these steps:

Step 1 – Navigate to Customizer > Header > 「Site Identity & Logo」 widget;

Step 2 – Update/edit the logo width value

Step 3 – Click the 「Publish」 button to save the changes. 

Based on the width you just updated, the logo height will be automatically calculated and saved in customizer settings. This will apply improvements to the SVG logo used on your website.

Astra Meta Settings

Page meta settings are Astra Settings that appear on all individual pages and posts. Namely, these are page-specific settings that give you more control over individual page/post design. Further, you can override some global customizer settings for a particular page/post with these settings.

You can open the Astra Settings panel by clicking on the Astra icon in the Block editor toolbar on top:

Next, when you click on the Astra icon, the sidebar panel will open on the right side. Here, you will see the following options:

SidebarContent LayoutDisable SectionsDisable Primary HeaderDisable TitleDisable BreadcrumbDisable Featured ImageDisable Footer BarTransparent Header

Furthermore, page meta settings have higher priority than customizer settings. Therefore, your page meta settings will override customizer settings on each page or post.

To illustrate, let』s say you enabled a primary header on the entire website in the Customizer settings. Still, you wish to disable it only on the 「Contact」 page. Here, you can edit the 「Contact」 page and disable the primary header only for this page in Astra settings. Similarly, you can control other meta settings.

Note:

The Astra Settings are available as a separate sidebar panel since Astra Theme 3.7.4 version. If you』re running an older version of Astra Theme, you can find the Astra Settings panel in the right sidebar of the Block editor (Screenshot).

How to Pin/Unpin Sidebar Panel?

The above-mentioned Astra icon will be visible when the sidebar panel is pined to the Block editor toolbar. Thus, if you don』t see this icon, that means that the sidebar panel is unpinned.

Since it』s not mandatory to have your sidebar pinned, you can always access the sidebar panel through Block editor options. Therefore, to access your sidebar panel, please follow these steps:

Step 1 – Open editor on your page or post. Here, click on the three-dot menu in the toolbar to open editor options;

Step 2 – Scroll down to the 「Plugins」 section and click on the 「Astra Settings」 to open the sidebar panel;

Once you open the sidebar panel, you have the option to pin it to the toolbar:

Step 3 – Click on the 「star」 icon on the top of the sidebar panel. This will pin your sidebar panel to the toolbar allowing you to access it directly by clicking the Astra icon.

Yet, If you wish to unpin the sidebar panel at any time, just click on the 「star』 icon again.

Astra Settings with Astra Pro

Besides the default Astra themes settings mentioned above, you will see additional options when you activate Astra Pro:

Page HeaderSticky Header

With these options, you can add a particular Page Header layout for the specific page or post. To do this, click on the Page Header dropdown, and select the layout from the list. Also, you can enable or disable the sticky header on each page or post individually.

However, these Astra Pro options will display only when related addons are activated. You can activate these addons at Dashboard > Appearance > Astra Options.

In addition, you can bulk edit the page meta settings on multiple pages/posts. Check the 「How to Bulk Edit Astra Meta Settings on Multiple Pages & Posts at Once?」 article for more details.

How to Disable Product Quantity (Plus-Minus) Buttons?

In Astra Pro Addon』s version 2.1.0, we have improved the Product Quantity input』s old number field and replaced it with the Plus-Minus buttons.

For which we have provided a Filter that will disable the Product Quantity』s Plus-Minus buttons. This will be for the Product Quantity field on the WooCommerce Cart and Single Product Page.

This change could now be seen for the Product Quantity Input field on WooCommerce Cart and Single Product Page.

Some users, still require to have the below number field for the product quantity. Here』s a screenshot of the old quantity field –

To achieve this requirement, we are providing a filter in our Astra Pro Addon』s plugin version 2.1.3. Make sure you update the plugin to version 2.1.3 or above to use the filter.

add_filter( 'astra_add_to_cart_quantity_btn_enabled', '__return_false' );

Description: This filter is built to replace the product quantity』s new plus-minus field to the old number field.

You will need to add this filter, in the child theme』s last line of functions.php.

Note: Since this functionality is JavaScript based, in some cases this functionality might not work with the third-party plugins, and in such cases, users can also use the above filter.

Using the Code with Astra Pro

If you also have Astra Pro (Addon) Plugin installed and active, you might need additional steps. To make the changes visible on the front end, you will need to clear the Astra Cache. Please follow these steps:

Step 1 – Add a filter code functions.php file of your Astra Child Theme;

Step 2 – Navigate to Appearance > Astra Options and scroll down to the 「Available Astra Pro Modules」 section

Step 3 – Click the 「Deactivate All」 button, and then click the 「Activate All」 button (you can disable modules you don』t need afterward).

Step 4 – Check the front end of your website. If you still don』t see the change, please clear your browser cache by doing the hard refresh using Ctrl + Shift + R (Windows) / ⌘ Cmd + Shift + R (Mac).

How to Setup Custom Adobe Fonts (Typekit) Plugin?

Have you installed the Custom Adobe Fonts (Typekit) plugin and facing difficulties setting it up? 

Custom Adobe Fonts (Typekit) is a free plugin that helps you embed Adobe fonts into your WordPress website. You can install it from the WordPress repository by navigating to Dashboard > Plugins > Add New.

Now, let us help you with the setup:

Step 1: Once the plugin is installed and activated, you will need the Project ID to fetch the Adobe fonts from the web projects.

Step 2: Get the Project ID. You can follow the instructions up to Step 4 in this article.

Step 3: Next, paste the Project ID, for which you will need to navigate to WordPress Dashboard > Appearance > Adobe Fonts > Project ID and get all the fonts.

Go ahead and add more fonts to the respective project and refresh the Project. This will fetch other font families too.

Note: If you are using the Astra theme, then start using fonts from the customizer.You can also select Font Family from Appearance -> Adobe Fonts and start using it in your custom CSS.

Recommended Settings for Beaver Builder and the Astra Theme

When using the Beaver Builder page builder, it is recommended to use a Full-Width layout with Page Title and Sidebar disabled. That way, everything possible in the content area can be designed from Beaver Builder without any restrictions.

The good thing about Astra is its inbuilt compatibility with Beaver Builder. When you design a new page with Beaver Builder, Astra automatically sets the Full-Width layout without Page Title and Sidebar. That way, users can immediately start creating their pages without making any additional settings. Here is a video that explains how this works:

Let us show you how to do this manually with step-by-step instructions:

Disable Sidebar and Title

Astra offers options to turn off Page / Post Title and Sidebar easily in the Astra Meta Settings.

Note:

Since Astra Theme 3.7.4 version Astra Settings are available as a separate sidebar panel. You can access Astra Settings by clicking on the Astra icon in the Block editor toolbar, or through editor options (three-dot menu). For more details, please check the 「Astra Meta Settings」 article.

Follow these steps to disable Sidebar and Title using Astra Settings:

Step 1 – Navigate to your Pages or Posts list from your Dashboard;

Step 2 -Click on 「Edit」 under the page or post name to open editor;

Step 3 – Open the 「Astra Settings」 panel ;

Step 4 – Click on the 「Sidebar」 dropdown and select 「No sidebar」;

Step 5 – Under the 「Disable Sections」, check the 「Disable Title」 option;

Step 6 – Update the page or post.

You will find the Astra Settings on every page and post, so you can modify the settings where needed.

Full Width / Stretched Layout

From the various layout options that Astra offers, the 「Full Width / Stretched」 layout is the best for Beaver Builder if you need full-width pages. This layout gives Beaver Builder full control over the container and gives you the freedom to design posts and pages the way you want.

To set this repeat steps 1 to 3 to navigate to 「Astra Settings」 on your page or post and set the Content Layout:

Step 1 – Navigate to your Pages or Posts list from your Dashboard;

Step 2 -Click on 「Edit」 under the page or post name to open editor;

Step 3 – Open the 「Astra Settings」 panel;

Step 4 – Click on the 「Content Layout」 dropdown and select 「Full Width / Stretched」; Update the page or post.

Migrating from other Theme to Astra?

If you』re switching to Astra Theme from some other theme, you might need to make these changes on a large number of pages or posts built with Beaver Builder. In this case, you can use our free 「Astra Bulk Edit」 plugin. Read more about it here.