In this document, we will explore these new features in detail, highlighting how they can help improve your online store’s functionality and enhance the user experience for your customers. Let’s get started.

Shop page:

To add this functionality to the shop page, please navigate to Appearance > Customizer > WooCommerce > Product Catalog > Shop Product Structure.

Under Shop Product Structure, you will see the option Add To Cart. Once you enable this feature by clicking on the eye button, you will be able to select the action triggers from the drop-down.

Default: Selecting this option will add the default feature of WordPress and WooCommerce when a user adds a product to the cart.

Slide in Cart: Once the Add to Cart button is clicked the slide in the cart will open where users can see the added products in the flyout panel.

Redirect to Cart page: With this trigger option, as the name suggests, it will redirect users to the Cart page once the add to cart button is clicked.

Redirect to checkout page: With this trigger option, the user will be redirected to the Checkout page once the add to cart button is clicked. By customizing the WooCommerce checkout page you can create a frictionless experience.

Single Product page:

To add this functionality to the single product page, please navigate to Appearance > Customizer > WooCommerce > Single Product > Single Product Structure.

Under the Single Product Structure, you can find the “Add To Cart” option. By clicking on the eye button, you can activate this feature and choose the action triggers from the drop-down menu.

Default: When you choose this option, WordPress and WooCommerce’s default features will be added to the cart as soon as a user adds a product.

Real-Time Add to Cart: This option lets you update the quantity of the products directly from within the cart. Here is how it works on the front end. For more information on this feature, please click here.

Slide in Cart: After clicking the Add to Cart button, the Slide in Cart will open, allowing users to view the added products in the flyout panel.

Redirect to Cart page: As the name suggests, selecting this trigger option will redirect users to the Cart page when they click the add to cart button.

Redirect to Checkout page: With this trigger option, the users will be redirected to the Checkout page once the add to cart button is clicked.

Conclusion

The Add to Cart Trigger Actions for Shop and Single Product Pages provide users with the flexibility to determine the next action for their customers after they click the Add to Cart button. This user-friendly behavior not only enhances the overall shopping experience but also helps in boosting site sales by reducing users’ back-and-forth time. With these new trigger actions, online store owners can optimize their checkout process and ensure that customers are seamlessly guided through the buying journey, leading to higher customer satisfaction and increased sales.

Primary Menu

The primary menu is the navigation bar located at the top of your website, which typically includes links to your main pages or categories.

To get started, please navigate to the WordPress Dashboard and click on Appearance>Customize>Header Builder> Primary Menu and head over to the design tab.

Scroll down to the Font Section and click on the pencil icon next to the Menu Font option.

This will open the options to change the appearance of the primary menu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Secondary Menu

If your website is using a secondary menu to display a second set of menu items, you can simply navigate to Appearance>Customize>Header Builder>Secondary Menu and head over to the design tab.

Similar to the primary menu, you will also have to scroll down to the Fonts Sections and edit the typography of the secondary menu by clicking on the pencil icon next to the Menu Fonts.

Sub-Menu (Pro-Feature)

A submenu is a secondary menu that is accessed through a main menu item. It typically appears when you hover over or click on a main menu item and contains a list of additional options that are related to the main menu item.

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. Check out our pricing page to know more about the Astra Pro Addon.

Once you have purchased and activated the Astra Pro addon plugin, you will need to activate the Typography Module by clicking on the Astra option on your WordPress dashboard.

To edit the sub-menu typography, please navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “SubMenu Font”. To edit the typography, simply click on the pencil icon next to it.

Similar to the primary and secondary menu options, this will open the options to change the appearance of the submenu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Mega-Menu Heading (Pro-Feature)

Typically, a mega menu is a dropdown menu or expandable navigation area that usually contains more than just text links. If you are not sure how to create a mega menu on your website, here is an article that will guide you through the process. This is also a premium feature of the Astra theme and you will need to install and activate the Astra Pro Addon plugin and also activate the Nav Menu module.

To modify the typography of the Mega Menu Heading, you will need to navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “MegaMenu Heading”. To edit the typography, simply click on the pencil icon next to it.

With the Latest Astra Version 4.0.0, we have revamped the entire Nav /Mega Menu. The whole thing has changed now. Instead of a pop-up, we brought a right-side flyout design.

The Nav Menu Addon in Astra Pro enables you to add and create Mega Menus. Mega Menus are a type of expandable menu where different choices are displayed.

Astra provides stunning features to design Mega Menu functionality with Nav Menu addon.

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.

If you want to learn more about how that’s done here’s a walk-through video made by WPBuilders.

Activate Nav Menu Module

Please follow the below-attached steps to activate the Nav Menu module.

Step 1 – Make sure you have the Astra Pro plugin installed and activated. 

Step 2 – Activate the add-on from the WordPress Dashboard → Astra → Dashboard → Nav Menu

Create the Mega Menu

If you want to create a Mega Menu, you need to enable the Mega Menu functionalities for the top-level menu item whose child menu items you’d like to turn into a Mega Menu. 

Follow these steps to do just that:

Step 1 – From the WordPress dashboard navigate to Appearance → Menus.

Step 2 – Select the menu item under which you want to add a mega menu.

Step 3 – Expand this menu item and click on the “Astra Menu Settings” button

Prior to Astra Version 4.0.0., you had seen the pop-up window. But, this time we brought a right-side flyout design with ‘General’ and ‘Design’ Options.

General Settings:

Mega Menu:

Enable the Mega Menu toggle. This will enable the mega menu options for all submenus of the parent menu. It provides options for the top-level/parent menu.

Mega Menu width – Set the width of your mega menu here. These are the available options:

• Content – set the menu width to your content width
• Menu Container Width – limit the width of your Primary menu 
• Full Width – set the width of your mega menu to the width of your screen but limit your menu content to the content width.
• Full Width Stretched – set the width of your mega menu to the full width, edge-to-edge.
• Custom Width – set the custom width value in pixels

Icon:

From the list of available icons, you can choose the icon of your choice to be displayed Before or After the Menu Label. Also, you can set the icon size and spacing here.

Highlight Labels:

This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.

Design Options

Background Type

Background Color/ Image will be set to the mega menu box for the parent menu. You can adjust the background image with settings like Background Repeat, Background Size, and Background Position.

Override Colors for this mega menu?

You can set colors for the menu items present in the mega menu box for the parent menu. Available options are Text/Link Color, Text/Link Hover Color, Column Divider Color.

Spacing

You can set Margin and Padding for the menu items.

For a better understanding, refer to the attached screenshot.

As you can see in the above-attached screenshot, I have created an “Inside Post/ Page Content” Custom layout using Astra Pro Add-on. And using the “Display and User Conditions”, I want to show the created custom layout on all posts.

Prior to the Astra Version 4.0, you must navigate to the WordPress dashboard to edit Custom Layout & Page Header. But, with the latest Astra Version 4.0 feature, you have easy access to edit Custom Layout & Page Header from the front end of this admin bar quick links. Using this feature, you can easily navigate on that edit page header/custom layout screen.

That’s why this document is brought into solving that issue. We will put the complete information on changing WooCommerce image width. Before digging into the guide of How to change WooCommerce product image width, you need to know why doing this is vital for your website.

Benefits of changing WooCommerce product image width

Here are the 2 major advantages of customizing WooCommerce product image width.

No blurry images: images set into the wrong size are likely to be blurred on the website, leading to a bad impression to users.

High website performance or Speed: the larger images, the slower time your website will take to load. As a result, it causes less revenue and unsatisfied customers.

How to Customize WooCommerce product image width

In general, to set the image width, follow these steps that we are going to show you, along with lively references to keep track of. On your WordPress dashboard, navigate to Appearance > Customize > WooCommerce > Single Product. Here, you can see the Image Width option in terms of percentage.

While building your eCommerce website with Woocommerce and Astra Pro, you will notice the Misc module. Under this module, you will find an option to enable Product Quantity (Plus-Minus).

Navigate to Appearance> Customize > Woocommerce > Misc > Quantity Plus and Minus

Using this option, you can update the quantity of the products directly from the product page. This option comes with three different layouts that you can choose from. Have a glance at the below-attached video to get an idea of how it works on the front end.

Sale Notifications

To change the sale badge UI for all products, navigate to

Appearance>Customize>WooCommerce>Misc>Sale Notifications

Look at the below-attached image for a better understanding of how sale notifications will reflect on the front end when you make changes.

To change the color of the Sale badge, navigate to the ‘Design’ tab.

Under ‘General Colors’, you can see the sale badge color option. You can set the sale badge text, and background/border color here.

This feature provides users with the flexibility to customize the appearance of sale badges, allowing them to align the design with their brand identity and website aesthetics.

By enabling users to modify the color of sale badges, Astra empowers businesses to create visually appealing and attention-grabbing promotional elements. This customization option ensures that sale badges seamlessly integrate into the overall design of a website, enhancing the user experience and maintaining brand consistency.

Moreover, the ability to change the color of sale badges enables businesses to experiment with different color schemes, making it easier to capture the attention of potential customers and drive conversions. Colors have a powerful impact on human psychology, and by selecting the right color for sale badges, businesses can evoke emotions, highlight discounts, and create a sense of urgency.

Modern input styles

This option enables the modern input styles for the overall e-commerce setup on your entire website. To activate the page, you must navigate to

Appearance>Customize>Woocommerce>Misc>Input field style

Sale Notifications

Using this option, you can change the sale badge UI for all products.

Quantity Plus and Minus

Using this option, you can update the quantity of the products directly from the product page. This option comes with three different layouts that you can choose from. Have a glance at the below-attached video to get an idea of how it works on the front end.

Steps navigation

This option lets you display the navigation of the shop funnel to your user during the checkout page so that the users can navigate to the subsequent pages if they need to change or modify anything.

Why do I need to disable this request?

These requests are enabled by default on fresh installation of the WooCommerce plugin and seems like a great feature to have. The only downside of this feature is that if you are on a slow hosting provider, it might take up to 3-5 minutes to load and thus reduces the overall loading speed of your entire website. We recommend you to disable this feature if you are on a slow hosting provider.

How to disable the cart fragments?

You can use the following steps to disable the cart fragments script on your WooCommerce website:

Step1: Navigate to the WooCommerce Settings and click on products

Step 2: uncheck the box that says “Enable Ajax add to cart button archive”

Step 3: Check the box that says “Redirect to the cart page after successful addition”

These options are technically optional but this will ensure to bypass any cache plugin that you have installed on your website.

Step 4: in order to dequeue the JavaScript you may need to add the following snippet into the functions.php file of your child theme. If you are not sure what a Child Theme is, here is an article that will guide you through. Please navigate to the appearance and theme file editor and click on the child theme’s function.php file.

Copy the snippet below and paste into the bottom of the function.php file. Don’t forget to save the file.

/** Disable Ajax Call from WooCommerce */
function sert_dequeue_woocommerce_cart_fragments() { 
	wp_dequeue_script('wc-cart-fragments'); 
}

add_action( 'wp_enqueue_scripts', 'sert_dequeue_woocommerce_cart_fragments', PHP_INT_MAX); 

The aforementioned code snippet just dequeues the entire JavaScript file and disables the WooCommerce cart fragments to ensure that your site runs faster even on the slow hosting providers.

You might wonder why you need Custom Post Type (CPT)? Simply put, in some situations adding content to existing post types and templates can’t provide the needed result. Thus, you have the option to add a completely new post type and shape it based on your needs.

Adding Custom Post Type (CPT)

Adding CPTs to your website can bring a lot of advantages. For example, you can add a CPT with a custom layout and functionality making it suitable for non-standard content. Also, each CPT has a custom taxonomy that can help you improve the way your content is organized.

To illustrate, we will import the “Businessly” Starter Template and create an additional CPT called Sessions. 

The template we will use contains an “Interactive Sessions” page. Each session has some specific information like dates, host, and speaker. We will show you how to create a CPT containing these options. In addition, we’ll set the “Interactive Sessions” page as an archive for displaying Sessions. 

Before starting, make sure you have your Astra theme and your Astra Child Theme set. Also, you can import the “Businessly” Starter Template to your website. If you need any assistance importing the template, you can check this document.

Now, let’s show you how to register our Sessions CPT.

Register Custom Post Type

You can register your custom post type and give them any name you want. Also, you can add an unlimited number of CPTs to your website.

To register a CPT you need to add a few lines of code to the functions.php file of your Astra theme. The issue with this is that your CPTs will be removed with every theme update. For this reason, we will register our CPT to the functions.php file of the Astra Child Theme. To explain, the child theme will keep all our registered CPTs and other changes safe when updating the Astra theme. If you still don’t have the child theme installed, check this doc for instructions on how to do it.

Now, to register your CPT follow these steps:

Step 1 – Log in to your website, and navigate to Dashboard > Appearance > Theme File Editor. Here, on the top right side of the screen, select your Astra Child theme;

Step 2 – Next, in the Theme Files list, click on the functions.php to open the file;

Step 3 – Under the existing code in the file, add the following:

// Custom post type function
function astra_custom_post_types() {
// Basic Session Post Type
register_post_type('session', array(
'public'    =>  true,
'rewrite'   =>  array('slug' => 'sessions'),
'labels'    =>  array(
'name'  =>  'Sessions',
'add_new_item'  =>  'Add New Session',
'edit_item' =>  'Edit Session',
'all_items' =>  'All Sessions',
'sinuglar_name' =>  'Session'
),
));
}
// Hooking up the function to the Astra Theme
add_action('init', 'astra_custom_post_types');

The register_post_type is a WordPress function used to register post types. To use this function, you just need to pass it two arguments: custom post name, and an array of post type options. 

Further, you can extend the code any way you need. For example, some of the additional arguments are:

• Add the Block editor support: ‘show_in_rest’  =>  true
• Add the CPT archive:‘has_archive’  =>  true
• Add features to the CPT post editor. In this example we added title field, editor, excerpt, featured image, revisions and custom fields: ‘supports’  =>  array(‘title’, ‘editor’, ‘excerpt’, ‘thumbnail’, ‘revisions’, ‘custom-fields’)
• dd icon to an admin menu item (dashicon) for your CPT. In our example, we chose a calendar icon. You can check the list of available dashicons and use the one you need by changing the icone name: ‘menu_icon’ =>  ‘dashicons-calendar’

Now, our CPT code looks like this:

// Extended Session Post Type
register_post_type('session', array(
'public'    =>  true,
'has_archive'  =>  true,        
'supports'  =>  array('title', 'editor', 'excerpt', 'thumbnail', 'revisions', 'custom-fields'),
        	'show_in_rest'  =>  true,
'rewrite'   =>  array('slug' => 'sessions'),
'labels'    =>  array(
'name'  =>  'Sessions',
'add_new_item'  =>  'Add New Session',
'edit_item' =>  'Edit Session',
'all_items' =>  'All Sessions',
'sinuglar_name' =>  'Session'
),
'menu_icon' =>  'dashicons-calendar',
));

Also, the list of labels can be extended if needed. In addition, you can extend the code even further by adding all your arguments using the $args variable. Here, you would use the following code for registering your CPT:

register_post_type( 'movies', $args );

You can find more details and the full list of available CPT options here.

Now you registered your new CPT and you will notice a matching new menu item in your Dashboard menu.

Update permalink structure

If you created and visited a new CPT post, you’ll notice your website is displaying a “Page Not Found” notification. This happened because the WordPress permalink structure of your website won’t update automatically when you register your CPT. 
Thus, any time you add a new CPT, you need to update the permalink structure yourself. To do this, navigate to Dashboard > Settings > Permalinks. Though you can change your permalinks here, it’s not needed – just click on the “Save Changes” button.

Creating Custom Template for Your CPT And Archive

Once you’ve registered your CPT, it’s time to check it out on the front end. Now, you’ll notice that it looks the same as your regular posts. The reason for this is that we haven’t added any custom template for this CPT. For this reason, WordPress is using the default template located in the single.php file.

Also, if you check the Archive page, you will notice that it looks the same as other archive pages on your website. The reason is the same.

To create your custom templates, follow these steps:

Step 1 – Access your website root folder and navigate to your Astra Child theme folder (the default path is:  /wp-content/themes/astra-child);

Step 2 – Add separate files for your CPT post and archive. Keep in mind that these files need to be named in the exact format: 

• single-{cpt-name}.php
• archive-{cpt-name}.php

Accordingly, we will name our Session CPT files as:

• single-session.php
• archive-session.php

This will provide you with empty templates which you can build any way you want.

Step 2b – Alternatively, make copies of the original files if you want to use the existing Astra template with some modifications. Here, you can copy the following files from your Astra theme folder (the default path is:  /wp-content/themes/astra-child):

• single.php
• archive.php

Now add these files to your Astra Child theme folder and rename them to: 

• single-session.php
• archive-session.php

This will give you precisely the same template as used by default files. Now you can modify these files and change how your CPT pages look. 

These templates will be applied only to your CPT. Keep in mind that these files need to be placed in your Astra Child folder. Contrary, if placed in your Astra theme folder, the theme update will delete your CPT files.

Update the Container Layout for Your CPT

Though many Astra Customizer settings will be applied to your CPTs, when it comes to container layout there are some limitations. 

Namely, your CPT will follow the website container layout. But, if you want to set a different layout for your CPT you need to add the following code to your Astra Child Theme functions.php file: 

add_filter ( 'astra_get_content_layout', 'custom_post_type_content_layout'); // Update the container layout based on Custom Post Type. 

function custom_post_type_content_layout ( $layout ){ // Add your CPT instead of Session. If you want to use this layout for more than one CPT, you can add them all separating each CPT by coma (eg. 'session', 'events'). 

	if ( is_singular( array( 'session' ) ) ) { 
		$layout = 'boxed-container'; 
	} 
	return $layout; 
}

In the code above, you need to specify the layout option that you want to apply, and CPTs to which it should be applied. You cen use following codes for different layout options:

• Full Width / Streched = ‘page-builder’
• Full Width / Contained = ‘plain-container’
• Content Boxed = ‘content-boxed-container’
• Boxed = ‘boxed-container’

Add Sidebar

Similar to the container layout, the default Sidebar Customizer settings will be applied to your CPTs. 

Thus, to add a sidebar to your CPT, you need to set this as a default value for the whole website:

Step 1 – Navigate to Dashboard > Appearance > Customize > Sidebar;

Step 2 – Under the “Default Layout” dropdown, select the “Left Sidebar” or “Right Sidebar” option.

Adding CPT Content

Previously, we showed you how to add support for the Block (Gutenberg) Editor to your CPT. Thus, you can add your post content using Block editor out of the box.

On the other hand, if you prefer using Elementor or Buiver Builder instead, you will need to enable them for your CPT.

To enable Elementor for CPT, follow these steps:

Step 1 – Navigate to Dashboard > Elementor > Settings and click on “General” tab;

Step 2 – Under “Post Types” check the CPTs you wish to edit with Elementor. Click the “Save Changes” button.

To enable Beaver Builder for CPT, follow these steps:

Step 1 – Navigate to Dashboard > Settings > Beaver Builder;

Step 2 – Click the “Post Types” option and check the CPTs you wish to edit with Beaver Builder. Click the “Save Post Types” button.

Astra Loop

The alternative option to adding a CPT is to use the astra_content_loop(). You can use this option to add a CPT template content to existing post types instead of creating a new Custom Post Type. 
To do this, you need to add this code to the Astra Child Theme functions.php file:

function add_cpt_content() {
    // bail if this current post type is different.
    if ( 'cpt' !== get_post_type() ) {
        return;
    }
    ?>
    <!-- Your custom HTML markup here -->
    <p>My custom theme HTML</p>	
    <?php
}

add_action( 'astra_entry_content_before', 'add_cpt_content' );

Further, if you add your code using this method, any future template changes made by Astra them will not have an influence on the CPT content you added. Thus, there will be no need for you to manually update your content.