Sell individual tracks using AudioIgniter with WooCommerce

In this tutorial we’ll show you how you can combine our popular audio player plugin AudioIgniter with WooCommerce to create a playlist that allows users to add individual tracks to their cart.

Each track will be a separate product that will be hidden from the catalog view in order to avoid cluttering the shop listing pages. Let’s see how we can achieve this.

Creating the products

The album product

We will start by creating a WooCommerce product which will be the entire album, this can be a physical product which will result in you sending the customer a physical copy of the album upon purchase, or a virtual/downloadable one, in case you only sell digital goods. There is nothing special about this product for the moment, just create it, fill it in and publish it, more info on creating products can be found here.

The track products

Now that the album product is done we need to create the track products. These will be downloadable products. Before publishing this product we will need to change its catalog visibility in order to hide it from product listings. To do that click the edit link under Catalog Visibility in the Publish metabox and select Search results only.

This will hide the product from the shop pages but it will be available in search results, in case someone looks for it. Now you can publish the product. Repeat this procedure for each album track.

Creating the playlist

Now that we have created all our products we have to create the AudioIgniter playlist. If you haven’t created a playlist with AudioIgniter have a look at this article. For this tutorial we need to focus on the Buy link metabox of each track in the playlist. To make this work what you need to add there is ?add-to-cart=ID where ID will be replaced with the numeric ID of each track product you created earlier. For info on how to find a product’s ID check this out.

After a visitor clicks the buy link the track product will be added to their cart and they will remain on the same page. If you would like them to be redirected to the cart page after adding the product replace the Buy link with this /cart/?add-to-cart=ID.

It is preferable to leave the Open buy links in new window checkbox unchecked for this playlist.

Finishing up

Once you are done adding all your tracks to the playlist, publish it, get the shortcode and paste it in the album product’s description box. What you will end up is something similar to this:

Now once a visitor clicks the buy link on the playlist they’ll get that particular track in their cart, easy peasy!

6 comments

  1. steve says:

    hi this does not work page not found?
    /cart/?add-to-cart=ID.
    also the add to cart opens a new page each time you add to cart?

    1. Nik Vourvachis says:

      Hello Steve.

      WooCommerce has default options for after add-to-cart redirects. Please check their documentation here https://docs.woocommerce.com/document/add-to-cart-redirect/ on how to modify them. Most likely your plugin is set to redirect to the cart page after adding a product.

      Regarding the 404 error if you add the /cart/ URL option, do you have a cart page with the slug of cart, or is it different in your installation?

  2. Iseach says:

    I experience an error though, don’t know if anyone has been able to get it right.

    1. Nik Vourvachis says:

      Hello there. Could you please give us more info on the error you are experiencing?

  3. Flex says:

    Hey,
    if i add a track to the cart, the whole page is reloading instead of just adding it to the basket. is there a solution?

    1. Nik Vourvachis says:

      Hello. Unfortunately at the moment it’s not possible to use AJAX to add products to the cart. I’m sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *