Attribute CSS

Hi John,

If I understand you correctly, this should already be possible, without any further development.

Simply add a <style> block in the product attribute tab description, and your specific styles in there.

For example:
Attribute “Color”, term “Black” add the following
<style type="text/css">#some-css-id { color: white }</style>

Attribute “Color”, term “White” add the following
<style type="text/css">#some-css-id { color: black }</style>

However, if you mean to lead certain styles upon selecting a product variation, then there is indeed some programming required. However, it seems to me that what you are looking for already exists, for example have a look at this plugin: https://ww.wp.xz.cn/plugins/variation-swatches-for-woocommerce/

Best wishes,
Mike

Hi John,

I understand now. In order to achieve this, the plugin “Product Attribute Tab” won’t be of much help, as it merely displays descriptions based on attributes, statically. But what you need is a dynamic behavior, most likely JavaScript based.

The only thing that might be possible, is if you can pre-define all CSS styles based on the active SVG, for example like this:

[title="plde-black_w"] ~ .wcp {
    fill: #fff;
}
[title="plde-wh_w"] ~ .wcp {
    fill: #00;
}

It would be nicer if you could set some sort of identifier (class or id) based on the selected swatch.

Good luck and kind regards,
Mike

Hi John,

I’m sorry but I currently don’t have the time and capacity for the development of such a plugin. I hope you will find a good solution either way.

Good luck and kind regards,
Mike

Hi John,

Yes, that would be fine. I think this should be achievable without the need to modify the plugin, simply using filter and actions hooks.

You can always open a new support ticket if you, or the developer, need further help. I could also add additional filters if needed.

Kind regards,
Mike