How we improved usability in our Product Table Plugin by 100%
It's nearly a year since our WooCommerce Product Table plugin was released and started taking the WooCommerce world by storm. In many ways, its early success was despite its usability and not because of it. Every in-depth review we have ever read has confirmed that it's a fantastic plugin but needed to be easier to use.
We have listened to feedback and released a major update that makes the plugin 100% easier to use. This is how we did it.
The problem with shortcodes
Until now, you could only create product tables by adding a shortcode to a page or post.
In many ways, this is what made WooCommerce Product Table the no. 1 way of creating a product list, catalogue, order form, or even a restaurant ordering system. The great thing about shortcodes is their flexibility and the fact that they can be re-used so many times on a single website. Being shortcode-driven made the plugin much more flexible than its competitors. You could configure the shortcode using literally dozens of options (48, the last time I counted!) - all by modifying the shortcode.
We made it as easy as possible for people to configure the product table shortcode by keeping the default shortcode simple, and creating an in-depth knowledge base. We also created tutorials around different plugin use cases, with accompanying YouTube videos showing product tables being set up.
Sounds great! So what's the problem?
The problem is that whatever their advantages, shortcodes simply aren't that user-friendly. Developers love shortcodes because of their flexibility, but about 50% of WooCommerce Product Table users are individual website owners. Our customers have risen to the challenge and have created 100's of fantastic product tables using the shortcode. We're very proud to see all the different ways in which people use our plugin!
However, we've always had an uncomfortable feeling that forcing our customers to use shortcodes wasn't really good enough. Despite the helpful tutorials and knowledge base, there was a steep learning curve. Users had to spend time reading the knowledge base and experimenting with the options to create their ideal product table.
But sales kept growing and the plugin received excellent feedback. Almost all of the reviews that people add to the plugin sales page have been 5 stars. Out of nearly 1,000 users, only 4 have ever complained about usability or requested an easier way to create product tables. These things made the uncomfortable feeling easy to ignore.
But the signs were there that we needed to improve the plugin's usability. Several well-known WordPress experts have published reviews of WooCommerce Product Table on their own blogs. Every single review concluded that it's easily the best WooCommerce table plugin, but needed to be easier to use. Most of the reviewers called for a shortcode generator, instead of forcing users to work with the shortcode.
We considered several options for improving plugin usability
Option 1 - Shortcode generator button in the WordPress TinyMCE toolbar
This would be similar to the shortcode generator that you often see in WordPress themes, or plugins such as Shortcodes Ultimate. You click on an icon in the toolbar above the standard WordPress content editor. A modal window opens, allowing you to choose from a list of options. Hitting Save adds a shortcode to the page/post - pre-configured with the options you selected.
Shortcode generators are a good compromise because they have all the flexibility of creating shortcodes directly, while having better usability.
Sounds great! Why haven't you done this?
The first problem is that with 48+ options, creating a shortcode generator for WooCommerce Product Table would be a huge task. It would take up a lot of resources, which we could otherwise put into developing new features that more customers are requesting.
The other problem is Gutenberg. In case you don't know, Gutenberg is the new content editor for WordPress. While Gutenberg is currently only available as a plugin, there are plans to add it to the WordPress core in the not-too-distant future. There's a lot of controversy around Gutenberg at the moment, but the fact is that the team behind WordPress are determined to overhaul the content creation process.
The upshot of Gutenberg is that the WordPress editor as we know it will be changing forever. It will be replaced by something more akin to a page builder system. This will consist of content 'blocks' which you can arrange in different layouts.
From a plugin company's perspective, it's not worth putting weeks or months of work into a new shortcode generator that will need redoing once Gutenberg becomes the norm.
As a result, we probably will develop a full shortcode generator for WooCommerce Product Table. However, it's not the right time for it yet. We decided to wait until Gutenberg becomes more widespread and then develop it as a content block for Gutenberg.
Option 2 - Hosted shortcode generator on our website
We also considered creating a shortcode generator using Gravity Forms with lots of conditional logic. This would involve adding a 'Create a Product Table' form to our website, where people could select their options and generate a shortcode which they could paste into their website.
This would be a reasonable compromise. However, we preferred the idea of fully integrating something into the plugin instead of keeping it separate.
Option 3 - Plugin settings page with popular options, plus a new 'Insert Product Table' button
Instead, we chose a different approach.
Version 1.8 of WooCommerce Product Table has an extended plugin settings page. You can use it to set default options which will apply to all your product tables. Your chosen defaults (e.g. the product table columns, filters and controls) are used automatically whenever you add a product table. This saves you from having to enter these options directly into the shortcode. Instead, the default shortcode will automatically inherit your pre-defined settings.
For obvious usability reasons, we haven't added all 48 of the product table options to the settings page. Some of the options are quite advanced, so we focussed on the ones that most people use. (You can still use the other options directly in the shortcode, which is fine for more advanced users.)
We've also added a new 'Insert Product Table' toolbar button, which you can use anywhere the WordPress toolbar appears (pages, posts, etc.). This adds the [product_table] shortcode in just one click, with all the default options that you chose on the settings page.
But the plugin still uses shortcodes! How is that better for usability?
Shortcodes are still an important part of WooCommerce Product Table. As we saw earlier, they're what makes it so flexible.
But the new default options mean that most plugin users no longer have to work out how to configure the shortcode. They simply choose their options on the settings page, click the toolbar button to insert a product table, and that's it.
All your product tables will inherit these default styles, so you don't have to set each option manually every time you create a product table. As well as saving time and repetition, it's easier for people who aren't comfortable working with shortcodes.
Of course, there are still situations where you might want to edit the shortcode directly. For example:
- You can edit the shortcode to override any of the defaults.
- Create multiple product tables - each one different - by changing each individual shortcode.
- Use the more advanced shortcode options which aren't available on the settings page.
To help you edit the shortcode, we've published a full list of shortcode options where you can see everything in one place.
Usability bonus - new styling options
Lots of you have requested built-in styling options for your product tables. Previously, WooCommerce Product Table inherited styles from your theme (e.g. fonts). The only way to restyle the table was to ad custom CSS to your theme or child theme.
The plugin settings page (WooCommerce > Settings > Products > Product tables) now contains styling options for customising the design of the product table. You can change the table border colours and widths, header background colour, cell background colour, header font colour, header font size, cell font colour, and cell font size.
This is all part of making WooCommerce Product Table easier to use for non-developers. (Of course, if you want to make even more styling changes to your product tables, then you can continue doing this using custom CSS.)
What's next?
Existing WooCommerce Product Table users can update to the new version via the WordPress Dashboard. If you're not using the plugin yet, get it today and start creating product tables that are easier than ever before!
We plan to continue improving WooCommerce Product Table over time, as well as working on our other WordPress plugins. In the meantime, we'd love to hear what you think of the usability improvements. Please review the plugin or add your comments below!