Demo 2: Album view

Filters Sort results
Reset Apply
Download 'WCPT Audio Demo 2' and import it to your site. Beta

Import steps

Note: This facility is new and experimental, look forward to improvements. Your feedback is most welcome here! You need WCPT PRO v1.8.0+ to run imports.
  1. Download the demo products (category: My Album) and import them.
  2. Download the demo table and import it to your site (reference image).
In case of any issue in using this facility please contact support for assistance.

Demo notes:

  • You can display all songs from an album in a single table in different ways:
    1. In this demo the songs are separate products grouped under a single category. That category is being used in the table settings > Query to display the songs together in one table. You can also use shortcode attribute category=”my-album”
    2. Or you can use product IDs to display the album’s songs in a table. Equivalent shortcode attribute: ids=”123, 124, 125″
    3. Or create an ‘Album’ attribute and use that attribute to display the album songs in a single table. Also, taxonomy or custom fields can be used to show products together in a table.
  • The products in this table are ordered in a specific sequence according to their order in the album. To do this Query > Initial orderby is set to Custom field as number and the custom field selected is Track number. This lets us give the songs a specific order in the table. You need to set the ‘Track number’ custom field for each product for this to work.
  • The audio player is being generated using the Shortcode element and the audio player shortcode inside it. It requires the song preview source to be stored in the custom field ‘Audio preview’ for each of the products. If you change the custom field name, also remember to change it in the Shortcode element.
  • Time (song length) is also stored in a custom field.
  • The width of the table is limited to 800px which suits this demo. However, you can be easily change the max width via the table editor > Style > Laptop > Container > Max-width.
  • The Phone layout of the columns switches to a 3 column view and arranges elements within them for a smoother phone viewing experience.