Display Settings of Custom Layouts in Astra Pro

Display Settings of Custom Layouts in Astra Pro

Custom Layouts module is available with Astra Pro and allows you to add different types of custom content. In addition, for each layout, you can set display settings. Here, you can set Custom Layouts (same as Page Headers) to be displayed only under specific conditions.

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 pagesAll 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)

WooCommerce Integration Overview in Free Astra Theme

WooCommerce Integration Overview in Free Astra Theme

Astra integrates nicely with WooCommerce. All WooCommerce elements automatically adapt to the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings. That way, you can have your shop up and running immediately with minimum setup. Let』s take a look!

Note: We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the WooCommerce module of Astra Pro Addon.

Astra Pro Addon extends the WooCommerce options with WooCommerce Module.

WooCommerce Settings

Please be sure you have WooCommerce plugin installed. Once you have it installed and activated, you will find a dedicated tab for WooCommerce under the Customizer.

Note: After Astra 2.0, we have combined Astra WooCommerce settings with WooCommerce Default settings in the Customizer. Now you will find the combined settings in the first panel of WooCommerce.

WooCommerce Tab

Under the WooCommerce tab, you will find further options categorized into further tabs.

Note: Now we have brought all the WooCommerce settings under a single WooCommerce tab. While, you will find the Astra settings with the WooCommerce settings in the pointed-out tabs.

Product Catalog

Here you can control how your Shop page looks like. These are available settings:

Shop Archive Content Width: You can choose the default or custom option. If you select the custom setting you can set the Archive Content Width.Shop Columns: The number of columns for each deviceProducts Per Page: Number of Products you want to displayShop Product Structure: Structure of products where you can move elements or disable them.

Single Product Page

Enable or disable breadcrumbs from appearing in this section.

Cart Page

Should you wish to display cross-sell products, you can enable 「Enable Cross-sells」 checkbox.

Product Images

You can set Main Image width and Thumbnail Image Width using Astra along with WooCommerce settings which provides the Thumbnail Cropping options.

Cart Icon in Menu:You can display the cart icon in the menu by navigating to Appearance > Customize > Header > Primary Menu option and enabling WooCommerce as the Last Item in Menu.

Container Setting

You can control container layout independently on WooCommerce pages at Appearance > Customize > Global > Container. The option you set here will affect WooCommerce Shop, Single Product, Cart, and Checkout Pages.Please note, you can override container settings for individual pages through meta settings.

Sidebar

You can control sidebars independently on WooCommerce pages such as Shop, Cart, and Checkout. To set up sidebars navigate to Appearance > Customize > Sidebar.For further control on Single Products, we have provided its own sidebar setting so you can have a totally different sidebar there.You can add widgets in any sidebar from Customizer.

Again, please note, you can override container setting for individual pages through meta settings.

Base Color & Typography

As mentioned at the beginning of the article, all WooCommerce elements automatically adapt with the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the WooCommerce module of Astra Pro Addon.

Related Documents:

Ultimate Guide on WooCommerce Shortcodes

New Header Button Options in Astra theme (Old Astra Header)

New Header Button Options in Astra theme (Old Astra Header)

Note:

We have released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now, you will be able to add the Button element visually using the Header builder and will find the same options of Open in a New Tab and Link Rel [Refer this screenshot]

Below are the new options introduced before Astra theme version 3.0.0 and where you can find them

The button field of Astra theme』s version 2.3.0 introduces two new options for Button which are – Open in a New Tab, and possible to add a nofollow, follow, and other using the rel attribute.

Note: You can refer to the following article to understand the working of rel attribute for any button module.

Typography options for Header Button

Astra theme version 2.5.0 brought Typography options for Header Button.

With new typography options, you can choose the Font family and set the Font Size and Weight, add Text Transform or set the Line Height and Letter Spacing.

Custom 404 Page

Custom 404 Page

You can design a custom 404 page using the Custom Layout module available with Astra Pro. Please refer document, to begin with, the Custom Layout module.

This 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.

Selecting a layout for the 404 page will replace the default 404 page content with your custom content.

You can design a 404 page with any page builder.

404 Page 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 404 Page Layout Type options.

404 Page Display Settings

Disable Primary HeaderDisable Footer Bar

Display and User Role Settings

You can decide to display your custom layout set as a 404 page only for specific user roles. You can add more than one user role with the 「Add User Role」 button.

Responsive Visibility

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

Time Duration

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.

WooCommerce Module Overview

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

Related Documents –

Colors & Background options for WooCommerceUltimate Guide on WooCommerce Shortcodes

Download Astra Pro With Composer

Download Astra Pro With Composer

Composer is a dependency manager for PHP, which you can use for your WordPress websites. This document will show you how to manage Astra Pro on your projects using Composer.

With Composer, you can add all of your standard themes and plugins to a new WordPress site from one place. Also, you can keep your websites updated the same way.

Configure The Composer.json File

To update or install the Astra Pro plugin with Composer, you first need to configure the composer.json file. 

Here, we assume that you already have the file in your website』s root directory. Also, we are assuming that you have set your project. Check this article if you need help installing Composer, adding composer.json file, or setting up the project.

Let』s get started.

Note:

If you』re installing an Astra Pro for the first time on your website, the plugin will not be activated in this process. Once you import the plugin to your website, you will need to log in to your Dashboard and activate your Astra Pro license.

Code Example

You can check the example of the entire code:

{
"name": "example/example",
"type": "project",
"description": "Project description",
"require": {
"brainstormforce/astra-addon": "^3.0"
},
"extra": {
"installer-paths": {
"wp-content/plugins/{$name}/": ["type:wordpress-plugin"]
}
},
"repositories": [
{
"type": "package",
"package": {
"name": "brainstormforce/astra-addon",
"version": "3.6.3",
"type": "wordpress-plugin",
"dist": {
"type": "zip",
"url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
},
"require": {
"composer/installers": "^1.11"
}
}
}
]
}

Further below, we』ll show you how to make this work.

Add Astra Pro Package And Version Constraints

"require": {
"brainstormforce/astra-addon": "^3.0"
},

You need to add the following line to your composer.json file under the 「require」 key. This will tell Composer to add the Astra Pro package to the list of packages your project depends on. 

Also, this will set the Astra Pro plugin version constraints to any stable version above 3.0.0.

Repositories Arrey

"repositories": [
{
"type": "package",
"package": {

}
}
}
]

Next, you need to register Astra Pro Package Repository in your composer.json file. To do this, you must first edit the Astra Pro Package object. 

repositories: Repository Arrey containing Astra Pro Package object

ElementDescriptionTypepackagePackage description for Astra Pro version which is requestedpackage element

Astra Pro Package Object

The 「package」 object contains data on the Astra Pro package you are requesting. Here, you need to modify the version string for each update.

"package": {
"name": "brainstormforce/astra-addon",
"version": "3.6.3",
"type": "wordpress-plugin",
"dist": {
"type": "zip",
"url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
},
"require": {
"composer/installers": "^1.11"
}
}

package: Astra Pro Package Description Object

ElementDescriptionTypeNotesversionThe Astra Pro version which is requestedstringYou need to specify the exact version in format 「X.X.X」 (e.g. 「3.6.3」) for each update.distThe packaged version of Astra Pro stable version filesPackage data objecturlDownload link with authentication parametersstringurl element

Also, you need to update the url parameters by adding your Astra Pro license key and a domain of the website on which you』re updating the plugin.

url: URL parameters

ParameterDescriptionTypeRequiredNotesPURCHASE_KEYThe Astra Pro keystringRequiredThe key can be acquired from our Store at Account > LicensesSITE_URLThe domain of your website (without HTTPS)stringRequiredValid format is: 「example.com」 (not 「https://example.com」)

URL example:

https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key=fdsi3h3iu4n22l344n4l2&site_url=example.com

Install or Update Astra Pro With Composer

Now that your composer.json is configured, you are ready to update or install Astra Pro on your website. You can install or update Astra Pro by running the following command in Composer:

composer update

Starter Templates – Restore Customizer Backup

Starter Templates – Restore Customizer Backup

While importing a complete site with starter templates, you』ll see a popup offering the option to 「Delete Previously Imported Sites」.

This option will delete all previously imported data from starter templates, including pages, posts, media, customizer settings, etc.

But, at the same time, the plugin will create a backup only for your existing customizer settings. Thus, if you access your website files, you』ll find the backup file following this path: /wp-content/uploads/astra-sites/. This is automatically done to give you an option to save time applying style, typography, and colors again.

In case you need to restore these customizer settings, just follow the steps below:

Note:

The below-mentioned steps and Import / Export Customizer Settings plugin work only with the Astra theme.

Step 1 – Access the root folder of your WordPress site via FTP client (e.g. Filezilla), and follow this path: /wp-content/uploads/astra-sites/. Your latest backup file will mostly appear on the top. In addition, backup names will contain the date and time when the files were created.

Step 2 – Once you find the backup you need, download the file to your computer. Make sure you download the .JSON file and NOT the Text file.

Step 3 – Log in to your website, navigate to Dashboard > Appearance > Astra Options, scroll down to find the 「Import / Export Customizer Settings」 option, and click Activate. Accordingly, this will install and activate the 「Import / Export Customizer Settings」 plugin with one click.

Step 4 – Once you activate the plugin mentioned above, you will see a new import option on your 「Astra Options」 page. Hence, you will find the 「Import Settings」 in the sidebar (refresh the page once if you don』t see the option). Now, import a backup file you downloaded in step 2 to restore your Customizer settings.

You』re done!

Your new site will now have the same Customizer settings you previously used.

How to Manage Sidebars in Free Astra Theme?

How to Manage Sidebars in Free Astra Theme?

With Astra you get three Sidebar options – right sidebar, left sidebar, and an option that disables the sidebar. You can manage Sidebars in two ways.

Globally for the site from CustomizerOn particular Pages and Posts

Quick Steps on How to Manage Sidebars on Your WebsiteStep 1: Find the Sidebar Options under the customizer [ Appearance > Customize > Sidebar ] to edit Sidebar Options globally.Step 2: Or manage the Sidebar Options on particular Pages and Posts from the Meta Settings.

Manage Sidebar globally in the customizer

Step 1 – You can find settings under Appearance > Customize > Sidebar;

Step 2 – To make your sidebar visible, you will need to set the Right or Left Sidebar in the appropriate dropdown menu;

You can set a sidebar for the entire site at the Default Layout dropdown menu. Also, you can set a sidebar individually for individual locations: Pages, Blog Posts, and Archives.

To disable the sidebar on any of these locations, select the 「No Sidebar」 option in the dropdown menu.

Step 3 – Once at least one of your sidebars (left/right) is set, you can adjust the sidebar width. You can set the percentage of your content area that the sidebar would take:

Step 4 – Finally, navigate to Dashboard > Appearance > Widgets to add items to your sidebar. That』s it. Your sidebar is ready now.

Note

If you followed the above-mentioned steps and you still don』t see the sidebar, please check your sidebars. Here, it』s possible that there you didn』t add any widgets to your sidebar. You can set this in the Customizer by navigating to Customize > Widgets.You can also check the FAQs at the bottom of this article.

Additional Sidebar Options

With Astra Pro, you can activate the addons for integrated plugins like WooCommerce, LifterLMS, LearnDash, etc. These add-ons can be activated at Appearance > Astra Options > Astra Pro Modules. As a result, you will see additional options to manage dedicated sidebars in your Customizer:

Managing sidebar for particular pages or posts

Astra also allows you to manage sidebars for a particular page or post through the meta settings.

FAQs

How Can I Create / Manage My Sidebars?Once you have enabled your sidebar, you might want to add or remove some widgets, set a different order, or modify some settings. You can do this in the Customizer by navigating to Customize > Widgets. Also, this can be accessed from your backend too by navigating to Dashboard > Appearance > Widgets. Here, you will be able to organize your sidebar and other widget areas. Once you navigate to your Widget panel, you will notice all of your existing sidebars. Now, you need to expand your desired sidebar and add widgets to it. Further, each widget has its own settings which allow you to make additional adjustments.

Does Astra Theme Supports Block-Based Widget Editor (WordPress 5.8)Since WordPress version 5.8, you can use Blocks in your widget areas together with legacy widgets. The Astra theme is fully compatible with WordPress 5.8 and Block-Based Widget Editor since version 3.6.5. Keep in mind that some of the Astra Header and Footer widget settings (font, color) were deprecated for better compatibility – if you need these options, you can find more details enabling them in this article.

How To Disable the Block Editor Support for Widgets

How To Disable the Block Editor Support for Widgets

WordPress 5.8 brought many changes, and one of these is using Blocks in Widget Areas. The Astra Theme supports the use of a block editor and is fully compatible with the mentioned changes. This document will help you if you need to disable Block Editor for Widgets.

Though it』s a great feature, some users might still need this to be reverted to the previous widget editor. You can disable Astra』s Block Editor support for widgets by using a custom code provided in this document. Let』s show you how to do it.

Why Did This Happen?

WordPress version 5.8 came with a large number of improvements and changes, making a large leap forward for both WordPress and its Block Editor.

Using the Block Editor to manage Widget areas makes it easier to add different blocks to any widget area without coding or using shortcodes.

Having that Astra is fully compatible with this change, you』ll be able to use blocks directly with Astra Customizer options too, including the Header and Footer Builder.

How To Change This?

If for any reason you need to revert this to the previous Widget editor, you can disable Astra』s block editor support for widgets by adding a custom code.

You can add the following custom code to the functions.php file of your Child Theme:

add_action( 'after_setup_theme', 'astra_remove_theme_support' );
function astra_remove_theme_support() {
remove_theme_support( 'widgets-block-editor' );
}

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.

Custom Layouts Overview

Custom Layouts Overview

This 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.

Custom Layouts is a very powerful module offered in Astra Pro. With this module, you can create a totally custom header, footer, 404 pages as well as custom content or code on various hook locations.

Quick Steps on How to Create Custom Layouts Using the Custom Layout ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Custom Layouts module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Astra Options > Custom Layouts ] to edit Custom Layouts settings

How To Add A Custom Layout?

After activating a module, you will also find the Settings option. Further, clicking on this option will take you to Dashboard > Appearance > Custom Layouts. Here, you can add new custom layouts or edit the existing ones:

When you click on 「Add New」, you will see the popup where you can select the layout type you wish to create:

Next, you can manage Custom Layouts using options located in the right side menu:

In addition, you can change your layout type using the 「Layout」 dropdown. Accordingly, other options will adjust to your selection. 

Since Astra Pro version 3.6.4 the Custom Layout Settings are located in a separate Gutenberg sidebar panel. Thus, if you don』t see the Custom Layout settings, you can access the panel by clicking the Astra icon (top right corner) as shown below:

Manage Custom Layouts

Custom Layouts come with some great options that allow you to, for example, make a custom sticky header. Also, you could add a custom code to almost any place in your website using Hooks, and many more. 

Though each custom layout type has some specific options available, these are some common settings available for all layouts:

Display and User Role Settings:Display On – select the locations where you want to display your custom layouts.Add Exclusion – select the locations which you want to exclude from a display rule.User Roles – choose which user roles should be seeing your custom layoutResponsive Visibility: Choose whether to show your custom layouts on all devices or choose individually: desktop, tablet, or mobile.Time Duration Settings: Set the layout start time and the end time. This will make your layout visible only for that choosen period.

In addition, since Astra Pro version 3.6.4 you can choose to enable or disable specific custom layouts added to your website:

For more information on each custom layout type, please check the dedicated articles on the links below:

HeaderFooter404 PageHooksInside Post/Page Content