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
It is preferable to leave the Open buy links in new window checkbox unchecked for this playlist.
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!
hi this does not work page not found?
also the add to cart opens a new page each time you add to cart?
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?
I experience an error though, don’t know if anyone has been able to get it right.
Hello there. Could you please give us more info on the error you are experiencing?
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?
Hello. Unfortunately at the moment it’s not possible to use AJAX to add products to the cart. I’m sorry.
would be great to have a field where you can add the price.
Thank you for the feedback! We’ll take a look if this is feasible to implement in a future version.
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?
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.
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.
Just added lyrics for 2 tracks on the 3rd player on our demo. Check it out https://www.cssigniter.com/preview/audioigniter/
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
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.
I meant that I already have a website running …can I still use it on my existing website host
Absolutely! You can use it on your existing WordPress website, you don’t need separate hosting!
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.
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.
is it possible to add downloads to the shopping cart via AJAX now? Im currently looking for a player with
playlist that lets me stay on the same page and continues playback while also being able to add songs to the cart.
Sorry for the late reply. Unfortunately at the moment this is not something AudioIgniter can do.
Can you play just snipers of the song that are available for purchase? Or, do you have to upload your own snippets and then have a separate download file of the full songs?
AudioIgniter currently cannot create song previews automatically, if you would like it to play parts of songs you would need to upload the cropped audio files in AudioIgniter playlists and then host the full files as WooCommerce products.
I want to play song only for 30 sec. is it possible? coz when 30sec played now the user can buy it. instead of listining songs
At the moment you can achieve this by uploading sample tracks of the desired length and not full tracks. The player can’t play just previews when the full track is uploaded.
Hi Nik, is there any way to enable search bar to search for an individual track with it’s name?
If tracks have been added as WooCommerce products, WordPress search could find them. However if they are just added as AudioIgniter playlist items they won’t show up I’m afraid.
Is there a way that I will create a playlist and to show all the songs but if a user has not bought the song then the song will be unavailable?
Unfortunately there is no easy way to achieve this I’m afraid, this would require an entirely new plugin to implement the functionality you are looking for.