The Accordion Group block provides a clean and interactive way to display collapsible content on your store and product pages. It is designed to help merchants organize information into manageable, expandable sections, enhancing both readability and user experience.
By grouping multiple accordion items, this block allows you to present information in a compact, user-friendly format, reducing page clutter while keeping content accessible.
Block Structure
↑ Back to topThe Accordion Group block is a container that allows you to group multiple collapsible accordion items in a structured and accessible layout.
Each accordion item includes an Accordion Header and Accordion Panel, enabling customers to expand and collapse content sections. This makes it ideal for organizing FAQs, product details, multi-step instructions, and other structured content.
When you insert an Accordion Group block, it automatically includes:
- Accordion
- Accordion Header: The clickable title that toggles visibility.
- Accordion Panel: The content section that expands or collapses.
You can add multiple Accordion items within a single group for a cohesive and organized display.
Accordion Header
↑ Back to topThe Accordion Header serves as the clickable trigger that expands or collapses the associated content panel.
You can find the Accordion Header block settings in the sidebar. The Accordion Header offers the following options:
Icon
This option allows you to add a visual cue next to the header text, enhancing user’s understanding.
- Icon Selector: Choose from a dropdown of available icons.
- None: Disables the icon if selected.
Icons are particularly helpful in making the accordion function more intuitive, especially on mobile devices or when accessibility is a concern.
Icon Position
Control the placement of the selected icon:
- Left: The icon appears before the heading title.
- Right (Default): The icon appears after the text label.
Proper icon positioning can help maintain design consistency with other page elements or match your store’s layout direction (e.g., RTL languages).
Accordion Panel
↑ Back to topThe Accordion Panel is the collapsible content area that becomes visible when its associated Accordion Header is clicked. This section allows you to add content that remains hidden until users choose to reveal it by clicking the header.
The Accordion Panel supports all standard WordPress blocks, making it highly flexible for a wide range of content types.
When using a block theme, the “Single Product” template that comes from WooCommerce allows you to insert WooCommerce-specific blocks, such as Product Description, Reviews, or Additional Information. These blocks automatically pull dynamic data from the current product, ensuring seamless integration with your store’s content.
This flexibility makes the Accordion Panel a suitable choice for organizing detailed, multimedia-rich content while keeping your page layout clean and user-friendly.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.