To access the Astra Dashboard, go to WordPress Dashboard → Astra in your WordPress admin.

In This Article

• Welcome Tab
• Site Builder Tab
• Starter Templates Tab
• WooCommerce Tab
• Free Vs Toolkit Tab
• Learn Tab
• Settings Tab
  • General
  • Performance
  • Version Control
  • White Label
  • MCP

Dashboard Navigation

The top navigation bar shows the following tabs based on your setup:

Welcome Tab

The Welcome tab is the default landing page when you open the Astra dashboard. It gives you quick access to the most-used settings and shows the current state of your theme.

Hero Banner

Shows a personalised greeting with your username, the theme name, and a badge showing whether you are on the Free or Pro version. Click Start Customizing to open the WordPress Customizer directly. A video thumbnail is also available — click it to watch an Astra overview video.

Quick Settings

A grid of shortcut tiles that open specific sections of the WordPress Customizer with one click. Available shortcuts:

• Site Identity
• Header Builder
• Footer Builder
• Color
• Typography
• Button
• Blog Options
• Layout

Click Go to Customizer in the section header to open the Customizer without pre-focusing any section.

Astra Pro Modules (Astra Pro only)

When Astra Pro is installed, this section shows all available Pro extensions as individual cards, each with an enable/disable toggle. Use the Activate All or Deactivate All control in the section header to toggle all modules at once.

Do More with Business Toolkit (Astra Free only)

When Astra Pro is not installed, this section shows eight feature cards describing what you get with an upgrade:

• Design Without Limits
• Build Pages Visually
• Advanced Elementor Widgets
• Design Web Pages Faster
• Personalize Your Designs
• Collaborate with Clients
• Automate Your Workflows
• Get VIP Support

Click Get Full Control in the section header to go to the upgrade page.

Extend Your Website

A grid of recommended free BSF plugins with install and activate buttons. The plugins shown depend on your setup:

• Without WooCommerce: SureForms, Spectra, Ultimate Addons for Elementor, OttoKit, SureCart, Presto Player and others
• With WooCommerce active: Variation Swatches, Modern Cart, CartFlows, Cart Abandonment Recovery

Sidebar — Quick Access

Four quick links available at all times on the right sidebar:

• VIP Priority Support (Pro) — priority support channel
• Help Center — Astra documentation
• Join the Community — Astra Facebook group
• Rate Us — WordPress.org review page

Sidebar — License Key (Astra Pro only)

Shows your current license status inline on the Welcome screen. If the license is inactive or expired, this section is highlighted with a red border. See Settings → General → License Key below for full details.

Site Builder Tab

The Site Builder tab is always visible in the navigation and links to a separate page outside the dashboard.

• Without Astra Pro: Opens a free preview page showing a limited custom layouts interface with an upgrade prompt for access to the full Custom Layouts feature set.
• With Astra Pro installed: The free preview page is replaced. The tab links to all Layouts provided by Astra Pro, where you can create custom Headers, Footers, hooks, and page templates without writing any code.

Starter Templates Tab

The Starter Templates tab is always visible unless White Label mode is active.

• Plugin not installed: Shows a promotional page with a Start Building Now button that installs and activates the Starter Templates plugin directly from the Astra dashboard.
• Plugin installed: Clicking the tab immediately redirects to the Starter Templates admin page, where you can browse and import 300+ pre-built website templates for Elementor and Gutenberg

WooCommerce Tab

Only appears when WooCommerce is active. Shows plugins that can improve the WooCommerce shopping experience. An Activate all free conversion tools button at the top installs and activates all four plugins at once.

Variation Swatches

Replaces WooCommerce dropdown menus for product variations with visual swatches — colors, sizes, and styles are visible at a glance. Reduces wrong selections and helps customers decide faster.

Modern Cart

Replaces the default WooCommerce mini-cart with a slide-out cart drawer. Quantities update in real time, a shipping progress bar is visible, and the experience is optimised for mobile devices.

CartFlows — Funnels and Offers

Adds order bumps, upsells, and cross-sell offers to WooCommerce checkout. Replaces the default checkout with optimised funnel layouts designed to increase average order value.

Cart Abandonment Recovery

Captures the customer’s email as soon as they reach checkout. If they leave without completing the purchase, automated follow-up emails are sent with a one-click cart restore link.

Free Vs Toolkit Tab

Only available on Astra Free — this tab is removed once Astra Pro is installed.

A three-column comparison table — Free, Essential Toolkit, and Business Toolkit — showing exactly which features are included in each plan. An Upgrade Now button appears in the top right corner.

The table is organised into categories including: High-Level Feature Stack, Essentials, Design, Site Layouts, Dynamic Content Builder, Blog, Header/Footer Builder, WooCommerce, and Integrations.

Learn Tab

Only visible when Show Learn Tab is enabled in Settings → General.

Contains guided tutorials and video resources for getting started with Astra. You can show or hide this tab at any time from the Settings panel.

Settings Tab

The Settings page has a left sidebar with five sub-tabs. Which tabs appear depends on whether Astra Pro is installed and which license type you have.

General

License Key (Astra Pro only)

Enter your Astra Pro license key to activate the plugin. An active license is required for automatic updates and premium support. Once active, the field shows your license status and expiry date. If the license has expired, a Renew Now link appears.

File Generation (Astra Pro only)

Toggle — Off by default

By default, Astra loads CSS and JS inline on the page. Enabling this option generates separate CSS and JS files for individual addons instead. This can be useful for certain caching or CDN configurations.

Asset Regeneration (Astra Pro only)

Button: Regenerate Assets

Rebuilds all CSS and JavaScript files generated by Astra Pro. Use this if you see layout, color, or styling issues after an update or settings change. This is the recommended first troubleshooting step for any visual problem with Astra Pro features.

Show Learn Tab

Toggle — On by default

Shows or hides the Learn tab in the Astra dashboard navigation.

Show AI Assistant

Toggle — On by default

Shows or hides the AI Assistant icon in the Astra dashboard. Hidden automatically when White Label mode is active.

Contribute to Astra

Toggle

Allows Astra to collect anonymous, non-sensitive usage data (such as PHP version and which features are active) to help improve the product. No personal data is collected. Hidden when White Label mode is active.

Performance

Load Google Fonts Locally

Toggle — Off by default

Downloads your selected Google Fonts and serves them from your own server instead of Google’s CDN. Recommended for:

• GDPR compliance — avoids sending visitor IP addresses to Google’s servers
• Improved page load speed — reduces external DNS lookups and connection time

Preload Local Fonts

Toggle — Off by default

Only available when Load Google Fonts Locally is enabled.

Adds a preload hint for the locally hosted font files, instructing the browser to load them earlier during page render. This can reduce font render delay and improve Core Web Vitals scores.

Flush Local Font Files

Button: Flush Local Font Files

Clears the locally cached font files. Use this if fonts are not displaying correctly after:

• Changing your Google Fonts selection in the Customizer
• Migrating your site to a new domain or server
• A caching-related font display issue

Version Control (Astra Pro only)

Requires Astra Pro purchased directly from Brainstorm Force with an active license. Controls appear locked if the license is not active.

Rollback to Previous Version

Two independent dropdowns — one for the Astra theme and one for Astra Pro — let you roll back each to a previous release separately. Useful when:

• A recent update introduced a visual or functional issue
• You need to test whether a specific version caused a problem
• You want to compare behaviour between two versions

Note for WP Engine / Flywheel users: Previous theme versions may be unavailable because WordPress restricts access to the themes API on these hosting platforms.

Enable Beta Updates

Toggle — Off by default

Opt in to receive WordPress update notifications for beta releases of Astra and Astra Pro. Only recommended on staging or development sites — not on live production sites.

Learn more: https://wpastra.com/docs/automatic-beta-updates-for-astra/

White Label (Astra Pro — Agency Licenses only)

Only visible to customers whose Astra Pro license includes agency or developer features.

White labeling removes all references to Astra and Brainstorm Force from the WordPress dashboard and replaces them with your own branding. Commonly used by agencies and developers building websites for clients.

To set up White Label:

1. Fill in the White Label form — enter a custom plugin name, author name, and description
2. Enable the Enable White Label toggle to apply your branding

Once enabled, the Astra dashboard, plugin name, and all admin references will reflect your custom identity instead of Astra.

MCP

Configures the Model Context Protocol (MCP) integration, which allows AI coding assistants to connect directly to your WordPress site and access Astra’s REST API. This is an advanced developer feature.

Frequently Asked Questions

Related Articles

• Astra Pro Modules — Overview and How to Enable Them
• Site Builder Overview
• Automatic Beta Updates for Astra
• How to Use Starter Templates with Astra

Read more at Astra

What Is the AI Assistant Icon?

Introduced in Astra v4.13.3, the AI Assistant is a floating icon that appears in your WordPress admin dashboard. Clicking it opens an inline support widget where you can search documentation and get answers without leaving the current screen.

Starting with v4.13.4, you can choose whether this icon appears at all — toggling it on or off from a single settings panel.

Requirements

Astra theme v4.13.4 or later. You can check your installed version under Appearance > Themes or from the Astra dashboard.

How to Toggle the AI Assistant Icon On or Off

1. Log in to your WordPress admin panel.
2. In the left sidebar, navigate to Astra > Dashboard.
3. Open the Settings tab.
4. Find the AI Assistant option.
5. Use the toggle to enable or disable the icon.

The change takes effect immediately — no page reload or cache clearing needed.

When Should You Hide the AI Assistant Icon?

Client Site Handoffs

When delivering a completed site to a client, hiding the AI Assistant keeps the dashboard clean and focused on tools they actually use. It avoids questions about features that aren’t part of their workflow.

Keeping Your Dashboard Tidy

If you’re not using the AI Assistant regularly, removing the floating icon declutters your workspace and reduces distractions while you work.

Custom Admin Experiences

Agencies and developers building tailored admin environments can use this setting to maintain a consistent, branded experience without third-party UI elements getting in the way.

How to Re-enable the AI Assistant Icon

Return to Astra > Dashboard > Settings, switch the AI Assistant toggle back on. Nothing is permanently removed.

Frequently Asked Questions

Read more at Astra

When Does This Happen?

This issue occurs when all three of the following are true:

• The WPML plugin is active on your site
• Your WordPress admin language is set to a different language than your site’s frontend language (for example, admin in Spanish, frontend in English)
• You save text strings in Appearance > Customize — such as button labels, copyright text, or header/footer strings

After saving, those strings may display in the admin language on the frontend instead of the site language.

Before You Begin

Before applying the fix, confirm the following:

• Astra is updated to the latest version
• WPML is updated to the latest version
• Site cache and browser cache have been cleared

The Fix

The recommended fix is a small code snippet added to your child theme. It ensures Astra uses the correct frontend language when loading Customizer strings, and only runs inside the WordPress admin and Customizer, never on frontend pages.

Step 1 — Add the Code to Your Child Theme

1. In your WordPress dashboard, go to Appearance > Theme File Editor.
2. In the right-hand file list, select your child theme’s functions.php file.
3. Add the following code at the end of the file:

/**
 * Fix: Astra Customizer default strings use site locale instead of admin locale.
 * Required when using WPML with different admin and site languages.
 */
$astra_locale_switched = false;

add_action(
    'after_setup_theme',
    function () use ( &$astra_locale_switched ) {
        if ( ! is_admin() && ! is_customize_preview() ) {
            return;
        }
        $site_locale = get_option( 'WPLANG' ) ?: 'en_US';
        if ( determine_locale() !== $site_locale ) {
            $astra_locale_switched = (bool) switch_to_locale( $site_locale );
        }
    },
    9
);

add_action(
    'after_setup_theme',
    function () use ( &$astra_locale_switched ) {
        if ( $astra_locale_switched ) {
            restore_previous_locale();
            $astra_locale_switched = false;
        }
    },
    11
);

4. Click Update File to save.

Step 2 — Verify the Fix

1. Go to Appearance > Customize.
2. Navigate to a section that contains text strings (for example, Header >Button).
3. Update a text string and click Publish.
4. Visit the frontend of your site and confirm the text displays in the correct language.

Expected Outcome

After adding the snippet, text strings saved in the Customizer will display in the site’s frontend language, regardless of the language set for the WordPress admin.

Important Notes

• The snippet must remain in place permanently. Removing it will cause the issue to return.
• It is safe to leave in your child theme long-term. The is_admin() || is_customize_preview() guard ensures it only runs in the admin and Customizer, never on frontend pages.
• This fix covers all Astra Customizer strings, including any added in future Astra updates, without needing to modify the snippet.
• If you manage multiple sites with the same WPML + language setup, the snippet needs to be added to each site’s child theme individually.

Still Not Resolved?

If the issue persists after adding the snippet, reach out via the Astra Support Portal with the following details:

• WordPress version
• Astra version
• WPML version
• Admin language and site frontend language settings
• A screen recording showing the exact steps that trigger the issue

Related Docs

• How to Create a Child Theme for Astra
• Astra and WPML Compatibility
• How to Add Custom Code to Astra

Read more at Astra

If your page already has a meaningful <h2> heading (such as a section title above the product grid), having every product title also use <h2> can break the heading hierarchy, which affects both accessibility and SEO. This guide shows you how to change the product title tag to <h3> (or any other tag) without editing the Astra parent theme files.

Override the Astra Function (Child Theme)

Astra wraps its product title function inside a if ( ! function_exists() ) check. This means you can safely redefine the function in your child theme and Astra will use your version instead.

Add the following code to your child theme’s functions.php file:

function astra_woo_woocommerce_template_loop_product_title() {
    $product_title_link = apply_filters( 'astra_woo_shop_product_title_link', '__return_true' );
    if ( $product_title_link ) {
        echo '<a href="' . esc_url( get_the_permalink() ) . '" class="ast-loop-product__link">';
    }
    echo '<h3 class="woocommerce-loop-product__title">' . esc_html( get_the_title() ) . '</h3>';
    if ( $product_title_link ) {
        echo '</a>';
    }
}

This replaces the <h2> with <h3> while preserving Astra’s product title link wrapping and any filters applied to the link behavior.

How to Add the Code

Option A — Child Theme

1. Go to Appearance → Theme File Editor in your WordPress dashboard.
2. Select your Astra Child Theme from the dropdown on the right.
3. Open functions.php.
4. Paste the code at the bottom of the file.
5. Click Update File.

Option B — WPCode Plugin

1. Install and activate the free WPCode plugin.
2. Go to Code Snippets → Add Snippet.
3. Choose PHP Snippet.
4. Paste the code, set the location to Run Everywhere, and activate it.

Result

After adding the code, product titles on your Shop page and product grid pages will render as <h3> instead of <h2>, giving you a cleaner heading hierarchy across your WooCommerce store.

Read more at Astra

Manually reverting every option back to its default value is tedious and error-prone, especially when you don’t remember the original defaults. That’s where the Astra Customizer Reset plugin comes in. It adds a simple Reset button directly inside the WordPress Customizer that restores all Astra customizer settings to their factory defaults in a single click.

When Would You Need This?

Here are a few common scenarios where a full customizer reset is helpful:

• You experimented with multiple Starter Templates and want a clean slate before importing a new one.
• You’ve been testing typography, color, and layout options and want to start fresh with Astra’s defaults.
• You’re redesigning your website and want to begin the customizer setup from scratch without leftover settings conflicting with your new design choices.

Important: This action is irreversible. Once you reset, all Astra customizer settings will revert to their defaults and cannot be undone. You will need to reconfigure settings manually if you want to restore your previous design. We recommend taking a backup first. You can also use the Astra Import/Export Customizer Settings plugin to save the customizer settings file and restore later.

How to Use Astra Customizer Reset

Step 1: Install and Activate

You can install the plugin directly from the WordPress plugin directory:

1. In your WordPress dashboard, go to Plugins → Add New.
2. Search for “Astra Customizer Reset” in the search bar.
3. Click Install Now next to the plugin by Brainstorm Force.
4. Once installed, click Activate.

Alternatively, you can download the plugin ZIP from https://wordpress.org/plugins/reset-astra-customizer and upload it via Plugins → Add New → Upload Plugin.

Step 2: Open the Customizer

After activation, navigate to Appearance → Customize in your WordPress dashboard. The customizer interface will open as usual.

Step 3: Click the Reset Button

At the top of the customizer panel, you’ll see a “Reset All” button added by the plugin. Click it and confirm the action when prompted. All Astra customizer settings will immediately revert to their defaults.

What Does It Reset?

The plugin resets all Astra theme customizer options back to their factory defaults. This includes the global colors, typography, spacing, layout, header and footer configuration, etc.

The plugin only affects Astra’s customizer-stored settings. It does not reset:

• Your pages, posts, or any other WordPress content.
• Navigation menus
• WordPress core settings (site title in Settings → General, reading settings, etc.).
• Third-party theme or plugin settings.
• Media library uploads.

Frequently Asked Questions

Can I reset only the footer or only the header?

No. The plugin resets all Astra customizer settings at once. There is no option to selectively reset individual sections such as the Header Builder, Footer Builder, typography, or colors independently. If you only want to adjust a specific area, you’ll need to change those options manually within the customizer. This way, you can reset footer to default Astra settings along with other settings.

Can I reset just one part of the customizer, like only typography or only colors?

No. The plugin performs a complete reset of every Astra customizer setting. Partial or section-level resets are not supported. For targeted changes, manually adjust the specific options you want to change.

Is it possible to revert the changes and bring back the settings after reset?

No. The reset is permanent and cannot be reversed. There is no built-in undo or rollback feature. Before resetting, we strongly recommend taking screenshots of your current settings or noting down any values you may want to replicate later. You can also use the Astra Import/Export Customizer Settings plugin to take a backup of the customizer settings and restore later.

Q: Will it delete my pages, posts, or media?

No. The plugin only resets Astra’s customizer settings. All your content – pages, posts, images, menus, widgets, and plugin configurations – remain completely untouched.

We hope the above information has been helpful to reset the footer, header and other customizer settings to default Astra settings. If you have any question regarding this or need some help, feel free to comment below or reach out to our support team.

Read more at Astra

BSF Network License Manager is a WordPress network (multisite) plugin that lets you manage BSF product licenses — Astra Pro, Spectra Pro, Ultimate Addons for Elementor, and others — from a single Network Admin screen. Instead of visiting each subsite individually, you can see license activation status across all subsites, activate or deactivate in bulk, and configure auto-activation — all in one place.

Location: Network Admin → Settings → BSF License Manager

Getting Started

Download & Install

Download BSF Network License Manager 

1. Download the plugin .zip file using the link above
2. Log in to your WordPress Network Admin (/wp-admin/network/)
3. Go to Plugins → Add New → Upload Plugin
4. Choose the downloaded .zip file and click Install Now
5. After installation, click Network Activate to activate it across the entire network

Important: This plugin must be Network Activated — activating it on individual subsites will have no effect. If you don’t see the “Network Activate” option, make sure you are in the Network Admin, not a single site admin.

Requirements

• WordPress Multisite (network) install
• Network Admin access
• At least one BSF product (Astra Pro, Spectra Pro, etc.) is installed and licensed on the main site

Accessing the Plugin

After network activation:

1. Log in to your WordPress Network Admin (/wp-admin/network/)
2. Go to Settings → BSF License Manager in the left sidebar

Navigating the Plugin

The left side lists all detected BSF products. Each product shows its name, icon, and how many subsites have the license activated (e.g., 2 / 11 activated). Click any product to manage it — the right side updates to show that product’s license details, auto-activate setting, and the full subsite activation table.

The subsite table shows every site on your network with its current status:

Status	Meaning
Activated	License is active on this subsite
● Not activated	Plugin is installed, but the license is not yet activated
Plugin not active	The plugin isn’t installed/active on this subsite yet

Use the All / Activated / Pending / Errors filter tabs at the top to narrow the view, or search by URL or blog ID.

Activating & Deactivating License

Activate a Single Subsite

1. Find the subsite in the table
2. Click the blue Activate button on the right
3. The status updates to Activated immediately on success

Deactivate a Single Subsite

1. Find an activated subsite in the table
2. Click the Deactivate button
3. The status returns to Not activated

Bulk Activate All Pending Sites

At the bottom of the table, click:

→ Activate License on All Pending Sites (N)

This activates all subsites that are in Pending status in one operation. The number in parentheses shows how many pending sites will be processed. Sites where the plugin is not active are automatically skipped.

Deactivate All Sites

Click Deactivate License on All Sites to remove the license activation from every subsite at once.

Caution: This will deactivate premium features network-wide for the selected product. Use with care.

“Plugin Not Active” Sites

If a subsite shows Plugin not active in the Status column, it means the product (e.g., Astra Pro plugin) has not been activated on that subsite yet. The Activate plugin  link takes you directly to that subsite’s plugin management page.

Steps:

1. Click Activate plugin  — this opens the subsite’s Plugins page in a new tab
2. Activate the plugin there
3. Return to the BSF License Manager and activate the license

Switching Between Products

Click any product in the left rail to switch to it. The panel on the right updates immediately to show that product’s license status, settings, and subsite table.

Each product’s settings (auto-activate) and activation counts are managed independently.

Frequently Asked Questions

Q: A subsite shows “Plugin not active” — can I still activate the license? No. The plugin/theme must be installed and active on the subsite before its license can be managed. Use the Activate plugin  link to go directly to that subsite’s plugins page.

Q: The main site shows “Not licensed” — what do I do? The license key needs to be registered on the main site. Go to the main site’s license management page for the product and enter a valid key. Once the main site is licensed, you can activate subsites.

Q: Will enabling Auto-activate retroactively activate existing subsites? No. Auto-activate only affects new subsites created after the setting is saved. For existing pending subsites, use the Activate License on All Pending Sites bulk action.

Q: Is there a limit to how many subsites I can activate? This depends on your license terms. Check your product’s license for the number of allowed activations.

Glossary

Read more at Astra

This is where Astra Pro steps in with better layout options for how your product description is displayed.

Description Layout Options in Astra Pro

Astra Pro includes a WooCommerce module that gives you full control over single product page design. One of its most useful features is the ability to change how the product description (and other tabs like reviews and additional information) is displayed.

With Astra Pro, you can choose from four description layout styles:

1. Default (Horizontal) – The standard WooCommerce tab layout. Description, Additional Information, and Reviews appear as clickable horizontal tabs.
2. Vertical – The description sections are displayed in clickable vertical tabs.
3. Accordion – Each section (Description, Additional Information, Reviews) is shown as a collapsible accordion panel. This keeps the page clean and lets users expand only what they need.
4. Distributed – The content from all tabs is laid out one below the other, with no tabs or accordions. Everything is visible at once.

To change the layout, go to Appearance > Customize > WooCommerce > Single Product > Description and select your preferred style. The Accordion layout is especially popular because it saves vertical space and keeps the page looking organized.

You can also disable or enable description area there.

Accordion Behavior: Open by Default

When you choose the Accordion layout in Astra Pro, the first accordion panel (usually the Description section) opens automatically when the page loads. This is the default behavior.

For most stores, this works perfectly fine. But some store owners prefer to keep all accordion panels closed when a customer first lands on the product page. This gives a cleaner look and lets the customer decide which section to open.

Astra does not have a built-in toggle for this yet, but you can achieve it with a small code snippet.

How to Keep the Accordion Closed by Default

You can add the following code to your theme’s functions.php file or use any code snippet plugin like WPCode or Code Snippets. This snippet runs a small script on your product pages that closes all accordion panels after the page loads.

add_action( 'wp_footer', function () {
    if ( ! function_exists( 'is_product' ) || ! is_product() ) {
        return;
    }
    ?>
    <script>
    window.addEventListener( 'load', function () {
        var acc = document.querySelector( '.ast-woocommerce-accordion' );
        if ( ! acc ) { return; }
        acc.querySelectorAll( '.ast-accordion-header.active' ).forEach( function ( h ) {
            h.classList.remove( 'active' );
        } );
        acc.querySelectorAll( '.ast-accordion-content' ).forEach( function ( c ) {
            c.classList.remove( 'active' );
            c.style.height = 0;
        } );
    } );
    </script>
    <?php
}, 99 );

After adding this snippet, all accordion sections on your single product pages will load in a collapsed state. Customers can then click to expand any section they want to read.

If you don’t have your Child Theme installed, please check this article on how to do it. You can also add the code by adding a hook layout to Site Builder Code Editor.

Why Astra Pro for Your WooCommerce Store

The Accordion layout is just one of the many improvements Astra Pro brings to your WooCommerce product pages. The WooCommerce module in Astra Pro gives you control over several other aspects of the single product page, including:

• Advanced Gallery Layouts
• Smooth Zoom & Sticky Image Effects
• Upsells, Related & Recently Viewed Products
• Variation Dropdown to Buttons
• Sticky Product Summary

If you are running a WooCommerce store and want more design control without writing custom code for every change, Astra Pro is worth looking into. You can learn more and get started at Astra Pro.

Frequently Asked Questions

Do I need Astra Pro to use this code snippet?

Yes. The Accordion layout for the product description is an Astra Pro feature available through the WooCommerce module. You need Astra Pro installed and the WooCommerce module activated for the accordion to appear on your product pages. The code snippet above only works when the accordion layout is already active.

Will this snippet affect other pages on my site?

No. The code checks if the current page is a WooCommerce single product page before doing anything. It will not affect your shop page, cart, checkout, or any other part of your site.

Can I keep one specific accordion panel open and close the rest?

The snippet above closes all panels. If you want to keep a specific panel open (for example, the Reviews section), you would need to modify the code to skip that particular panel.

What happens if I switch away from the Accordion layout?

If you change the description layout to Tabs, Distributed, or Horizontal in the Customizer, the accordion markup will no longer be present on the page. The code snippet simply will not run since it looks for the accordion container. It will not cause any errors or conflicts.

Is a child theme required?

If you are adding the code to functions.php, we recommend using a child theme. Without one, your changes will be overwritten when the theme updates. Alternatively, using a code snippet plugin or Site Builder Code Editor avoids this issue entirely.

Will this work with page builders like Elementor?

This snippet targets the Astra WooCommerce accordion specifically. If you are using a page builder to create custom product page layouts, the accordion structure may differ, and this code may not apply. For page builder specific questions, please reach out to the respective page builder support.

We hope the above information has been helpful. If you face any issues or need more help, please feel free to reach out to our support team.

Read more at Astra

This guide walks you through opening the Footer Builder, understanding how it’s organized, and configuring it to match what your site needs.

Before you begin, you may also want to skim our FAQs about the Astra Header/Footer Builder.

How to Open the Footer Builder

There are two ways to get to the Footer Builder, and both lead to the same place.

Option 1 — From the WordPress Customizer (most common):

Go to Appearance > Customize > Footer from your WordPress dashboard. This opens the Customizer with the Footer Builder panel ready to use.

Option 2 — From the Astra Dashboard:

Go to Astra > Dashboard from your WordPress admin. Under the Quick Settings section, you’ll see shortcuts for Header Builder and Footer Builder. Click on Footer Builder, then click Go to Customizer when prompted.

Once you’re in the Customizer, you’ll see the new Footer panel along with related options.

Understanding the Three Footer Rows

The Footer Builder gives you three stacked rows where you can place elements. Each row spans the full width of your footer and can be styled independently.

Above Footer Row

The topmost row, often used for things you want to highlight just above the main footer area. Common uses include a newsletter signup, a call-to-action banner, an awards or trust strip, or a thin row with contact information.

Primary Footer Row

The main footer row, and usually the tallest. This is where most people place their widget columns, footer menu, address details, or logo and tagline. Think of it as the “body” of your footer.

Below Footer Row

The bottommost row, typically used for the copyright notice, secondary links like Privacy Policy and Terms, payment method icons, or social icons. Often styled as a thin bar in a darker shade.

You don’t have to use all three rows. If you only need a single bar at the bottom of your site, use just the Below row and leave the others empty.

Adding and Managing Elements

Inside each row, you can add one or more elements such as a menu, widgets, social icons, or HTML.

To add an element:

1. Click the plus (+) icon inside any row.
2. From the popup, choose the element you’d like to add.
3. The element appears immediately in the row and is ready to configure.

To move an element:

Drag and drop it to a different position within the same row, or to a different row entirely. The preview on the right updates live.

To configure an element:

Click directly on the element. The Customizer panel on the left switches to that element’s settings, where you can adjust labels, behavior, colors, spacing, and other options.

To remove or duplicate an element:

Click on the element to open its settings, then look for the Delete or Duplicate action at the top of the panel. For a full walkthrough, see Clone and Delete Elements in Header Footer Builder.

Available Footer Elements

Here’s what each element does, so you know which one to reach for.

Available with Astra (Free)

Copyright — Displays copyright text with support for dynamic tags like %%current-year%% and %%sitename%%, so the year stays current automatically. See Footer Custom Text Helper Strings for all supported tags.

HTML — A free-form HTML or text block where you can add any markup directly to the footer. Great for custom messages, contact details, badges, or short code snippets.

Menu — Displays a WordPress navigation menu in the footer. Useful for secondary links like Privacy Policy, Terms, Contact, and Sitemap.

Social Icons — A row of social media icon links. Add the platforms you want (Facebook, Twitter, Instagram, etc.), paste in your profile URLs, and style the icons and spacing as needed.

Button — A clickable button with custom label, link, and basic styling. Useful for newsletter signups, “Contact Us” links, or download prompts.

Widget — Renders any registered WordPress sidebar widget inside the footer. Place things like recent posts, contact forms, galleries, or custom HTML.

Available with Astra Pro (additional)

Divider — A horizontal or vertical separator line you can place between footer elements. Style, color, and size are all configurable.

Language Switcher — A language selector for multilingual sites. Integrates with WPML and Polylang so visitors can switch languages from the footer. See Using Language Switcher Element with WPML for setup.

Button (Pro) — An enhanced version of the free Button element with additional color, typography, and border controls.

Social Icons (Pro) — An enhanced version of the free Social Icons element with support for more platforms and advanced styling options.

You can also extend the number of elements available (for example, multiple HTML or Widget slots). See Add Multiple Elements in Header Footer Builder for details.

The Three Settings Tabs

When you’re inside the Footer Builder, you’ll see three tabs that organize where settings live.

Builder Tab (visual)

This is the drag-and-drop canvas where you place and arrange elements. Most of your day-to-day work happens here.

General Tab

Every element you’ve added to the footer appears as a clickable item in the General tab. Click any element to open its settings (such as menu selection, copyright text, social profile URLs, and so on). This is essentially a quick directory of everything currently in your footer.

Design Tab

Controls footer-wide styling, including background color or image, row spacing, borders, and overall layout. Per-row styling (such as Above row background) is reached by clicking the small gear icon above that specific row in the visual builder.

Styling a Specific Row

To style just one row (for example, to give the Below row a darker background for a copyright bar look):

1. Hover over the row in the visual builder.
2. Click the gear / settings icon that appears above the row.
3. The Customizer panel switches to that row’s styling options — background, padding, borders, and column layout.

For deeper background customization including images, gradients, and overlays, see How To Design Footer Background in Astra.

Desktop and Mobile Footers

The Footer Builder includes a device toggle (desktop, tablet, mobile) at the bottom of the Customizer. Switching between devices lets you see how the footer looks on each, and many element settings are responsive — meaning you can hide or restyle elements per device.

For example, you might show a four-column widget layout on desktop and collapse it to a single stacked column on mobile, all from the same Footer Builder without writing CSS.

Common Footer Tasks

A few of the most common things people set up after opening the Footer Builder:

• Change or remove the default copyright text — Footer Custom Text Helper Strings
• Add a widget-rich footer with multiple columns — Footer Widgets Module with Astra Pro
• Stick the footer to the bottom on short pages — Stick Footer to the Bottom When Page Content is Less
• Fix the right margin on footer widgets — How To Fix Right Margin for the Footer Widget Element
• Design the footer background — How To Design Footer Background in Astra
• Hide the footer on a specific landing page — How To Disable Header or Footer for a Landing Page or Post

Troubleshooting

Related Articles

• How To Create a Header With Astra Header Builder
• How To Create Mobile Header With Astra Header Builder
• Elements in Header/Footer Builder With Astra Theme and Astra Pro
• FAQs – Astra Header/Footer Builder
• How to edit website footer (guide)

Read more at Astra

What’s the Difference: Astra Only vs Global?

Start with Astra Only if you just want to control your theme. Use Global if you want your AI client to manage your entire site.

Prerequisite

Before you begin, make sure you have:

• Astra theme installed and active on your WordPress site
• Node.js v20 or v22 installed on your computer (check by running node --version in your terminal)
• An AI client that supports MCP (Claude Code, Claude Desktop, Cursor, Windsurf, or VS Code)

Step 1: Create a WordPress Application Password

MCP uses Application Passwords to authenticate securely — you don’t share your main WordPress password.

1. Log in to your WordPress admin dashboard
2. Go to Users → Profile (or navigate directly to {site-url}/wp-admin/profile.php#application-passwords-section)
3. Scroll down to the Application Passwords section
4. Enter a name for the password (e.g. Claude MCP) and click Add New Application Password
5. Copy the generated password — you won’t be able to see it again

Note: Application Passwords are available in WordPress 5.6 and later. Make sure your site is not blocking Application Password authentication via a security plugin.

Step 2: Get Your MCP Config from Astra

1. In your WordPress admin, go to Astra → Settings → MCP
2. Choose your mode — Astra Only or Global — using the tabs
3. You’ll see a JSON config block pre-filled with your site URL and username

It looks like this:

{
  "mcpServers": {
    "yoursite-astra": {
      "command": "npx",
      "args": ["-y", "@automattic/mcp-wordpress-remote@latest"],
      "env": {
        "WP_API_URL": "https://yoursite.com/wp-json/astra/v1/mcp",
        "WP_API_USERNAME": "YOUR-WP-USERAME",
        "WP_API_PASSWORD": "YOUR-APPLICATION-PASSWORD"
      }
    }
  }
}

Replace YOUR-APPLICATION-PASSWORD with the password you generated in Step 1.

Step 3: Add the Config to Your AI Client

Claude Desktop

Config file location:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

1. Open your terminal and run the following — then paste the output back into Claude so it can detect your Node.js setup:
   • which npx && node --version && echo $PATH
2. Open the config file in a text editor (create it if it doesn’t exist)
3. Merge the MCP server entry into the mcpServers object — do not overwrite other existing entries
4. Set "command" to the full path from which npx (e.g. /opt/homebrew/bin/npx)
5. Add a "PATH" key to "env" with your actual $PATH output — MCP servers don’t inherit your shell’s PATH
6. Save the file and restart Claude Desktop

Example final config:

{
  "mcpServers": {
    "yoursite-astra": {
      "command": "/opt/homebrew/bin/npx",
      "args": ["-y", "@automattic/mcp-wordpress-remote@latest"],
      "env": {
        "WP_API_URL": "https://yoursite.com/wp-json/astra/v1/mcp",
        "WP_API_USERNAME": "admin",
        "WP_API_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx",
        "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin"
      }
    }
  }
}

Claude Code

Config file: .mcp.json in your project root (or global ~/.claude/mcp.json)

1. In your terminal, run:
   • which npx && node --version && echo $PATH
2. Claude Code can run terminal commands directly — paste the prompt from Astra into Claude Code, and it will detect your setup automatically
3. Merge the server entry and restart

Cursor

Config file: .cursor/mcp.json in your project root

1. Open your terminal and run:
   • which npx && node --version && echo $PATH
2. Open or create .cursor/mcp.json
3. Merge the server entry using the full npx path and your $PATH
4. Restart Cursor

Windsurf

Config file: ~/.codeium/windsurf/mcp_config.json

1. Run which npx && node --version && echo $PATH in your terminal
2. Open or create the config file
3. Merge the server entry with the full npx path and your $PATH
4. Restart Windsurf

VS Code (with GitHub Copilot Agent)

Config file: .vscode/mcp.json in your project root

Note: VS Code uses a "servers" key instead of "mcpServers".

{
  "servers": {
    "yoursite-astra": {
      "command": "/opt/homebrew/bin/npx",
      "args": ["-y", "@automattic/mcp-wordpress-remote@latest"],
      "env": {
        "WP_API_URL": "https://yoursite.com/wp-json/astra/v1/mcp",
        "WP_API_USERNAME": "admin",
        "WP_API_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx",
        "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin"
      }
    }
  }
}

Using the AI Setup Prompt (Easiest Method)

Not sure how to edit config files? Use the  sparkle button in the Astra MCP panel to copy a ready-made prompt, then paste it directly into your AI client. The AI will:

1. Ask which client you use and your OS
2. Ask for your Application Password
3. Locate the correct config file for your setup
4. Ask you to run which npx && node --version && echo $PATH and paste the output
5. Write the correct config with your actual paths
6. Confirm everything was added correctly

Troubleshooting

MCP server not showing up in my AI client

• Make sure you restarted the AI client after editing the config
• Verify the JSON is valid (no trailing commas, correct brackets)
• Check that "command" uses the full absolute path to npx, not just npx

Authentication errors

• Double-check the Application Password — it should include spaces (e.g. xxxx xxxx xxxx xxxx xxxx xxxx)
• Make sure the username matches exactly what’s in your WordPress user profile
• Verify your site URL ends without a trailing slash in WP_API_URL

Node.js version errors

• Run node --version — you need v20 or v22
• Use nvm to install the correct version: nvm install 22

“npx not found” or command errors

• The "command" field must be the full path from which npx, not just npx
• Add the "PATH" key to "env" so the MCP server can find Node.js at runtime

Site is behind a local domain (e.g. .local)

• Local sites work fine — just make sure the AI client is running on the same machine
• Local URLs like http://mysite.local won’t be reachable from a cloud-based tool, use a public URL.

Further Reading

• WordPress MCP Adapter — WordPress Developer Blog
• Model Context Protocol — Official Docs

Read more at Astra