Quick Tutorial: Create a WooCommerce Audio Store in Under an Hour

Published on: April 26, 2018
Updated: March 4, 2019

Creating a WooCommerce audio store doesn’t have to be complicated. With the right tools (read: plugins) at your disposal, you can be up and running in a matter of an hour, and without hiring a programmer to help you out.

So if you’re looking to sell audio books, samples of music, audio language learning materials, or even karaoke music, you’re in the right place.

In this post, I take you step-by-step through the process of building your very own WooCommerce audio library. The end result will be a fully operational WooCommerce audio store.

Here’s the kind of final effect that we’re going for:

What you need to get started building your WooCommerce audio store

Before we start, I’m going to assume that you already have the following:

There’s also the third element – our WooCommerce Product Table plugin. Let me show you how to get your hands on it, install it, and use it to build your WooCommerce audio store.

But before that…

Okay, I should probably address one small thing before I discuss how to use the plugin.

That thing is, “why do you even need it?”

The short answer is that it’s simply going to make selling audio files more effective for you and more convenient for your buyers. We’ve previously published a tutorial about how to create a WordPress audio library with embedded audio players. But it’s not obvious how to create an actual audio store, with embedded audio previews and purchasable download files.

This comes down to the nature of how selling audio files is usually done online. By far the most effective way to showcase a catalog of audio tracks is through a list or a table. Something like this:

With such a listing, the reader/buyer can listen to a number of audio files one after the other without having to navigate to separate product pages – each for one audio file. This might be the full audio file, so that people can listen without being able to download it (as they have to buy the product to actually download it!). Or it might be a short sample or snippet to convince them to buy the full version.

The buyer can also click the “add to cart” buttons directly next to the tracks that they like. Again, no need to navigate anywhere else.

The problem with presenting things like that, however, is that it’s impossible to do in raw WooCommerce. That’s what you need the WooCommerce Product Table plugin for.

Case study £1 – A WooCommerce audio store for Nico Backing Tracks

Nico composes and sells background music tracks through his Woo audio store – Nico Backing Tracks. Nico’s customers need to be able to listen to snippets of tracks before purchasing so he needed audio players embedded into the product list. That’s why Nico lists his backing tracks in a WooCommerce audio store powered by our WooCommerce Product Table plugin.

Customers can sort the audio store by price, reviews or track name. There’s no clicking from one page to another to listen to tracks and add them to the cart. Everything’s on one page. Once the customer knows what they want, they just have to add the track to their shopping cart before clicking view cart to make the payment.

Case study #2 – Music Drop’s WooCommerce audio store

Music Drop is a music platform with a WooCommerce audio store. Set up by Louis Colaiannia, the site’s mission is to be a platform where artists can sell their music to music lovers across the world.

Each artist has their own profile with tabs for information, an image gallery and audio. The purchase tab features a product table listing all the audio tracks by that artist. The table can be sorted by price, track name and genre. Plus, the embedded audio players mean users can listen to the tracks before they add any item to the shopping cart.

Case study #3 – Boom Bap Labs’ audio sounds shop

Boom Bap Labs sell individual sounds with audio previews through their sister site called Paypersample. The audio store is powered by WooCommerce Product Table because it provided the flexibility needed.

Each track has a sample track embedded into the table so customers can listen before they buy. To do this they installed the WordPress HTML5 Audio Player.

There’s hundreds of tracks to look through, that’s why customers benefit from the filters dropdowns and sort options. In a couple of seconds, the customer can filter the table by category, tag, beats per minute, and key.

Start by entering your personal license key and clicking on Save changes to enable the plugin.

Now, go through the rest of the options on the configuration page one by one and set them accordingly:

Columns

The structure that seems the most effective for a WooCommerce audio library is this: description:Listen Now,name,categories:Genre,price,add-to-cart

description:Listen Now – we’re using the main description field of the product to display a live audio embed – meaning, the buyer is going to be able to listen to the track before buying it,

name – the name of the audio track,

categories:Genre – it’s a good idea to categorize your audio products based on the genre; we’re using the product category for that, with the label changed to “Genre”,

price

add-to-cart – the “add to cart” button.

Of course, the above settings are just a suggestion. You are free to experiment and pick other columns when building your WooCommerce audio library.

Shortcodes

Make sure the box is checked. Otherwise the live audio embeds won’t work.

Product links

I like to set this to none for a WooCommerce audio store. However you can leave it set to all if that’s what you prefer.

When set to none, this makes sure that the actual product page of the audio track isn’t linked to from the table. Meaning, in a setup like this, the only clickable things within the table are the play buttons and the “add to cart” buttons, which should improve sales.

Product filters

WooCommerce Product Table lets users filter the table based on various attributes of the products. For audio files, it makes sense to enable filtering based on genres.

To achieve that, set the Product filters setting to Custom, and the Custom filters setting to categories.

The rest of the settings on the page are up to you. It’s best to experiment with those once you already have a live audio store table on the site. (Read: come back to this once you’re done with the rest of the process).

3. Add products to your WooCommerce audio store

WordPress and WooCommerce make this part very simple. Here’s what you do:

Start by going to your Products panel normally, from the WordPress dashboard:

Click on Add New.

Give your audio product a representative name. Keep it brief, though.

Assign the product to a category. As I mentioned earlier, it’s a good idea to use categories for genres.

Decide where you want to add the embedded audio player. Most people add it to the main product description or short description. Alternatively, you can add it to a WYSIWYG custom field. Either way, click the Add Media button above the toolbar (or insert a Gutenberg block) and upload or select an audio file from the media library. (Alternatively, insert the file from an external URL if you’re hosting your audios elsewhere.) Where it says, Embed or Link, pick Embed Media Player. Like so:

Mark the product as Downloadable, enter its price, and pick the file that the buyer will get access to after completing their purchase. (This will most likely be the exact same audio file you’ve embedded above.)

Repeat this step for each of your audio store’s products.

Tip: If you don’t like how the default WordPress audio player shortcode looks, don’t worry. Keep reading to learn about other audio player plugins you can use in your WooCommerce audio library.

4. Add your WooCommerce audio store library to any page or post

So far you’ve configured the plugin and added and audio tracks to the product catalog. Next, you just need to show this WooCommerce audio store module to your buyers.

This is very simple to execute. Just go to any page or post and edit it. The next step depends on whether you’re using the Classic Editor or Gutenberg:

When you publish the page or post, this shortcode will be converted into a live WooCommerce audio store table containing all your products with embedded audio tracks.

Depending on the options you chose on the audio table plugin settings page, your buyers can navigate the table easily, listen to any of the tracks or sort it by any column. They can also add audio tracks to cart, and filter the entire table to only display tracks of a given genre.

How to customize your WooCommerce audio library

The way your audio product table is presented can be further customized by altering the plugin’s shortcode directly.

Just to remind you, this is what the shortcode looks like by default:

[product_table]

Here are a couple of useful things you can do with it:

Perhaps you have other products in your store – not audios – and you want to prevent those from appearing in your audio store module. Or maybe you want to show a specific category of audio products only. Either way, you can use the “category” parameter for that. The following will only display products categorized under audio: [product_table category="audio"]. There are also options to show audio products with a specific tag, custom field value, custom taxonomy term, etc.

Want to encourage your users to buy more than one track? You can switch the standard “add to cart” buttons to checkboxes. Like so: [product_table cart_button="checkbox"]

Bonus tip – Show audio previews in a quick view lightbox

So far, you’ve learned how to list your WooCommerce audio store products in a table layout with a column containing embedded audio players. If you prefer, you can provide the audio samples in a quick view lightbox instead of directly in the product list.

You can achieve this by installing the WooCommerce Quick View Pro plugin. This adds ‘Quick View’ links or buttons to your product tables, or to the default store layout if you prefer. Customers can open the quick view for a product and listen to the audio player from a lightbox popup.

To set it up, simply install the plugin and add the embedded audio players or playlists to the product short description. This will appear as a music player in the quick view popup.

Enhance your WooCommerce audio library with other audio plugins

In the instructions above, I explained how to add music players to your WooCommerce audio store using the basic audio shortcode that comes with WordPress. If you don’t like how this looks, then you can embed your audio files using third party audio plugins instead.

The following music player plugins work nicely with a WooCommerce Product Table audio store:

mb.miniAudioPlayer

Install the free mb.miniAudioPlayer plugin if you want a choice of styling options for the music players in your WooCommerce audio library.

It works by adding extra styling to the default WordPress audio shortcode. Simply install the plugin and choose your options on the settings page. You can then insert audio players using the instructions earlier this tutorial. The fancy audio players will automatically appear in your WooCommerce audio store.

mb.miniAudioPlayer while playing an audio track, with player controls visible

mb.miniAudioPlayer while playing an audio track, with player controls visible

Please note that this plugin only works with the standard way of loading WooCommerce Product Table, and not lazy load. If you use lazy load then the default WordPress audio shortcode will be used instead.

The same happens if the column containing your WooCommerce audio players is in a hidden child row so that users have to click on a + icon to view it – in this case, the default audio player is used instead of mb.miniAudioPlayer. To avoid this, use the priorities option to make sure the column containing your audio players is visible on all screen sizes.

Compact WP Audio Player

I love the free Compact WP Audio Player plugin because it’s so incredibly simple. It lets you add a circular play icon which customers can click on to listen to tracks directly in the WooCommerce audio library. This takes up less space than the default WordPress audio player, and looks really neat.

The plugin author has packed a lot into this small audio plugin, as it has the main controls you need. While you’re playing an embedded audio track, the icon turns to a pause button so that you can stop and resume as needed.

To add a compact audio player in any of the fields in your WooCommerce audio store, simply install the plugin. The only other step is to add the shortcode [sc_embed_player fileurl="URL OF THE MP3 FILE"] to the field where you want to display the audio player for each product. This will display correctly in WooCommerce Product Table.

Create a WooCommerce audio store with free downloads

So far, we’ve talked about how to create an audio library with add to cart buttons. This is ideal if you want to sell your audio products. But what if that’s not what you want?

Fortunately, you can also use this WooCommerce audio plugin to provide free downloads. There are several ways to do this:

Option 1 – Create free audio products

Create a download product and set the price to 0. Users can add the free download to the cart in the usual way, and complete the WooCommerce checkout without having to pay. WooCommerce will then send them a secure link to the free download via email.

Option 2 – Add direct download links to the audio library

Alternatively, you can add a direct link to the download to the short description, long description or a custom field. You can style this as a button if you like, or leave it as plain link text. Call it something like ‘DOWNLOAD NOW’.

People can click to download the file to their computer immediately, bypassing the cart and checkout. For instructions on how to add a link or button to the audio library table, please see the knowledge base.

Can I create a WooCommerce audio store without free audio snippets?

Absolutely. You don’t have to include audio players with the full track or a short sample snippet.

Instead, you can just list the other columns without an embedded audio player. Or alternatively, add an image (watermarked if required) as the main product image and add an ‘image’ column to your product table. This will show the image instead of an audio player. The customer will receive an email with the actual audio file after purchasing.

Can I sell non-downloadable audio tracks?

So far, I’ve assumed that you want people to receive a link to download the full audio file after purchasing. If you don’t want people to be able to download the audio – for example for copyright reasons – then that’s fine too.

Here’s a nice simple way for you to sell audio products, without making them available for download. Customers can only listen to them on a hidden page on your website.

This is how to set it up:

Create a new page and use the ‘Add Media’ button to upload the audio file. WordPress will automatically convert this into an embedded audio player that you can listen to on the page, but which can’t be downloaded.

Password protect the page where you’ve added the audio player. This is easy to do – just click ‘Edit’ next to the ‘Visibility’ option in the ‘Public’ section of the Add/Edit Page screen.

Add the audio track as a ‘Virtual’ WooCommerce product.

Now, install Woo’s official Follow Ups plugin. Use it to create a email that will be sent to customers after they purchase this specific product. The email should contain a link to the password protected page where you have embedded the non-downloadable audio track. It should also contain the password so that they can unlock the hidden page.

Repeat this process for each audio product.

Go the extra mile and sell entire audio playlists

With the following setup, you can not only sell individual audio tracks but also entire playlists.

To do that, you first need to create some new products. The process starts normally by going to Products → Add New and naming your new audio playlist product accordingly.

Next, click on the Add Media button, but this time instead of adding an individual audio file, click on Create Audio Playlist and pick the tracks that should go into the playlist. When you’re done, click on Insert audio playlist.

Lastly, mark the product as Downloadable, and assign all the files that the buyer should be able to download once they complete the purchase.

This is what the playlist looks like for the buyer:

Your turn!

Now you know how to create a fully functional WooCommerce audio store with the WooCommerce Product Table plugin! The best thing is that the whole process can be carried out in less than an hour (reading this tutorial included). If you have lots of products then you might need longer to add them all, but an hour should be realistic to set up the basic WooCommerce audio store.

Get this WooCommerce audio plugin today and begin your adventure with it:

23 Comments

Kai

Nice one! But how do you deal with free downloads?
This function actually only works directly in Woocommerce with plugins like Free Downloads Woocommerce from Squaremedia. Would this be an option to have such a function direclty in your Product Table plugin? Would be a real game changer as you have to provide downloadable previews and files for your audio customers - and they don´t want to checkout every time...

Hi Kai, you can either create a download product and set the price to 0 so that people can add the free download to the cart in the usual way (which would involve going through checkout, which you don't want), OR you can add a direct link to the download to the short description, long description or a custom field so that people can click on it to download the file immediately. For instructions on this, please see https://barn2.co.uk/kb/product-table-icons-links-buttons.

Hi Scott, yes you can add an embedded preview clip to any of the text-based fields displayed in the audio store table layout, such as the short or long description or a custom field. Potential customers can click on the clip to play it, directly from the table view. There are instructions for this in the tutorial above - let me know if anything isn't clear.

To do this, you need to set up your products as the 'Variable' product type and add a variation for each purchase option, each with its own price. When you display the audio tracks in the product table, choose the variation dropdowns option. This will list the different purchase options as dropdown lists in the add to cart column.

John

I am very interested in your plugin, my idea is to set up an mp3 store, but I have a doubt. I would like that the clients can choose between paying a membership and being able to download all the songs they want, or buy them individually without membership.

How could I do so that some appear the add button to the cart, and others to download?

Hi John, yes you can do this by using WooCommerce Product Table with the official WooCommerce Subscriptions plugin. Add your one-off downloads as normal products which customers can purchase individually, and add the membership as a subscription product. When you create a subscription product, you will see an option to change the wording that appears in the add to cart button. This will appear in the product table, so the membership product can say something like 'Join Now' and the others can still say 'Add to Cart' as usual.

John

Alvaro

I would like to create a list only of hidden products that can not be seen through the store or search engines. What is the code to show them? I have searched the FAQ but I have only found the option of private, but not hidden.

You can do this with our WooCommerce Protected Categories plugin, which adds privacy options to entire categories (and the products within them). You can choose whether to protect a category and its products by a password, or just show it to specific logged in users or roles. The plugin has an option to show or hide your protected categories and their products from the public parts of your store, so you would need to disable this to keep them hidden.

WooCommerce Protected Categories works with WooCommerce Product Table, so products from a hidden category will only appear in the product table (and elsewhere in your store) if the user has access to them. They will be hidden from everyone else. Alternatively, if you add the product table layout to your category page template, then it will automatically be used whenever someone views a public or hidden category page.

Alvaro Guerra

I am currently working on a website, and what I want is that the products shown in a "VIP Zone" can only be seen in the product table of this area. I have installed Product Tables, Groups, Groups for Woommerce and Subscriptions for WooCommerce.

When a user purchases a VIP Subscription, he automatically becomes a "VIP" role, and can access this area.

On my page there are articles accessible to all, and those that can only be seen by users who have a "VIP" role.

The problem is that if a "VIP" user enters the store page, the products of the "VIP Zone" are also displayed, and that is what I would like to avoid.

Is there no way to show certain products only in the table of the "vip zone" (and not appear in search engines, or in the store)?

Thank you very much, and congratulations for the woocommerce tables plugin, I love it :)

Hi Alvaro, do you mean that your VIP users are added to a VIP Group when they buy the product? If so, you will need to edit each of the VIP products and restrict it so that only logged in VIP users can see it. This will hide them from the main store page for non-VIP users, and they will not be indexed by search engines.

You can use any of the options on this page to create a product table that only lists VIP products. For example, you might want to create a specific category and use this to list the products.

When a VIP user is logged in, the VIP products will be visible to them on the main store page as well as in the VIP product table. There's no way around this because the Groups products only affects who can see the products in a Group, it doesn't change where they appear on the website. Don't worry because if the products are restricted to VIP Group members then your normal users (e.g. guests or logged in users who aren't in this Group) won't be able to see them on the store page.

Hi SJ, the WooCommerce Account page lists the user's order history and they can click on an order to view a list of which products they purchased, but not download links. You would need to add this as a custom feature as I don't think it's possible off-the-shelf.

Hi, I have recently purchased ZoomSounds for my website and I have been trying for 2 weeks to find some information on the subject that I mention. I want to show my songs in a table and use WooCommerce Product Table. the problem is that I do not get the player button like in this video https://www.youtube.com/watch?v=SqqOQqOHq3Y

I do not know what shortcode to insert in my page where I show the tracks ... please help! THANK YOU!

Hi Alejandro, thanks for using WooCommerce Product Table. It sounds like there's a JavaScript conflict between ZoomSounds and WooCommerce Product Table. If you're using the lazy load option in WooCommerce Product Table then this could be the problem - try disabling it on the settings page, and see if that fixes the problem.

People sometimes have problems with audio plugins if the audio player column is hidden in a child row of the table (so that you have to click on the + icon to view it). If your ZoomSounds players are in a hidden column, then try setting the responsive display option to child_row_visible and that might help.

If that doesn't help, then I recommend that you try a different audio player plugin, such as the two mentioned in this article.

Hi
I have a question - Can I sell audio in my store but WITHOUT downloading? - so users who purchased the audio will be forced to login to there account to listen to the file from the site only?
I am afraid that if I will give the option to download my purchased files - people can send them to other people with out any control from my side...

Yes, you can do this. I have added full instructions to the above tutorial so that it will help other people who have the same question. Please see the 'Can I sell non-downloadable audio tracks?' section.