Customize WooCommerce product documents accordion menus

The Skyverge WooCommerce Product Documents extension is a very handy tool for displaying relevant documentation for products. For example, many stores use it to display warranty information, assembly instructions, sample ebook chapters, and more.

However, some users have noted that they don’t like the way accordions are displayed. If you’re using a theme with a flat design, the accordion menus for the product documents can look odd:

For this example, I’m going to use the free Highwind theme from James Koster, which includes WooCommerce support. Notice that the rest of the WooCommerce buttons blend in with the theme styling (some themes do a terrible job with this), but my product documents accordion menus look a little bit out of place.

Don’t worry! We can really easily fix our WooCommerce Product Documents accordions with a tiny bit of CSS.

First, you’ll need to make sure you can safely update your theme’s styles. Some themes will include a custom CSS stylesheet (many WooCommerce themes include this already) where you can make your CSS tweaks. If not, you should be using a child theme to make your changes.

Make a Child Theme

Here’s the fastest way to make a child theme if you haven’t done so already.

Look at your theme’s folder – you’ll need to know the template name for the theme. I do this via FTP by going to /wp-content/themes and viewing all installed themes. We’ll need the name on the folder (template name) to create our child theme.

The only thing needed for a child theme is a new style.css file. The child theme stylesheet can import the parent theme’s styles, then modify them from there. It’s loaded after the parent stylesheet, so any child theme styles will override the parent theme.

To create your child theme, make a new folder for your theme, and create a style.css file with your text editor (i.e., Notepad++ or TextWrangler). The bare minimum that should be included in that file is this:

/**
 *
 * Theme Name: MYTHEME Child
 * Template: mytheme
 */

@import url("../template/style.css");

/**
 * Add child theme styles below.
 */

Adjust your template and theme names accordingly. As per the WordPress codex:

The only required lines are the Theme Name, the Template, and (if the stylesheet of your child theme is being built off of the parent theme — with a few modifications) the ‘@import url’ line.

All you have to do is upload that child theme folder via FTP, or compress it and upload the .zip file of your child theme to your site.

Add Accordion Menu CSS

Now that you have your child theme or custom stylesheet ready to go, you can add a small bit of CSS to change the accordion menus. As we’ll want them to look flat to match our theme, we’ll simply need to adjust the background by adding this to the end of our child theme’s stylesheet:

.ui-accordion .ui-accordion-icons {
    background: #005dab;
}

You can use whatever background color you choose to match your theme. When you view your product now, you’ll see that your accordion menus now have a flat look with the background color of your choosing:

Since my background color is so dark, my text now looks awful. If you want to change the text color, that’s simple as well. Add a color to the CSS bit we’ve just put into our stylesheet:

.ui-accordion .ui-accordion-icons {
    background: #005dab;
    color: #ffffff;
}

Notice that my text is now white instead, which is far more readable:

You can use this color picker for different colors instead.

That’s it! Now my accordion menus look flat and are consistent with the rest of my theme.

All Done!

This CSS will affect your menus anywhere documents are displayed, including the Product Documents widget and when using the [woocommerce_product_documents] shortcode.

Want to learn more about customizing this extension or using the available widgets and shortcodes? Check out the full documentation.