WooCommerce, the free eCommerce solution for WordPress, is awesome. It’s flexible, extensible, and easy for novices to use. It has one disadvantage though: out-of-the-box, the templates are relatively inflexible, and tend to make a lot of design and UX decisions for you. For non-developers trying to easily build their own eCommerce store, this is a good thing, but for agencies and professional designer/developers working on a custom design, it can be maddening trying to break out of the default HTML structure.
In our last WooCommerce post, I shared a tip for making the quantity field an HTML select input, as a way to improve the user experience. This week, I have a tip for designers trying to ditch the native WooCommerce tab design, by showing reviews in their own place on your product template page.
The background
By default, WooCommerce automatically loads the reviews template inside the tabs interface, and there’s no easy WooCommerce function to just show reviews. (Well, there sort of is, but it doesn’t really work… at least not for me.) Loading the template file directly with wc_get_template() is another option, but that doesn’t work well either — the form loads, and reviews submit, but the reviews themselves don’t show up.
See, WooCommerce “reviews” are actually stock WordPress comments in disguise. WooCommerce hooks into the comments_template filter in a custom template loader class, and loads its own comments template on individual product pages.
The answer (skip here if you’re in a tl;dr mood)
What does that mean for you? Simple: To load WooCommerce reviews outside a tab, use WordPress’ native comments_template() function. Easy!
Once you understand how reviews are set up, it’s incredibly obvious that this will work. It’s not incredibly well documented though (I imagine this isn’t a common problem). WooCommerce is so full of custom functions and hooks that it’s easy to get tangled in a complex web of custom functions, but this is a case where the simplest answer is the right answer. It’s also a great example of how you can leverage built in WordPress features for your own custom purposes.
Have a great example of a custom WooCommerce site? Share it in the comments below and we may include it in a future blog post!
Hi Chris, thanks for the informative post.
I came across this post a few months ago when I was trying to display product reviews in a page for my site https://herbolab.com.
This turned out to be impossible to implement, so I had to develop a plugin myself. This and other ideas gave birth to https://shopitpress.com/.
We have now developed a plugin that displays woocommerce reviews anywhere with shortcode, plus it insert product Schema. I would love if you can include it in your post, it’s free.
Check it out: https://shopitpress.com/plugins/sip-reviews-shortcode-woocommerce/
Thanks and keep it up!
Best,
Fran
Thank you! This worked for me.
In my particular situation, I overrode the single-product-reviews.php template (see: http://docs.woothemes.com/document/template-structure/). Though I didn’t make any changes to the file, it allowed me to call it via:
comments_template( ‘woocommerce/single-product-reviews’ );
If there is another way to do with without overwritting the template, I’d love to know.
Thanks!
Thanks Chris!
Really easy, straightforward and helpful!