SkyVerge WooCommerce Extensions

Our 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:

WooCommerce Product Documents Accordion

Standard Accordion Menus

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. You can download this child theme template to fill in if you’d like. Feel free to change the screenshot 🙂 :

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:

WooCommerce Product Documents Accordion Color

Change background color

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:

WooCommerce Product Documents accordion text color

Change Accordion Text Color

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.

WooCommerce Product Documents Edited Accordion Menu

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.

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

3 Comments

  1. Is there any easy to just remove all the styling?

  2. Great article!

    I would like to ask if there is any way to add a font icon before the text, i was trying to use something like this:

    EN English

    SP Spanish

    But seems like it wont work.

    Is there a work around? or maybe we can feature request it?

    • interesting idea — are you talking about the accordion / section title itself, or adding this to each document link? We could probably use the section / document title as a CSS class.

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.