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!

Related Articles

16 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.

  4. Sonya says:

    would be great to have a field where you can add the price.

    1. Nik Vourvachis says:

      Hello Sonya.

      Thank you for the feedback! We’ll take a look if this is feasible to implement in a future version.

  5. Ser says:

    I love how easy it is to create playlists… but I can’t display them! The shortcode is not working.
    How could I fix this?

    1. Nik Vourvachis says:

      Hello there!
      Could you please post your issue in the plugin’s support forum here along with a short explanation and a link to a page where the issue is present, if available? We’ll be right along to help.

  6. allen m says:

    Hi there, I love this plugin but before i buy pro i want to see how the lyrics work. I can’t see any examples in the demos.

    1. Gerasimos Tsiamalos says:

      Hi Alen,

      Just added lyrics for 2 tracks on the 3rd player on our demo. Check it out https://www.cssigniter.com/preview/audioigniter/

  7. Tianna Wooda says:

    Hi can you change the background color and the overall size of the player…how is payment made …can the lyrics show as well….I dont need hosting can i still use this

    Thanks

    1. Nik says:

      Hello Tianna.
      The pro version of AudioIgniter provides color customization options for the player, including background color. The player adapts to the size of the page it’s placed in, and the height can be modified by the user. AudioIgniter has the ability to display lyrics or any other text you might want to display for each track. Sales are handled via WooCommerce. Lastly, could you please explain your final question further? I’m not sure I got it.
      Thank you!

  8. Sebastian says:

    Hello, I’m Sebastian, from Kenya. I’m using your plugin and need to see the views per song at certain time,m is there a way i can implement this please?

    Thanks in Advance.

    1. Nik says:

      Hello Sebastian.
      Unfortunately there is no easy way to get these kind of information on AudioIgniter at the moment, I’m sorry. We are looking on improving the plugin’s functionality though, I’ll note down this feature and if it’s feasible we’ll consider adding it in a future update. Thank you.

Leave a Reply

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