How to Keep Accordion Closed for Single Product Description

By default, WooCommerce shows the product description inside a tab below the product image and summary. This works, but it can feel a bit plain and sometimes pushes important details too far down the page.

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.