Single-minded Woocommerce – Selling just one thing

To wrap up my posts on using Woocommerce for the Mum's Back site, I thought I'd cover the work I needed to do in order to make it work in a sensible way when only selling one product.

I know that using a plugin like Woocommerce for a single product is overkill, but the store is going to sell far more in the future (although probably only a dozen or so for a while) and Woocommerce provides a great ecosystem of plugins for other functionality. Writing all of that myself far outweighs the inconvenience of wrestling Woocommerce to behave sensibly with one product.

Simplify product view

The bulk of the work was with simplifying the display of the product. A number of the features and helpful navigation makes sense for a larger store, but not when you're only selling one thing. In this situation the default Woocommerce product page is too cluttered, and elements are (or at least feel) unnecessary.

Remove the breadcrumb

There's a breadcrumb navigation at the top. This is the first example of an unnecessary element. Your single product is likely linked to from the main navigation and we don't want the user to end up on the main product listing page, referred to by Woocommerce as the Shop page.

Thankfully this is easily removed by adding the code to remove the action in your theme's functions.php file:

remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);

Hide the SKU

Again, I don't feel there is any benefit with displaying this to the customer. It's not like they're going to contact you and you'll need to ask which product they're referring to. The SKU is obviously necessary from a system point of view, and as soon as the store starts selling a second product it will need this included again, but for now I simply hid it with some CSS:

.product_meta {
    display: none;
}

Remove The Reviews

You may want to keep these and again it won't be long before we add them back in, but having an empty reviews section is worse than not having one at all in my opinion. A bit like a deserted comments section on a blog.

There's a plugin that achieves this for you, and simply disabling it will bring the functionality back. If you want to do the same, then install Disable Woocommerce Reviews, and activate it. Voila! Reviews gone.

Only Show The Description

The default product view has multiple tabs for displaying additional information about the product, reviews, etc. For this situation I wanted just a single tab/panel with the product's description.

To achieve this I removed the action that outputs the tabs view on the product page, and added in my own action to output just the product description. Again, I placed this in the functions.php file:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
 
function woocommerce_template_product_description() {
woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_product_description', 20 );

Shopping Cart in Menu

Not strictly to do with only selling one product, but it did require some tweaking. By default the link to your shopping basket is not displayed anywhere, and I wanted to add the familiar link to the main navigation.

Plugins to the rescue again, and after installing WooCommerce Menu Cart, I was able to add a menu item to the navigation and style it appropriately. I wanted the link to display even when the basket was empty, which is an option in the plugin, but it then linked through to the shop page. I decided to change this link back to the empty cart, but you could use the same technique to link to your product page.

A handy filter called wpmenucart_emptyurl is the key here. Simply hook in to it and return your decided URL.

function mb_cart_empty_url($url){
    global $woocommerce;
    return $woocommerce->cart->get_cart_url();
}
add_filter('wpmenucart_emptyurl','mb_cart_empty_url');

The only other problem with this is that if the user's basket is empty, the default view displays a link to the shop page so the user can go and buy something. You can override this by copying the templates/cart/cart-empty.php template from Woocommerce to your theme's woocommerce directory. Then swap in a link to your product, something like:

<p><a class="button" href="<?php echo esc_url(home_url('/product/my-cool-product/')); ?>">Buy This Cool Thing</a></p>

Send Them To The Checkout

If someone has added your product to their basket then it's time to get them to make the purchase. The default behaviour of Woocommerce is to leave them on the product page with a message and link to their basket and the checkout process. This is easily changed in the Woocommerce settings, under Products -> Display, you'll find an 'Add to basket behaviour' section. Simply check the box next to Redirect to the basket page after successful addition

That's it!

So with just a handful of tweaks the user journey of your single product Woocommerce store is greatly improved. These a non-destructive changes too. There's nothing hacky here, so you can carry on upgrading your plugins. Woocommerce templates do change from time to time, and so there may be some work required to copy those across and reapply your modifications. None of that is too painful though and I think it's worth it for getting the power and reliability of an e-commerce solution like Woocommerce.