how to add an audio player to woocommerce

How to add an Audio Player to WooCommerce

Are you looking for various ways to add an audio player to WooCommerce? It can be a great way to showcase a unique online store to your customers and make it stand out from the competition.

But before that, let’s have a look at why adding an audio player to your online store can be advantageous for you.

Why add an Audio Player to WooCommerce?

WooCommerce is an eCommerce platform, one might wonder what advantage it could be to add an audio player to the WooCommerce site? We might have an answer for you. But first, let me ask you some questions.

Have you heard music playing in the background while you shop in a mall? What might be the reason behind playing pleasing songs in the shops? You are not there for listening to music for sure.

Several pieces of research have shown that listening to music uplifts buyers’ moods. It produces the same effect for online buyers as well. One advantage seen is the extended period in which buyers stay on the site when the music is automatically played in the background. Another advantage is the positive surge in the number of sales. You might be selling anything online, add an audio player to the WooCommerce site you would surely make buyers stay longer at your site and even get more orders.

There is another reason you might want to add an audio player to the WooCommerce site. Your WooCommerce site might be dealing in online music albums. How can one listen to the new album before they purchase it? Here comes the need for an audio player for your WooCommerce site. You can add the previews of the upcoming songs/albums which buyers can listen to and get excited about your upcoming project before they buy it online from your site. You can also set the music file to be downloadable or not as per your choice using the settings available in some plugins.

Things to look for in an audio player for WooCommerce

Now that you have decided that you want to add an audio player to the WooCommerce site, let’s discuss what you must look for in an audio player for your site.

To determine which music player to use, we must first determine what we will use it for. Here are a few different things to think about.

Performance Effects

It’s also important to think about any performance effects when selecting an audio player for your website. Playing high-definition files might slow down the user experience. A custom or self-hosted audio solution can significantly improve performance, but it comes with the cost of developing and maintaining the player.

When evaluating performance, keep the following points in mind: Do you have a lot of files or files that are large in size? How much technical work can you handle?

Controls and Branding

The way your music player behaves can make a big difference, and it’s often the difference between a player that blends in with the design of a site and one that was thrown in randomly. Aside from that, many of the simpler (and less expensive) audio player options include the branding of another company—and sometimes even advertisements.

Here are a few things to consider to help you determine what you need: Do you want the logo of another company to appear on your website? Are you looking for a way to customize the controls that users have access to? Do you want to see ads that you don’t have any control over? What level of integration do you want from your music player?

File Support

What methods do you use to keep your file types organized? Although MP3s are widely available, you may be looking for a solution that offers special support.

Other concerns about audio file types include: Do you require high-definition or large-file playback? Is the music coming from an audio file or is it embedded in a video file? Do you require audio stream support rather than static files? Do you want to mix file types, for example, to make a playlist of various file types?

Cost

The cost of a music player is the final consideration. Actually, there are three types of this: Are you looking for a cost-free alternative? Would you be willing to pay a one-time fee for one that met all of your requirements? Do you use an audio player frequently enough to justify a monthly fee?

How to add an Audio Player to WooCommerce

You can add an audio player to WooCommerce using two major ways:

  1. Built-in WooCommerce Audio Player
  2. Using a Plugin

We’ll look into both of the ways in detail so that you can use any of the methods to add an audio player to your online store.

1. Add a built-in Audio Player to WooCommerce

You can display and playback audio files on your website thanks to the built-in audio player that comes standard with WordPress. It is also possible to transform it into a widget and use a WordPress shortcode to insert it anywhere on your site. Either way, it can be incorporated into your posts.

However, before you start, there are some limitations you need to know about this method.

To begin, it is currently only capable of supporting around 30 different services. This is a restricted list, even though it contains some of the most well-known options, such as SoundCloud, Spotify, and YouTube. You can access the complete list by going to the Embed page of the WordPress Codex.

Second, this embed will frequently include code from the third-party service that is responsible for hosting the content. This may cause your website to take longer to load and generate additional requests. The majority of the time, it is not noticeable; however, it might be a problem on website hosts that are slower or with larger files.

1.1. Add an Audio Player as a Post

We will start with the simplest of the available audio players which is the built-in audio player of WordPress.

To include an audio player in your post, Open the Media tab from your WordPress dashboard and click on the Add Media button. After that, you’ll need to press the Select Files button to upload your audio file. After the media has been added to the media library, you can edit the attachment details and then insert these media into the posts as well.

1.2. Add an Widget for the Audio Player

However, you can also place the audio as a widget by going to the Appearance > Widgets from your WordPress dashboard. You will need to click on the Add icon and then select the Audio widget. Now, drag and drop the widget to the widget area where you want to place it.

Here, you will get three options to add your audio file. The first one is to upload the file from your computer by clicking Upload. The next one is to select Media from Media Library you uploaded earlier. The last one is to paste the URL of the content from other music platforms in the Insert from URL option.

Once you add your audio to the library, simply click Update at the upper right corner.

The widget that has an audio player will be added to your WooCommerce site at the desired position. We have added the audio file to the sidebar for this demonstration as you can see in the following screenshot.

2. Add Audio Player to WooCommerce using a Plugin

Now let’s start with how to use an audio player plugin for your WooCommerce store.

We will be using the Music Player for WooCommerce plugin here. It is one of the most convenient plugins to use for WooCommerce users and is compatible with OGA, MP3, WAV, and WMA file formats. On the other hand, there are only three skins available to choose from when it comes to the player layout.

We will be using this plugin to add and customize an audio player on your website for a downloadable audio product.

music player for woocommerce add audio player to woocommerce

To start using the plugin, you have to install and activate it first. But before we start, make sure that you have setup up WooCommerce without missing any steps and used one of the compatible WooCommerce themes. This will avoid any theme or plugin conflicts that may occur during the process.

2.1. Install and Activate the Plugin

First of all, you need to log in to your WordPress dashboard and go to Plugins > Add New.

In the search bar of the plugins menu, enter the keywords for the plugin and all the matching results will be shown. Once you find the plugin, click on Install Now.

Once installed, make sure that you Activate the plugin on your website too.

You can also install the plugin manually if you want to use a plugin that is not included in the official WordPress plugin repository.

2.2. Customize the Audio Player from Plugin Settings

After the activation of the plugin, you can easily customize the audio player through Settings > Music Player for WooCommerce from your WordPress dashboard. You can tweak the different features of the plugin from here.

As soon as you open the plugin options, you’ll be provided with the general settings. The free version only includes limited options like including the players only for the registered users, applying fade-out, and changing the text for product purchased time in the playlist. However, the premium version consists of more options that you can customize with the plugin.

general settings add audio player to woocommerce

Similarly, you also get a number of customization options to change the skin of the audio player, and include the audio player in all products, if you scroll further down. There are also several playback settings that you can adjust along with preload for the metadata.

skin options add audio player to woocommerce

The plugin can also be integrated with Google Analytics for registering new events when the songs are played. And finally, a troubleshooting area is also provided to you which can be helpful to you if you encounter any type of minor issues.

There are also a number of addons that you can implement on your website with the plugin depending on the installed plugins of your website. You can use them to increase the functionality of your online store even more. After you make all the necessary changes with the plugin settings, just click on Save Settings.

2.3. Add the Audio Products

For the above settings to work for your product, you also have to make sure to add an audio product from the edit product page of your store as well. Just go to Products > All Products and click on Edit for the product that you want to add the audio player. If you want to add a new audio product entirely, click on Add New.

Now, change or enter all the necessary details for the product here.

After you are done, go to the Product Data section check the product as Downloadable . Then, open the General tab and add the audio file as the downloadable virtual product that you want to play on the audio player of the product page. You must mark the product as downloadable as the plugin only supports downloadable audio products for the audio player.

downloadable audio product add audio player to woocommerce

You can further make changes to the audio player for the particular audio product if you scroll down to the Music Player for WooCommerce section. They have similar options to that of the main plugin settings.

After you have made all the necessary customizations to the product, Publish or Update the product. You will be able to see the audio player for the product once you preview the product page.

Bonus: Add Videos to the WooCommerce product gallery

In the above article, we have discussed how to add an audio player to a WooCommerce site. Wouldn’t it be amazing if you can add videos to the WooCommerce product gallery as well?

In most cases, the product image helps buyers buy it. But some products also need videos. Although texts can describe a product, some products can be better summarised in a video that anyone can watch.

Adding videos also helps increase conversions for products that a video can better explain. So let’s see how you can add videos to WooCommerce’s product gallery with a quick guide.

How to add videos to the WooCommerce product page?

By default, WooCommerce does not include an option that allows users to embed videos onto product pages. When it comes to adding additional functionality that WooCommerce is missing, a plugin is the most effective method because of the reasons listed above.

It is possible to add videos to the WooCommerce product gallery through the use of several different plugins. But here, we will use Product Video Gallery for WooCommerce for this section.

Step 1: Install and Activate the Product Video Gallery for WooCommerce

First, you need to go to your WordPress dashboard and select Plugins > Add New from the drop-down menu to install the plugin just like the above-mentioned steps.

This will redirect you to the plugin page, where you’ll find a list of recommended plugins. On the right-hand side, there is a search bar where you can enter the keywords for the plugin.

Once the plugin appears in the search results, click the ‘Install Now’ button. It only takes a few seconds to install the plugin. Make sure to activate the plugin after you’ve finished installing it.

You have now successfully installed and activated the plugin.

Step 2: Configure the Plugin Settings

After activating the plugin, a list of video-adding options will appear in Products > Product Video WC from your WordPress dashboard. You can configure product videos here. Simply check your preferred boxes.

First, choose the product video gallery slider layout. Check or uncheck the checkboxes to enable or disable slider auto-play, slider infinite look, the slider arrow, and thumbnail arrow. Select the video thumbnail for all products, etc.

After you make all the necessary changes, don’t forget to save the settings.

Step 3: Add video to the product

You can now visit the product page to add the video. Just go to Products > All Products from the WordPress dashboard once again. To add a video to an existing product’s gallery, click Edit. Then, add the video gallery to the product.

You’ll reach the product edit page when you click it. You’ll find ‘Product Video URL’ at the bottom of the edit product page. Paste the YouTube video’s URL into the gallery. To save changes, click ‘Update‘.

If you want more details on how to add a product video gallery in WooCommerce, feel free to check out the complete guide on it.

Conclusion:

This guide can help you understand the need and the process of adding an audio player to the WooCommerce site. The need to add an audio player to the WooCommerce site is imminent. Not just in case the product you are selling is music and related to it somehow but also if you want users to stay longer on your site and purchase more products. Add an audio player to your WooCommerce site and you’ll surely see positive trends on your site. Above all, it gives your site a nice aesthetic look and it’s not difficult to set up at all.

The easiest way to add an audio player to the WooCommerce site is to use the built-in player of WordPress. It is simple to configure, and easier to use and with the new updates, the overall appearance of the widgets is also improved. Simply upload your music files to the media library and using the Audio widget place the audio track at your preferred location on your website.

Another feature-rich method is to use plugins to add an audio player to the WooCommerce site. You can choose from the never-ending list of available audio plugins. You either download the.zip file from the developer’s website or find the plugin in the WordPress plugin library. Install and activate the plugin. Also, tweak the settings for a better user experience.

So can you add an audio player to your website now? Do let us know in the comments.

In the meantime, here are some more of our tutorials that can be helpful for you to customize your WooCommerce store.