As per the feedback from users and our designer’s request we have modified these settings.

Now, the Content Background color will work for Full-width contained & stretched layouts as well. But, only in the case of Full Width & Fluid Site layouts.

For old users, please use the below code to apply this change. (For new users this will work on your environment without any changes or code):

add_filter( 'astra_get_option_apply-content-background-fullwidth-layouts', '__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.

Why Did This Happen? 

Astra Pro WooCommerce and EDD Modules bring the option to change the default mini cart icon. You can set one of the Astra Pro icons by navigating to the Mini Cart Header element (General tab).

By default, the font color for the number of items in the cart (Product Count) is white. Setting your Cart color to white too will create a situation that the number of items becomes invisible though the number is still actually there (white color on white color).

This is easily solved by setting product Count Color to any color other than white.

How To Set Product Count Color?

In this case, you should additionally set another color for the number of items using the “Count Color” option.

The “Count Color” is available with Astra Pro Addon since version 3.5.9. You can set it up by following these steps:

Step 1 – Login to your website and make sure that your Astra Pro Addon plugin is active;

Step 2 – Navigate to Appearance > Customize > Header Builder > Cart > Design;

Step 3 – Set “Count Color” to another color. Click “Publish” to save changes.

This document will show you how to add a template with WooCommerce product categories to your mega menu, using Elementor (free) and the Astra Pro Nav Menu module.

Please follow these steps:

Step 1 – Make sure that you have the Elementor plugin and Astra Pro Addon installed and active. Also, make sure Nav Menu Module is activated in Astra Settings.

Step 2 – Navigate to Dashboard > Templates > Add New.

Step 3 – In the dropdown menu, choose “Section”, name your template (this can be any name; we used “Mega Menu Item 1”), and click “Create Template”. This will create your new template and open an Elementor editor.

Step 4 – In Elementor editor, add a “Section” and the “Shortcode” widget. Add the following WooCommerce code to the shortcode widget:

[product_categories number=”4″ columns=”4″ hide_empty=”0″ orderby=”name” order=”desc”]

This is the WooCommerce shortcode. You can find out more about it and possible variations in this article.

Using the Elementor Pro, you can use the Elementor “Product Categories” widget instead of the Shortcode widget.

Click “Publish” to save your template.

Step 5 – Now, it’s time to create a mega menu. To do this, navigate to Appearance > Menus. Expand the menu item under which you want to add a mega menu by clicking on it (we named this item “Background Image”).

Step 6 – Click on the “Astra Menu Settings” button, and tick the checkbox for the Enable mega menu option. This will create a mega menu under this item. You can also style your mega menu in this step (width, padding, etc.)

Step 7 – Next, add a new menu item (we named it “Shop by Categories”) under the mega menu and click on the “Astra Menu Settings” button.

Step 8 – In the Content Source dropdown menu, select the “Template” option. In the Template field, type in the name of your template and select it from the list. Click “Save” to add this template to your menu item.

And here’s how it’ll look on the front end.

If yes, this article will help you understand why it is happening and how to fix it –

Why?

One of the changes that came with Astra theme version 3.4.0 was – Deprecated the Cart Style ‘None’ & merged it with the existing option ‘Outline’ for WooCommerce and EDD.

What does this mean?

Astra offers an option to add cart in the header. When you add cart, you will observe styling options under Design tab.

Prior to version 3.4, cart had three styling options – None, Outline and Fill. With Astra 3.4, ‘None’ option was deprecated and was merged with ‘Outline’ style. This style adds a border around the cart. So if you have set cart style to none, it will be replaced with outline and will add a border around cart.

This is why you see border around the cart as you update Astra to 3.4

How to fix?

Astra Pro version 3.4.2 comes with a solution for this by providing a new ‘Border Width’ option for the Cart element. With this new option, you will be able to set the width of your Cart border, as well as remove it.

So if you wish to remove this border just set width to zero.

You can visit customizer and go to Header Builder > Cart > Design > Style > Border Width and set it zero.

With this feature, you can design a layout in one place and display it on multiple pages/posts. This is useful for displaying the same information on different posts/pages to attract users. You can use this for CTAs, attractive sales offers, special discounts, important information, and so on.

You can completely customize the layout and easily put it on any page/post at the selected location.

Let’s see how this option works. Before we start, make sure to have the Astra Pro plugin is activated.

Add Inside Post/Page Content Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the “Add New” button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the “Inside Post/Page Content” option.

Step 4 – Now, you can design a layout that you want to display on Gutenberg pages/posts. Further, you can design it with the Block Editor, Elementor, or Beaver Builder.

Inside Pages/Posts Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Inside Pages/Posts Layout Type options.

Location Settings

You will observe two options under Location on the post/page

1. After a certain number of blocks – This option will allow you to display your custom layout after the selected number of blocks on the Gutenberg page/post. Further, you also get an option to enter – Block Number. Here you can set the number of blocks after which your custom layout can display.

2. Before certain number of Heading blocks – This option will allow you to display your custom layout before the selected number of Heading blocks on the page/post. Note that only native Gutenberg heading blocks and heading added with the UAG plugin will be considered. Further, you also get an option to enter – Heading Block Number. Here you can set the number of Heading blocks before which your custom layout can display.

To illustrate, you can check the example below:

Display And User Role Settings

Next, you can set exact pages/posts where you want your inside pages/posts content to be used. Thus, you need to adjust Display and User Rule Settings.

To do this, click on the “Display On” option dropdown and select the required display locations. In addition, you can exclude some locations using the “Do Not Display On” option.

If you wish to restrict this custom layout visibility to some user roles only, you can do so with the User Roles option.

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration Settings

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Done!

For existing users –

Those who have already set No Toggle menu style –

1. The style will be active, and won’t have any effect.
2. But as soon as, user change menu style to anything else ( Fullscreen / Flyout / Dropdown ) the No Toggle menu style will be removed from their end.

For new users –

By default this style won’t be visible for selection.

And if in case, you want to get back the No toggle menu style, here is a filter for this –

add_filter( 'astra_no_toggle_menu_style_deprecate', '__return_true' );

Note:

In this update of Astra theme v2.5.0 and Astra Pro Addon v2.6.0, we bring the following changes –

1. [ Deprecated ] – We are pulling the plug on the No Toggle Menu Style

2. [ NEW ] Adding a new Mega Menu Width option – Full Width Stretched

3. [ UPDATE ] :- Following are the selectors which are updated in this release –

Header selectors in Addon

Header selectors in Addon -

Normal Header -

    Primary Header -
        - CSS Prefix                                = .main-header-menu
        - For menu li                               = .main-header-menu .menu-item
        - For menu li -> current menu item          = .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .main-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .main-header-menu .sub-menu .menu-link

    Above Header -
        - CSS Prefix                                = .ast-above-header-menu
        - For menu li                               = .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-above-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = .ast-below-header-menu
        - For menu li                               = .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-below-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-below-header-menu .sub-menu .menu-link

Transparent Header - 

    Primary Header -    
        - CSS Prefix                                = .ast-transparent-header .main-header-menu
        - For menu li                               = .ast-transparent-header .main-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .main-header-menu .sub-menu .menu-link

    Above Header -
        - CSS Prefix                                = .ast-transparent-header .ast-above-header-menu
        - For menu li                               = .ast-transparent-header .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = .ast-transparent-header .ast-below-header-menu
        - For menu li                               = .ast-transparent-header .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-link

Page Header -

    Primary Header - 
        - CSS Prefix                                = .ast-advanced-headers .main-header-menu
        - For menu li                               = .ast-advanced-headers .main-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .main-header-menu .sub-menu .menu-link

    Above Header - 
        - CSS Prefix                                = .ast-advanced-headers .ast-above-header-menu
        - For menu li                               = .ast-advanced-headers .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-link

    Below Header - 
        - CSS Prefix                                = .ast-advanced-headers .ast-below-header-menu
        - For menu li                               = .ast-advanced-headers .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-link

Sticky Header -

    Primary Header -
        - CSS Prefix                                = #ast-fixed-header .main-header-menu
        - For menu li                               = #ast-fixed-header .main-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .main-header-menu .sub-menu .menu-link
    
    Above Header -
        - CSS Prefix                                = #ast-fixed-header .ast-above-header-menu
        - For menu li                               = #ast-fixed-header .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = #ast-fixed-header .ast-below-header-menu
        - For menu li                               = #ast-fixed-header .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-link


PS: For specifically desktop view and for higher weightage of CSS you can use .ast-desktop selector as prefix and similarly for responsive view you can add selector .ast-header-break-point.
Eg- The above CSS will work as follows - .ast-transparent-header .ast-below-header-menu
For Desktop - .ast-desktop .ast-transparent-header .ast-below-header-menu
For Mobile  - .ast-header-break-point .ast-transparent-header .ast-below-header-menu

Following are the Improvement and Fixes we have introduced from this update –

Improvement:

• Gutenberg + UAG support in Mega Menu templates
• Reusable Blocks support in Mega Menu Templates
• Lowered weightage, and Optimized CSS now loading for all header
• Removed extra CSS from headers

Fixes:

• Menu template’s CTA buttons getting full widths.
• Mega Menu colors not applying properly when any Template is used inside Mega Menu.
• Mega Menu not working on Above and Below Headers in some cases.
• Merge menu case not working with Primary hiding last menu item.
• Menu container width mega menu not working when the primary menu is disabled.
• Mega Menu Column heading color not working for Above Header & Below Header.
• Related products CSS not working properly when using Elementor pro related products for WooCommerce.
• Elementor popups are not working in the mega menu.
• Elementor template’s anchor links inside mega menu not working.
• Background image from Primary Header not inheriting in Sticky Header.
• Sticky header color not reflecting when we select animation style as ‘none’.
• Left padding missing for submenu in mobile devices.
• Every mega menu template’s link showing submenu arrow on responsive devices.
• Font-size of Above Header submenus works alternately for tablet & mobile.

You will find the new option under the same section of Page Header. Now you will instead find the options to enable the Parallax on specific devices where you want to display the Parallax effect.

The main reason we have implemented this option?

• Some images do not appear properly with the Parallax effect on responsive devices like mobile phones. In such cases, users can disable the parallax effect on Mobile and vice versa.

The New select option contains the following choices –

1. None = Disable Parallax across all devices.
2. Desktop + Mobile = Enable parallax on both the devices.
3. Desktop = Enable parallax on just Desktop ( Disable on mobile )
4. Mobile = Enable parallax on just Mobile ( Disable on Desktop )

How to Enable the Parallax Effect on Responsive Devices?

1. Create a new Page Header.
2. Now, In their settings, You will notice that the old option ( checkbox ) to enable Parallax has been replaced with the new option ( Dropdown ).

Note: We have also taken care of the Existing and New Users with this Improvement.

For existing users:

We will migrate the already set values, so if the user had the option enabled, it will work as it is and the parallax effect will be enabled after updating to 2.2.5 or above.

Users will now be able to select the Options from the responsive devices as per their requirement.

For new users:

By default, the Parallax will be set to None and it can be changed as required for the responsive devices.

Display and User Role Settings

To access display settings, follow these simple steps:

Step 1 – Start editing your Custom Layout;

Step 2 – Click on the Astra icon in the top right corner to open the Custom Layout Settings panel;

Step 3 – Next, click on “Display and User Role Settings“. Now, you can edit display settings in the popup.

Display Settings

With display settings, you can achieve great flexibility in displaying your custom content throughout your website.

You can start with the “Display On” option. Here, you can select specific locations or locations where your custom layout will be displayed. Thus, you can select an entire website, a group of pages or posts, or a specific target.

In addition, you can combine this with the “Do Not Display On” option. Hence, you can add exclusion rules and remove your Custom Layout on some locations while still visible on all others.

Further, you can limit Custom Layouts to be displayed only for specific types of users with the “User Roles” option. In other words, you can show different layouts depending on whether users are logged in or not. Also, you can show different content or hide some content depending on the user roles assigned.

Finally, these can also be combined with the rest of the visibility settings:

• Responsive Visibility – You can choose on which devices you want to display your layouts. This will imporve your website’s repsonsivness;
• Time Duration – You can select start and the end date for the period during which you want your custom layout to be visible. You can use this option perfectly for different notifications or seasonal content.

Displaying Locations

Below, we listed locations available for the “Display On” and “Do Not Display On” options, with their descriptions:

Basic

• Entire Website: Your laouts will show on all pages, post, CPTs, singulars, archives, search, 404;
• All Singulars: You can limit the layout to all single posts/pages;
• All Archives: Also, you can decide to use your layout specificaly for your achives – Monthly, Category, Tag, Author, Search.

Special Pages

• 404 Page: On the page shown when a page doesn’t exist on your site.
• Search Page: On the page that displays search results.
• Blog / Posts Page: On the Blog Archive Page, which is set as the Posts page and lists all blogs on your site.
• Front Page: On the page that is set as a Home page.
• Date Archive: On the Archive page for date, where posts are filtered based on date.
• Author Archive: On the Archive page for the author. Posts by a particular author will be listed here.

Posts

• All Posts: On all blog posts (Single Post)
• All Posts Archive: On all posts archive pages (for example, all posts published by the same author)
• All Categories Archive: On all post category archive pages
• All Tags Archive: On all post tag archives

Pages

• All Pages: On all pages

Specific Target

• Specific Pages / Posts / Taxonomies, etc.: Only on a specific places (for example only one post or page)

We are providing two filters. One to remove the Page Header Title and another one to add the Page Title in the Content Area.

Let’s dive into both the cases and see the filter on how it will work –

Case 1:

How to remove Page Header Title which appears on top of the image. Here, you can remove the Page Header Title on all single pages, archive pages, and posts. Alternatively, you can remove Page Header Title only from single pages (the title will still be visible on archive pages and posts), from all pages (but not posts), or only from your Home page.

Solution 1: You will need to add the following filter, to remove the Page Header Title on all single pages, archive pages, and posts:

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

Solution 2: You will need to add the following filter, to remove the Page Header Title only from single pages:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' ); 
function page_header_title_disable( $title ) { 
  if ( is_page() ) {
    $title = false;
  }
  return $title;
};

Solution 3: You will need to add the following filter, to remove the Page Header Title from all pages but leave it on all posts:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );
function page_header_title_disable( $title ) {
if ( is_singular( 'page' ) || is_archive() ) {
$title = false;
}
return $title;
}

Solution 4: You will need to add the following filter, to remove the Page Header Title only from the Home page:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );

function page_header_title_disable( $title ) {
if ( is_front_page() || is_home() ) {
$title = false;
}
return $title;
};

Case 2:

After removing the Page Header from the Top Banner, we will need to add the title in the below content area.

Solution: Let’s see the filter you will need to add the title to the content area –

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

This is how you can remove the Page Header Title and add the Title in the content section.