Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Documentation Shoptimizer Single Products Adding an accordion to the short description

Adding an accordion to the short description

Shoptimizer now includes an extremely light-weight accordion option which you can add to your short description area when editing a product. It’s built using the native <details> HTML element along with a pinch of javascript.

Accordion example on a product page

To include one, edit a product and scroll to the Product short description section. It’s normally at the end of the editing screen.

Product short description editor

To include an accordion, you’ll need to add a shortcode. Why a shortcode? Currently, you cannot add a block to this short description field. So in the absence of this, a shortcode works best.

It begins with:

You can change the title to be anything you like.

You then write the content which is displayed when the accordion is opened. Simple text or an unordered list works best.

Finally, you close the accordion with this:

And that’s all there is to it. You repeat the process for as many accordions as you like.

Here is a completed accordion set which makes copying and pasting even easier.

Setting an accordion to be open by default

You can set an accordion title to be open by default by adjusting the markup as follows. Note the additional open=”open” within the title.


Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!