Check out this quick video walkthrough covering everything in this guide:

Accessing the Customizer

The WordPress Customizer is a built-in tool that allows you to preview and adjust your site’s appearance in real time. Astra theme is designed to work seamlessly with the Customizer, giving you full control over global styles like colors, typography, buttons, layout settings, and more all from one place.

After installing Astra, you can access the Customizer in two ways: From your WordPress dashboard, go to Appearance > Customise, or click the Astra > Customise option directly from the dashboard.

Setting Your Logo

Adding your logo in the Customizer ensures your brand is instantly recognisable on every page. A clear, consistent logo builds trust and helps visitors remember your website.

1. In the Customizer, click the Style Guide icon, then click the pencil icon next to the logo to edit it.

3. Upload a new logo image or select one from your media library.

4. Astra supports both a standard and a transparent header. Upload your logo for both, if needed.

5. Adjust the logo size using the slider, then click Publish to save your changes.

Adding a Site Icon (Favicon)

Setting a site icon (favicon) displays your brand’s symbol in browser tabs and bookmarks. This small image makes your site stand out and is an important detail for a professional, branded web presence.

1. In the Style Guide, select the Site Icon option, click Select Icon and upload or choose your favicon image.

3. Click Publish to update the icon that appears in browser tabs.

Customizing Button Styles

Customizing button styles in the Customizer guarantees that all calls-to-action are consistent, helping guide visitors and improving conversions.

1. In the Style Guide, select the Buttons section.

2. Choose from preset styles or adjust the border radius for rounded corners.

3. Change the button’s background and text colours as desired.

4. Click Publish to apply your changes across the site.

Setting your brand colors in the Customizer ensures every page and element matches your brand, creating a unified and memorable impression.

Setting Brand Colors

1. In the Style Guide, go to the Brand Colours section, pick your primary brand colour or adjust the global palette for a site-wide colour update.

3. You can also customise individual colours for specific elements.

Updating Fonts

Choosing fonts here applies your preferred typography site-wide, making your content easy to read and visually appealing.

1. In the Style Guide, select Headings to change the font for your titles.

2. Choose a new font from the list; changes will appear instantly.

3. For body text, select the Paragraph Text option and pick your preferred font.

4. Click Publish when you’re satisfied.

Preview and Save

After making any changes, use the Publish button to save and instantly preview your site’s new look.

You’ve now covered the basics of the Astra Customizer! For more advanced options or detailed guides, explore our documentation.

What’s Remained in Global?

The following truly global elements remain:

• Typography
• Colors
• Container
• Buttons

What’s Moved Out of Global?

These options have been relocated to the new General section:

• Scroll to Top
• Accessibility
• Block Editor
• Miscellaneous

The General section consolidates settings that are not purely global but apply to overall site experience:

• Scroll to Top
• Accessibility
• Block Editor
• Miscellaneous
• Breadcrumbs (previously a standalone root option)

This change declutters Global and groups general-purpose settings in one place.

4. Introduction of “Post Types” Panel

Previously:

• Blog had controls for Blog Archive and Single Post.
• Page handled Page and Search Page settings.

Now:

All these content types are grouped under Post Types to provide a more streamlined and intuitive editing experience.

Inside Post Types, you’ll find:

• Blog / Archive
• Single Post
• Single Page
• Search Page

 This makes it easier to manage settings across different post types in one unified location.

Summary of Key Improvements

Why This Revamp Matters

• Cleaner, more structured navigation
• Easier discovery and management of related settings
• Logical grouping based on functionality
• Improved customisation experience for new and advanced users alike

Building on that, we’ve now introduced the Color Switcher widget in Astra Pro version 4.10.0 — a simple yet powerful addition that lets your website visitors toggle between two custom color palettes, such as light and dark modes, with just one click.

Fully integrated into the Header Builder, this widget requires no extra plugins or custom code. It’s designed to enhance accessibility, align with user preferences, and deliver a more modern, personalized browsing experience, making your site not only more functional but also more user-friendly.

What is the Color Switcher?

The Color Switcher Widget is a customizable toggle button that you can place in your website’s header. When clicked, it switches your site between two predefined color palettes:

• A Default Palette – usually your site’s standard (light) mode.
• An Alternate Palette – often used to create a Dark Mode experience.

This feature is completely native to Astra Pro, optimized for performance, and styled to match your website’s design.

What You’ll Need

Before setting it up, make sure:

• You’re using the Astra Theme.
• You have the Astra Pro Addon plugin installed and activated.
• Both the theme and the plugin are up to date with v4.10.0.

How to Add and Use the Color Switcher

Step 1: Open the Astra Customizer

1. In your WordPress dashboard, go to Appearance > Customize
2. Open the Header Builder

Step 2: Add the Color Switcher Widget

1. Click on any available section in the header (e.g., Primary Header, Above/Below Header)
2. Select Color Switcher from the available widgets
3. The switcher icon will appear in the live preview

Step 3: Customize the Widget

Once the widget is placed, you can customize:

• Alternate Palette – Choose the alternate Color Palette.
  • Pro Tip: Use a darker color scheme in the Alternate Palette to offer a smooth Dark Mode experience!
  • Dark Palette Behavior Options:
    • Match OS Preferences – Automatically apply light/dark mode based on your visitor’s system settings.
    • Force Page Reload – Reloads the page when switching modes for optimized performance.
• Icon Type – Choose a style like sun/moon, toggle, etc.
• Icon Size – Adjust to match your header style.
• Button Text – Optionally add custom text to display alongside the icon on the switcher button.
• Visibility – Show on desktop, mobile, or both.

• Design Options
  • Icon/Text Color
  • Backgrond
  • Border Radius
  • Spacing (Margin & Padding)

• Additionally, you can also customize the Colors of your switcher button in transparent sticky headers.

Why Use Dark Mode?

Dark Mode is one of the most popular uses of the Color Switcher. It helps:

• Reduce eye strain, especially at night
• Make your site more accessible and readable
• Give your site a modern and trendy feel
• Increase user engagement and retention
  

By offering Dark Mode through the Color Switcher, you’re improving your website’s usability without adding extra load or plugins.

Preview Your Changes

Once configured, click the switcher icon on your live site preview:

• Watch your color palette change instantly
• Make sure your text, background, and design elements look great in both modes
• Fine-tune as needed before publishing

Compatibility & Performance

The Color Switcher Widget is:

• Fully integrated with Sticky and Transparent Headers.
• Compatible with WooCommerce, LearnDash, Forms, and most plugins.
• Lightweight and performance-optimized.
• Built to work seamlessly with Astra’s Customizer—no conflicts, no bloated scripts.

Common Questions

Need a Visual Walkthrough?

We’re planning to release a walkthrough video for the Color Switcher Widget to help you set it up step-by-step. Once available, we’ll add the link right here—stay tuned!

We hope this guide has helped you understand how to set up and make the most of the Color Switcher Widget, including how to use it effectively as a Dark Mode toggle for your website.

If you have any questions or need further assistance, feel free to leave a comment below — we’re always here to help!

Default Sorting (Alphabetical by Title)

By default, products are sorted alphabetically by their title in ascending order. No additional code is required for this behavior.

Custom Sorting Snippets

1. Sort by Price (Low to High)

Sort products by price in ascending order (lowest price first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_price_low_to_high' );

function custom_product_sort_by_price_low_to_high( $sort_args ) {
    $sort_args['orderby']  = 'meta_value_num'; // Sort by numeric meta value
    $sort_args['meta_key'] = '_price';        // Meta key for product price
    $sort_args['order']    = 'ASC';          // Sort from low to high
    return $sort_args;
}

2. Sort by Price (High to Low)

Sort products by price in descending order (highest price first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_price_high_to_low' );

function custom_product_sort_by_price_high_to_low( $sort_args ) {
    $sort_args['orderby']  = 'meta_value_num'; // Sort by numeric meta value
    $sort_args['meta_key'] = '_price';        // Meta key for product price
    $sort_args['order']    = 'DESC';          // Sort from high to low
    return $sort_args;
}

3. Sort by Date (Newest First)

Sort products by date in descending order (newest products first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_date_newest_first' );

function custom_product_sort_by_date_newest_first( $sort_args ) {
    $sort_args['orderby'] = 'date'; // Sort by date
    $sort_args['order']   = 'DESC'; // Newest first
    return $sort_args;
}

4. Sort by Date (Oldest First)

Sort products by date in ascending order (oldest products first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_date_oldest_first' );

function custom_product_sort_by_date_oldest_first( $sort_args ) {
    $sort_args['orderby'] = 'date'; // Sort by date
    $sort_args['order']   = 'ASC';  // Oldest first
    return $sort_args;
}

5. Sort by Popularity (Best-Selling First)

Sort products by popularity (best-selling products first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_popularity' );

function custom_product_sort_by_popularity( $sort_args ) {
    $sort_args['orderby']  = 'meta_value_num'; // Sort by numeric meta value
    $sort_args['meta_key'] = 'total_sales';    // Meta key for total sales
    $sort_args['order']    = 'DESC';           // Best-selling first
    return $sort_args;
}

6. Sort by Rating (Highest Rated First)

Sort products by average rating in descending order (highest rated products first).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_rating' );

function custom_product_sort_by_rating( $sort_args ) {
    $sort_args['orderby']  = 'meta_value_num'; // Sort by numeric meta value
    $sort_args['meta_key'] = '_wc_average_rating'; // Meta key for average rating
    $sort_args['order']    = 'DESC';          // Highest rated first
    return $sort_args;
}

7. Sort by Custom Meta Field

Sort products by a custom meta field (e.g., `_custom_meta_key`).

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_custom_meta' );

function custom_product_sort_by_custom_meta( $sort_args ) {
    $sort_args['orderby']  = 'meta_value';     // Sort by meta value
    $sort_args['meta_key'] = '_custom_meta_key'; // Replace with your custom meta key
    $sort_args['order']    = 'ASC';           // Sort in ascending order
    return $sort_args;
}

8. Sort Randomly

Sort products randomly.

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_randomly' );

function custom_product_sort_randomly( $sort_args ) {
    $sort_args['orderby'] = 'rand'; // Sort randomly
    return $sort_args;
}

How to Use These Snippets

1. Copy the desired snippet.

2. Paste it into your theme’s `functions.php` file or a custom plugin.

3. Save the file and test the changes on your site.

Example: Sorting by Price (Low to High)

add_filter( 'astra_woo_product_navigation_sort_args', 'custom_product_sort_by_price_low_to_high' );

function custom_product_sort_by_price_low_to_high( $sort_args ) {
    $sort_args['orderby']  = 'meta_value_num'; // Sort by numeric meta value
    $sort_args['meta_key'] = '_price';        // Meta key for product price
    $sort_args['order']    = 'ASC';          // Sort from low to high
    return $sort_args;
}

Notes

– Customization: You can combine multiple sorting criteria (e.g., sort by price and then by title) by modifying the `orderby` parameter.

This palette enhances the user experience by ensuring proper synchronization across different templates and components.

How Does the Dark Palette Work?

Global Color Implementation

The Dark Palette expands Astra’s global color settings by adding a dedicated dark mode color scheme. This allows for easy customization and seamless transitions between light and dark modes.

• You can identify and rename color palettes conveniently.

• Meaningful names have been assigned to presets instead of generic labels like “Color Set 1” or “Color Set 2.”

Palette Switching Behavior

The Dark Palette ensures a smooth transition when switching from light mode, allowing the entire site to adapt dynamically.

• On the frontend, all elements automatically follow dark mode styling

• Input box border colors dynamically adjust based on focus and normal states using global color settings.

Synchronization with Existing Color Settings

The Dark Palette seamlessly integrates with existing global color settings, ensuring smooth performance and no additional resource usage.

• No additional operational costs are introduced, as it leverages existing global color settings.
• Synchronization ensures seamless transitions without affecting other palette

Compatibility with Templates and Plugins

Template Compatibility

Astra has improved template handling by ensuring consistent color application across designs.

Previously, some templates used static colors instead of global colors, leading to inconsistencies. With this update:

• standard templates and Spectra templates are fully compatible with the Dark Palette.
• Additional templates will be optimized in future updates.

Plugin Compatibility

The Dark Palette works with major form plugins, including:

• WPForms
• Gravity Forms
• Contact Form 7
• Fluent Forms

Additionally, it supports other plugins such as:

• BuddyPress
• WePlace
• LoDash
• ElementsKit

Handling Plugin-Specific Color Options

Some plugins have their own background or text color settings, which may not automatically adapt to Astra’s dark mode.

• The Dark Palette does not override plugin-specific colors to avoid conflicts.
• If a plugin allows theme-based colors, the Dark Palette will be applied seamlessly.
• For example, in the SureCart checkout page, the default setting uses static colors. If you enable theme-based colors, the Dark Palette will be reflected correctly.

We hope this guide has been helpful! If you have any questions or feedback, feel free to reach out.

If you prefer to show the coupon field immediately, you can use the following Custom CSS code.

Add this CSS to Customize >> Additional CSS option

#ast-checkout-coupon .coupon {
    display: flex;
}

#ast-checkout-coupon #ast-coupon-trigger {
    display: none;
}

This will ensure that the coupon field is always visible and remove the clickable link, improving user experience and reducing friction in the checkout process.

For more information on adding Custom CSS code , please check this doc: https://wpastra.com/docs/adding-custom-css-code/

Note: This CSS applies to both the Checkout and Cart pages. If the changes do not reflect immediately, try clearing your site and browser cache.

If you have further questions about this, please feel free to leave a comment below.

Sometimes, there is a requirement to display both published and last updated dates on the blog posts by providing a clear view of when the post was published and updated.

In this guide, we will walk you through the process of displaying both published and last updated dates on the blog posts, for both Blog Archive and Single Posts.

Display Published and Last Updated Dates on the Entire Blog

To implement both published and last updated dates on the entire blog including the blog/archive pages (i.e., main blog page, category, or tags) and single posts, you can add the following code to your website.

	function your_prefix_post_date2( $output ) {
	$format        = apply_filters( 'astra_post_date_format', '' );
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$updated_output = '';
	$separator = ' /';
	$separator = apply_filters( 'astra_post_meta_separator', $separator );
	$published_string = __('Published : ' , 'astra');
	$updated_string = __('' . $separator . ' Last updated : ' , 'astra' );
	$updated_output       .= '';
	$updated_output       .= ' ' . $modified_on . '';
	$updated_output       .= '';
	$modified_output = $published_string . $output . $updated_string . $updated_output;
	return $modified_output;
}
add_filter( 'astra_post_date', 'your_prefix_post_date2' );

The above code will display both published and last updated dates on the blog pages. By default, it works for both archive and single posts. You can modify it according to your requirements and add it to the functions.php file of the child theme.

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.

Display Published and Last Updated Dates on Single Posts or Blog/Archives

The above code, if added directly to the child theme, enables both published and last updated dates on both the blog/archive and the single posts.

But, if you wish to display it only on the single posts or only on the blog/archive pages, you can use the below approach:

1. First, enable the Site Builder module of Astra Pro

2. In the Site Builder, create a hook layout and switch to the code editor

3. In the code editor, add the above code within the PHP code syntax as instructed below:

<?php
// Add the code here
?>

4. Now, select the layout as Hooks and Action as WP_Head

5. Once the layout and actions are selected, it is time to apply the correct display conditions. The display conditions will allow you to display both the published and last updated dates on the blog/archive page or single posts.

To display the published and last updated dates only the single posts, select all posts.

After making the above changes, publish the layout and check the front.

Using the Site Builder module, you can also create a custom template for the single posts and modify the entire layout and content according to your requirements. You may check this doc to see how it works.

Now, when you see your blog posts, the post meta will include both the last updated and published dates as shown in the below screenshot:

To display it only on the blog/archive pages, simply change the display conditions in the Site Builder layout.

We hope this document has been helpful. If you have any questions, feel free to leave a comment below.

This guide will walk you through the steps to create a Mega Menu template for Astra Pro using Spectra.

How to Create an Astra Pro Mega Menu Template Using Spectra

Before you begin, ensure the following:

• Astra Pro is installed and activated on your website.
• The Nav Menu and Site Builder module in Astra Pro is enabled.
• The Spectra plugin is installed and active.

Enable the Required Modules

• Navigate to Astra → Dashboard in your WordPress dashboard.
• Enable the “Nav Menu” and “Site Builder” modules.

Create a New Spectra Template

• Go to Astra → Dashboard in the WordPress dashboard.
• Locate the “Site Builder” section.
• From the “Website Parts” panel, select “Hooks”.
• Click the “Create New” button.

• Name your template (e.g., “Mega Menu Template”).
• Click “Publish” to save the template.

Design the Mega Menu Template

Use Spectra blocks to create a visually appealing and responsive Mega Menu. Here’s what you can include:

• Columns: Build a layout structure with multiple columns for better organization.
• Buttons: Add call-to-action links to guide users effectively.
• Images or Icons: Enhance the menu visuals with relevant media.
• Headings and Text Blocks: Organize content clearly for better readability.

Assign the Template to the Mega Menu

• Go to Appearance → Menus in your WordPress dashboard.
• Select the menu you wish to edit.
• Locate the menu item where you want the Mega Menu to appear and expand its settings.
• Click the Astra Menu Settings button.
• Assign the designed template to the selected menu item.

Configure the Mega Menu Settings

• In the settings panel:
  • Toggle on the Enable Mega Menu option.
• For the submenu:
  • Click the Astra Menu Settings button.
  • Select Template from the Content Source dropdown.
  • Choose the Spectra template you created earlier.
• Click Save Changes and close the sidebar by clicking the x.

Preview and Publish

• Save the menu by clicking the Save Menu button.
• Preview your website to ensure the Mega Menu appears as expected when hovering over the assigned menu item.
• Make adjustments to the Spectra template or Mega Menu settings if needed.

By following these steps, you can design and implement stunning Mega Menus using Spectra and Astra Pro.

For further assistance or if you encounter any issues, leave a comment below or please contact our support team.

How to Enable Tags on Single Posts

Tags play a vital role in organizing your content and making it easier for readers to find related posts.

By enabling and customizing the display of tags, you can improve the navigation and aesthetics of your blog posts.

Let’s go through the steps on how you can enable and position tags effectively on single posts in the Astra theme.

Navigate to Customize:

Go to Customize >> Blog >> Single Post >> Post Title Area. This is where you can modify the post title area, including the title, featured image, taxonomy, author, and more.

Modify Meta Options:

Scroll down to Meta Options and click on the eye icon for Taxonomy.

Select Tags as Taxonomy:

Click on the dropdown arrow and select Tags as the taxonomy. To display post categories, follow the same process and select categories. If you wish to display both tags and categories, click on the clone icon beside the eye icon.

Arrange Tags in Meta Options:

Once enabled, drag and drop the tags to change their position within the meta options area.

Customize Taxonomy Structure:

To display tags on a separate line, use the Taxonomy Option in the Tax Structure section.

By following these steps, you can enable tags on your single blog post in the Astra theme.

Display Tags at the Bottom of the Single Post Content

Sometimes, you may want to display tags at the bottom of the single post content. This can be done easily with the Site Builder module of Astra Pro. If you haven’t installed Astra Pro yet, refer to this guide.

Here are the steps to display tags at the bottom using the Site Builder:

• Activate the Site Builder module in Astra Pro and create a Hooks Layout.
• In the layout, use the Tags Block and customize it as needed.

• On the side panel, set the hook placement to After Entry Content or After Entry.

• Choose the appropriate display conditions, such as displaying tags on all posts. Selecting the correct conditions is crucial for the layout to appear on the front end.
• Publish the layout and verify that the post tags are displayed at the bottom of the content. Here’s an example of how it will appear on the front end.

• Ensure tags are disabled from the post title area to avoid duplication.

We hope this guide has provided clear instructions for managing tags in your single posts with the Astra theme.

If you have any questions or need further assistance, please leave a comment below—we’re here to help!