Time: 30 mins
Using this A-Z guide you will be able to easily create audio tables like these on your own website:
*Screenshots. Show a Lite or PRO tag on corner of the images.*
You need to know the basics of WooCommerce. In case you are not familiar with it, please see some guides on WooCommerce first. Learn how to install it on your site and create some products. After that you can come back to this guide. It will cover everything else in detail.
– WooCommerce Product Table Lite
– Or, if you want truly professional results and all the PRO exclusive features, invest in getting the premium WooCommerce Product Table PRO for your website. Note that some features in this guide are clearly marked as WCPT PRO exclusive.
Table of contents
You can use these links to quickly jump to any specific section of this guide.
- Creating the products
- Adding attributes – Album, Artist, Genre, New / Trending
- Adding a preview audio track
- Adding the purchasable audio track
- Adding custom fields – Duration, BPM, Lyrics
- Adding category
- Creating the product table
- Adding columns to the table
- Adding navigation options – Result count, Sortby
- Creating a mobile optimized responsive view
WCPT PRO (premium version) exclusive features:
- Adding navigation filters to the table
- Special badges: New, Trending
- Adding result count next to filter options
- Waveplayer integration
- Replace the shop page grid with a table
- Adding a popup showing song lyrics
- Adding a download button for the song preview or sheet music file
- Display specific product in a table based on attribute, IDs or custom fields.
Creating the products
We will be adding the below listed properties to our products. But you are not limited to these properties. When you are done with this guide you will know how to add absolutely any property to your product table.
- Attributes – Album, Artist, Genre, Special badge (like New and Trending)
- Custom fields – Duration, BPM, Lyrics
If you are not familiar with Attributes or Custom Fields, that is not a problem because this guide will cover how to create both of them, so just follow along.
What are WooCommerce attributes?
In WooCommerce attributes are basically product properties like Album or Artist for songs or Color and Size for clothes, etc.
You need to tell woocommerce the names of the properties that you want to add to your products and the possible values for these properties. For example suppose you want your products to have properties like Album and Artist. In that case you need to create WooCommerce attributes Album and Artist. Once you have created these attribute, your product settings pages will have the option to add Album and Artist for the product.
For more details on Attributes, you can read the official woocommerce documentation on the topic here.
In case you are unsure about this concept of Attributes, don’t worry. As you follow along this guide, the concept of attributes will become very clear.
How to add WooCommerce attributes?
Go to Admin menu > Products > Attributes.
This is your woocommerce attributes page where you will create global attributes for your products.
Whenever you need to add a new attribute (property) for your products you will come back to this screen and create the attribute here.
All the attributes you have created in the past are also listed on this page. You can come back to this screen any time to edit or delete your attributes or create new attributes for your products.
Right now your attributes table may be empty if you have never created any woocommerce attributes on your website before. But the above screenshot shows you the attribute page with several attributes already added in it.
As you can see, on the attributes page there is a form with the title ‘Add new attribute’. We will now use this form to create a new ‘Album’ attribute. Enter the following details in the form (see reference screenshot below):
Slug: *leave this empty and it will be auto-generated*
Enable archives: Checkmark this option
Once you click the ‘Add attribute’ button at the bottom of the form the page will refresh and this Album attribute will be added to your table of attributes.
In the same way that you have created the Album attribute with its options, now create these other attributes and options:
- Special badge
By the end your product attributes page should look like the following screenshot:
Create an audio product
Now that we have the option to add Album, Artist, Genre and Special badges to our products, let’s go about creating our first audio product.
Go to Admin menu > Products > Add new. This will open the settings page for our new product.
Now give your audio track any name like ‘Back in black’.
Then scroll down to the ‘Product data’ section of the page.
In the Product data section > General tab set a ‘Regular price’ eg: $10
Now open Product data > Attributes tab. Here we will add properties (Album, Artist, Genre, Special badge) to our product.
At the top of the Attributes tab you will find the attribute dropdown with an Add button next to it. This dropdown will help us add attributes to our product.
Click on the dropdown and you will see the Attributes that we have created listed as its options. This dropdown is going to help you select which attributes to add to your product.
Select the Album option and click on the Add button next to the dropdown. A loading sign will appear and then the Album attribute will be added to the Product data > Attributes tab. Now click on Add new button (see screenshot below) to assign an album to this product.
This will open a modal where you need to enter the name of the Album, for example. For example, ‘Back in black’ (in this example the song and album name are the same). Then press OK to add this Album name to your product.
Now you should see the Album name added to the Attributes tab like the below screenshot:
Now in the same way, using the dropdown add the other attributes to your product as well:
Artist: AC / DC
Genre: Hard rock
Special badge: New
By the end, your Product data > Attributes tab should look like this:
Adding a preview audio track
First prepare a preview audio file for the product. For the purpose of this guide, just use any small audio file. Then go to Admin menu > Media > Add new and upload the audio track there.
Once the audio is uploaded, click on the Edit button like in the screenshot below:
This opens the settings page for our media file (the audio track). You need to copy the File URL highlighted in below screenshot:
Now go back to your audio product’s settings page and scroll down to the ‘Product short description’ section. Ensure the Visual tab is open. Then paste the audio track URL in the textarea. The URL is going to be automatically converted into an audio player.
Adding a purchasable audio track
Adding the category
Publish the product
@TODO – re-do the screenshot with
Now click the Publish button so that this product is published on your site and then view the product on the front end. You will be able to see all the attributes for this product on its page. Reference screenshot (using the Twentysixteen theme):
Create a second product
Now let’s create another product. Repeat the same process as above. Only this time the properties will be:
Regular price: $15
Artist: Michael Jackson
Special badge: Trending
Here is a screenshot of the Product data > Attributes tab for our second product:
Note on adding attribute values
If you are trying to add an attribute value that you have previously added for another product, then you cannot use the Add new button to add this attribute value to your current product. The Add new button will throw an error if you try adding an attribute value that was previously create. This button is only for creating new values.
Instead if you have already created the attribute value before then you need to click on the values input box, and a dropdown will appear showing all the previously added attribute values, and you have to select the value you want to add to the current product.
For example, in the below screenshot from the second product’s settings page, you can see the Album attribute. When the values input is clicked, it shows the options Back in black and Thriller since these 2 options have been added to our products previously.
So once you have used the Add new button to create a new attribute value, in the future, if you need to give another product the same attribute value, then don’t click on the Add new button, instead click on the values input box and just select the previously created attribute value you want to add to your new product.