WP audio player obscured in Woocommerce Product Tables

I am creating a table to sell music using woocommerce product tables plugin. I am including an audio player It looks fine using a default WP theme, but with X child theme active, no go.

The page is https://dev.georgeaspinallband.com/buy-the-music-2

Seriously - help?

Hi @chill986,

Thanks for reaching out.

I checked and the cause of the issue is the absolute positioning originating from Wordpress CSS. And X theme only uses the media player provided by Wordpress. And as soon the audio player is moved out outside the table, it works. May I know your admin login credentials for further checking? I like to confirm if this is happening on other themes too. Please provide it in the secure note.

Thanks!

Hey @chill986,

The problem is coming from wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css which looks like is called by the Product Tables plugin. As you can see in the screenshot below, if I empty the stylesheet. The issue’s gone. It also looks like the Product Tables is basing it’s media element styles based on that legacy stylesheet.

The said stylesheet is not loaded by X because it’s not needed by our Audio shortcode so it’ll just add bloat if it’s loaded. As you can see in this test page I created in your site, the Audio shortcode works and the mediaelementplayer-legacy.min.css is not loaded.

Please contact the Product Tables shortcode support to provide compatibility without the said legacy stylesheet.

Thanks.

Will do, thanks for responding so quickly!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.