Create an mp3 Download Store on WordPress with WooCommerce and AudioIgniter

Posted by

This article/tutorial will focus on how we can use WordPress to sell mp3 downloads using WooCommerce and AudioIgniter. WooCommerce, as I’m sure you’re aware is the undoubted goto plugin for selling online. As part of its feature set, it allows you to sell downloadable content. AudioIgniter is perhaps one of the best audio players for WordPress. We can use them together to create a great solution for music artists, bands and record labels.

At the end of this tutorial, we’ll have a page for our album release. On the page will be an AudioIgniter player. You will be able to listen to the album on the player. You will also be able to add individual tracks to your shopping cart to purchase.

(Slightly annoying disclaimer: At the moment there isn’t an option to add tracks to cart via Ajax. This means that the page reloads when you add to cart. A workaround is to open the buy link in a new tab. Not perfect I know, but that’s where we are at the moment…)

As a test site for this project, I’ll be using Uncle Bob’s Records. This is a (very) small record label that releases eclectic and experimental electronic music. It currently has no e-commerce functionality, and audio embed is currently from Spotify and Bandcamp so it will be a great subject for this tutorial.

We’re going to use Storefront as our theme. It’s clean and simple, and will give us an uncomplicated starting point for this project.

Backup Your WordPress Site

With any new changes to your website, backup! I can’t stress this strongly enough. If you haven’t got Updraft installed on your site, add it now and backup your site. If it all goes wrong you can easily restore your site back to your starting point.

Install WooCommerce

If you haven’t already, get WooCommerce setup on your site. If you need help setting up WooCommerce for the first time please see the Start Selling Online tutorial sessions n this site, Part 8 is especially useful.

Setup Products / Releases in WooCommerce

We’re going to first set up our main album product in WooCommerce. Go to Products > Add New and create a downloadable product for the album. Publish it.

We’re then going to set up our individual tracks as products in WooCommerce. As before go to Products > Add New and create a downloadable product, one for each track on the album release. For each track you create change Catalog Visibility to Search results only. This isn’t critical but it will hide the individual tracks from your store making it look cleaner to your site visitors.

We can make this look great by ensuring that we add album artwork to our individual tracks. We can also assign categories within our store, and also tag our tracks with the album name, artist, genre, etc.

Install CSSIgniter AudioIgniter Pro

If you’re not using it already then visit CSSIgniter and get AudioIgniter Pro. It’s a fantastic plugin for audio streaming and will transform your site. We’ll be using this as the main player on our website.

Create a Playlist

Go to New > Playlist in the top menu bar in your admin panel. Create a playlist for your album release. Include artwork and add it to each track. If you’ve purchased the pro version you can batch upload to make the process much quicker. You can reorder the tracks by dragging and dropping.

At the bottom of the Create a Playlist page there’s some shortcode. Copy this. Put the shortcode on your album page. If you don’t have one, create it! Add a Shortcode block using the Gutenberg page editor and paste your shortcode. Visit your page and check it all works.

Add Buy Links to Your Playlist

We should now have a playlist that works. Now it’s time to add buy links so visitors can add individual tracks to their cart. Visit Products > All Products in the WordPress admin bar. You will see if you hover over the name of each track you’ll see an ID number popup below. We’ll need these numbers next so keep this page open.

In another tab or window, open up your playlist by visiting Playlists > Playlists in the admin bar and selecting the Edit option for your playlist. You will see that each track in the playlist has a ‘Buy link’ field.

For each track, insert into the field the following line of code, replacing ID with the ID number we previously looked at on the WooCommerce product page.

?add-to-cart=ID

We can now add our playlist shortcode to wherever we wish to feature our release on our website. The main album product page would be an obvious place, although we can also use it on blog posts, or on a general release page. The buy links will add the individual tracks to the shopping cart, wherever the player is posted (on your site of course).

Completing Our mp3 Download Store…

For Uncle Bob’s Records I’m going to now take this all a step further. I’ll be converting all of the current releases to AudioIgniter playlists. I’ll be creating downloadable products for each release in the catalogue, and creating store products for each individual track.

The menu bar will now include a link to the Shop page, so all album products can be accessed for direct purchase (individual tracks, of course, will be accessed via the players for direct purchase).

Once this is finished I’ll have a fully functioning mp3 Download Store built into my record label website, with the minimal financial outlay and just a few hours work…