- Part 1: Four of the Best WooCommerce Themes
- Quality-Tested WooCommerce Themes: Part 2
- Part 3: Best WooCommerce Themes
- 3 More of the Best Free WooCommerce themes
- The Best Free WooCommerce theme: Storefront Review
- Part 4: Best WooCommerce Themes 2014
- Lenscap Review: A WooCommerce Theme for Content Sites
A big pain point for many of our readers has been finding great WooCommerce themes. As WooCommerce is a difficult plugin to theme correctly, a lot of themes out there improperly support the plugin. As we mentioned in our roundup of 5 Awesome Free WooCommerce Themes, some themes also claim to fully support WooCommerce, but use default WooCommerce styles that tend to look out of place with the rest of the theme.
While we do have a page full of recommended themes, plugins, and services, we’ve decided to start compiling a series of posts on the quality themes we’ve used for WooCommerce (and plan to write about other eCommerce plugins soon!). Our goal is to have a full resource of themes that leverage great design and tight WooCommerce integration. We’ll keep all of our recommendations together in this series and start with a selection 4 of the best WooCommerce themes here.
Here are some of our current favorite WooCommerce themes:
Divi is one of the newest themes from Elegant Themes, and features full WooCommerce support, as well as a Page Builder that allows you to drag-and-drop sections to easily create pages. Joining the Elegant Themes club for $69 will give you access to Divi and 86 other themes.
Installing Divi will provide a couple of setup options. You can customize colors and select from a few fonts using the theme customizer (Appearance > Customize), then configure the rest of setup from the new theme options menu under Appearance. For example, you can change the Number of Posts displayed on Archive pages setting to 15 to show 15 products on the Shop page rather than the typical 10.
Divi is very easy to use, and the frontend looks great. Product images are showcased and WooCommerce styles blend in with the rest of the theme.
The Page Builder makes it easy to create really cool pages – I was able to understand all of the options available by loading a sample template and reading through some of the documentation. You can add sections, determine whether they should be full width or have columns, and add modules (sliders, featured products, etc) to each section. You can even add your own CSS classes and IDs to easily customize these sections.
I really loved that I could use the Shop module for WooCommerce products, and display shop details such as featured, sale, or recent products on any Page Builder page of my choice. I was using this for my homepage, but you could use this to easily create great shop landing pages.
There are tons of other modules, such as pricing tables, percent bar counters, and other options that can help you create with no code (or minimal amounts of your choosing). While I usually don’t like when themes have tons of options built in, Divi adds options while maintaining a quality code base and without overriding all of the WooCommerce templates.
Divi can be overkill if you don’t plan on leveraging the page builder or other shortcodes to build landing pages, home pages, etc. If you want a minimal theme, this isn’t it.
If you’ve never used a Page Builder, you may need to play around with it a bit to get the hang of what each option does. I also didn’t like that SEO options are included with the theme when it’s far better to use a plugin like WordPress SEO for this, but you can disable these settings. Finally, I didn’t like that a link to Elegant Themes was hard-coded into the footer. You can change this into a copyright notice in the theme’s
footer.php by replacing this:
<p id="footer-info"><?php printf( __( 'Designed by %1$s | Powered by %2$s', 'Divi' ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p>
with something along these lines (replace with your site info):
<p id="footer-info"><?php printf( __( '© 2014 %s | All Rights Reserved', 'Divi' ), '<a href="https://www.sellwithwp.com">Sell with WP</a>' ); ?></p>
The Page Builder options are great, and I liked how easy it was to create home pages or landing pages with shortcodes / Page Builder modules rather than creating widgetized pages. WooCommerce support is well done, theme structure is good, and the shop pages look great. Pricing is lower than I’d expect at $69 and I was able to set up my test site within 30 minutes.
Salient is a $55 multipurpose WooCommerce theme that also features a page builder. You can build home pages and landing pages in the same way that you’d build them with the Divi page builder, and full WooCommerce support produces great shop and product pages.
Settings are created under a new “Salient” menu. While there are a lot to go through, you do have a lot of control over layout, colors, number of widget areas, and social button options. All settings are centralized within this menu rather than using the theme customizer. One setting I would recommend disabling is the smooth scroll – try it yourself, but I really hate it when I’m visiting sites with something similar enabled.
Salient has a really clean layout that makes your images pop. The shop and product pages show off your products will keeping the WooCommerce styles in line with the rest of the flat theme.
The visual composer makes building homepages and landing pages quick and easy, as you add rows and elements to each row. You can enable a full width or column layout for each row of elements, and save your customized pages as templates for reuse.
There are tons of elements to choose from for each section:
Widget areas also respond to the content being viewed: you can set widgets for the blog sidebar, pages, and shop sidebars to make sure that customers see only what’s relevant to the content they’re currently viewing.
I loved the page builder, but it doesn’t include any shop elements by default. You can get around this by inserting a text element and using the WooCommerce shortcodes, such as the featured products shortcode:
[featured_products per_page="4" columns="4" orderby="date" order="desc"] to display your shop elements.
Salient also has the same con as Divi – this isn’t a minimal theme, and if you don’t plan on using the page builder for home pages, landing pages, etc, you’ll have a lot of unnecessary code.
Finally, I did like using the page builder, but I had to tweak my typography settings and added some of my own CSS to get the homepage just the way I wanted, as the builder elements don’t resize themselves based on the column widths. This wasn’t a big deal for me, but something to keep in mind while you’re being wow’ed by the demo 🙂 . I don’t think you’d necessarily need to know any CSS to get the job done, but it adds that last bit of polish.
Salient is another easy to use, flat, beautiful WooCommerce theme. While I could have done with out the “Portfolio” custom post type it adds, I appreciated the full-featured integration with WooCommerce, good structure despite what I’d consider more options than needed, and the easy-to-use visual page builder. At $55, Salient was worth it for me for a bold, flat site that I set up within about 40 minutes.
Out of all of the themes in this list, Total probably has the best structure and codebase. I don’t like that it bundles a couple of plugins for sliders, but to be fair I experienced no issues while testing the theme. For $55, you’ll have a theme ready to integrate with WooCommerce that also features a page builder and several customization options.
The theme customizer will allow you to tweak the theme colors for Total, but these options are also included under the new Theme Options menu. There are several choices for typography, enabling or disabling custom post types, and WooCommerce settings, so this menu is a bit sluggish to use.
Total features a page builder very similar to Salient – users can add rows and elements to customize any page on their site, which is useful for the same pages (homepages, landing pages, etc). You can enable full width rows, or break rows into columns and add elements of your choosing.
As for WooCommerce styles, Total does a great job of fully integrating the theme and WooCommerce. Images look great, and for products with more than one image, the next image in the gallery will be displayed if a user hovers on the featured image.
Product pages match the rest of the theme’s layout and blend right in. I wasn’t crazy about the dropdown styling, but it’s very easy to correct with a tiny bit of CSS to match the quantity + / – boxes.
Several widget areas that respond to the content being viewed are also included. I’ve chosen to keep the “Testimonials” custom post type activated, so you’ll notice that I can customize the sidebar shown for that post type in addition to the others on my site.
Total suffers the same downsides as the other themes listed: lots of options. Again, this may be a positive for you, but it’s unlikely that you’ll need all of the options that are integrated (especially the custom post types, which I disabled for the most part). For my own themes, I usually prefer a more minimal approach and only add what’s needed.
Catching on to all of the possible options and slider integrations also took a bit of effort, so there’s a slightly higher learning curve with Total. I was able to achieve the look I wanted for my test site, but had to put some time into figuring out how the pieces of the theme fit together. SEO settings are included with this one as well and are unnecessary, as this should be handled by a plugin.
Two different sliders are also bundled with the theme, which could confuse some people, and required me to test each one to see which was better for what I was trying to achieve (though I’d recommend against using sliders anyway).
While Total takes some time to learn, it’s a quality-coded theme with several options for customization (though this is a double-edged sword). For $55, Total is very reasonably priced and provides a tight WooCommerce integration with a lot of possibilities.
Store is really flexible in terms of setup options, as it has a quick-start homepage setup you can use, or a full widgetized layout. You can completely customize the way your homepage looks, and leverage the “Widgetized Page” template to do the same for any other page on your site (i.e., landing pages). At $79 for the theme plus one year of support or $139 to upgrade to two years of priority support, Store is another affordable WooCommerce theme.
All color options are available by using the theme customizer, and setup options are available within the newly created “Theme Options” menu.
Using Obox themes, you have fine-grained control over a lot of aspects of your store, such as typography, advertisements, and layout options. You have a few choices for homepage layouts, including a quick setup or a widgetized homepage, and widgets are color-coded to help you determine the best location for each.
Widgetized pages are very handy for landing pages or pages that will leverage the custom post types, such as testimonials or team members. You can adjust the number of columns while editing the page, or use the “Widgetized Page” template to create widget sections:
WooCommerce styles are consistent with the rest of the theme and product pages feature a clean, flat layout:
There are lots of store options available, so setting up Store takes a decent chunk of time. My setup time was longer than usual for my sample shop, as it took me some time to learn what each widget and layout option did.
Several different custom post types are added by the theme, such as “Partners” and a “Portfolios” type. While I did like using some of these, such as the “Testimonials” and “Team” post types, I would have liked to either enable each of these manually, or see them as a companion plugin to the theme so that unneeded code isn’t hanging around, nor are these added to the main menu. This would also ensure that users can take this information with them if they change themes.
As for code quality, best practices are not always followed, so this may cause issues. For example, there are direct SQL queries in some places where they shouldn’t be, which may cause conflicts with plugins.
Store is a good WooCommerce theme with great options for typography and layouts, but may take you a bit of time to setup and learn to use. If you want to have options for team members, portfolio items, company features, and services, then you’ll like that they’re all integrated into this theme (though keep in mind that you won’t be able to take them with you if you switch!).
I liked the ability to create several widgetized pages, which is helpful for creating home pages and landing pages. However, if you need to integrate with plugins other than WooCommerce or its extensions, then it may not be the best choice for you as conflicts may result.
We’ll be recommending more themes – these aren’t the only good ones we’ve found! We’ll post 4-5 at a time, as we need time to test the theme and glance through the codebase to make sure it’s something that we want to recommend to our readers. We’ve created a category for eCommerce themes so it’s easy to find all of our recommendations!