I'm using a theme called Emporium (live preview: [url removed, login to view]) and a plugin called Fullwidth Audio Player (live preview: [url removed, login to view])
Bascially, I'm using WooCommerce to sell audio products. 1 audio product per product. I can already upload audio using the Fullwidth Audio Player plugin.
Right now (if you look at the live preview of the theme) if you mouse over a shop item's image, there's an overlay with a yellow line (which changes depending on the colour setting in the backend) at the top. I want this image ([url removed, login to view]) to be placed on top of the original overlay (in the middle). This way, when you mouse over it, it shows that you can click to play.
Now, since every individual store item has an audio file, I would've uploaded each file to the plugin myself. I want you to make the store work like this: when you mouse over and click the image of a product, it triggers the respective audio file (from the plugin) to play. There should also be a way for me (in the backend) to link each audio item to its respective product, so that each product plays the right audio file. This is kind of similar to the homepage of this site ([url removed, login to view]), as you move over the image and there is a play button, and when you click it it opens the music, only in my case, i want it to trigger the plugin toolbar.
Those features should also work for products that show up on the sidebar (example of sidebar products: [url removed, login to view])
On the audio toolbar, the name of the audio should link to its page (the page automatically created by the plugin).