How to Display Swatches in an Accordion Style

If you have a lot of product attributes, using swatches might take up a lot of room on the product page. With WooCommerce Attribute Swatches you can display your attributes in an accordion to neaten things up.

To enable the accordion style on your product pages, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > Attribute Swatches and click on the Style tab.
style tab attribute swatches
  1. Once here you’ll see a dropdown next to Enable Accordion. Change this to Yes and click the blue Save Changes button at the bottom of the page.
enable accordion

Your swatches will now be hidden within an accordion on the single product page.

attributes in accordion

Customers can open each one to select the relevant options as usual.

selected attributes

Are you using WooCommerce Attribute Swatches yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooCommerce Attribute Swatches

WooCommerce Attribute Swatches

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support