[Resolved] Audio player styling

[Kim]

Hey guys,

I know this isn’t strictly GP specific but I’d really appreciate any advice or links to articles that may help.

I’m working on a WooCommerce build which will be selling audio tracks as products. The client would like to have audio previews, which I will be adding as audio player elements in the product short description.

We would like the option to highlight a specific preview if necessary (some tracks are special releases) by changing the audio player colour. Obviously, using the wysiwyg editor in the short description means there is limited options for styling the audio player.

Is there any kind of custom field I could add or function that could be created to facilitate this?

Many thanks for your help!

[David]

Hi there,

it may be possible to identify them if they have a taxonomy – category or tag.
If you want to add a Tag of say featured and provide a link to the site I can take a look ?

[Kim]

Hey David,

Do you mean adding those taxonomies to the actual product listing?

Here’s a link to an example to better illustrate how we’re set up: https://dubtunes.uk/track/dub-tune-one/

[Tom]

Yes, for example if you want to style all of the players that have a specific tag/category, you would do this:

.product_cat-my-category .mejs-container .mejs-controls {
    background: blue !important;
}

[Kim]

Hey guys,

I’ve utilised the tags and a nth selector to add the feature colour to the last player in the description.

Thanks for the help 🙂

[Tom]

No problem! 🙂

[Author]

Posts