Hello @denniszubov
You only should configure the WooCommerce product as downloadable, by ticking the “Downloadable” checkbox in its settings, and enter the at least an audio file into the list of downloadable files.
If after activating and configuring the music players they don’t appear in the products or shop pages, be sure the theme active on your website is using the standard WooCommerce hooks. If it is not the case, you should enter the names of the hooks used by your theme through the attributes:
“WooCommerce hook used to display the players in the shop pages”
and
“WooCommerce hook used to display the players in the products pages”
in the settings page of the plugin, accessible through the menu option: “Settings > Music Player for WooCommerce”
Best regards.
Thank you! I am very impressed by how quickly you responded.
The audio player is now showing but I have a new problem now. For the single product page it is working perfectly as intended, however for the shop page with all the products the audio player does not display nicely. It overlaps with the other information of the product and the progress bar, to show how far into the audio it is, does not display at all. Do you know how to fix this?
I would show a screenshot of the issue on the shop page and my configurations for the audio player but I do not see a place to submit photos.
Hope you hear back from you again. Thanks
Hello @denniszubov
Please, send me the link to the shop page to check the issue you are reporting. It might be caused by a conflict with the styles defined in the theme active on your website.
Best regards.
Here is the link: https://www.krabstikmusic.com/shop/
The website was not live yet but I’ll make it live for now so you can take a look. You can see the problem for the ‘KRAB$TIK Type Beat’ product when the shop items are in list view. I don’t like the placement of the audio player in the grid mode either. Can that be changed?
Hello @denniszubov
As I told you in the previous entry, the issue is caused by a conflict with the styles defined in the theme active on your website. Please, enter the style definition below through the menu option: “Appearance > Customization > Additional CSS”
.wcmp-player-container,
.wcmp-player-container .mejs-control{min-width:250px !important; overflow:hidden !important;}
Best regards.