Title: Attribute CSS
Last modified: November 30, 2018
---
# Attribute CSS
* Resolved [John](https://wordpress.org/support/users/elliott101/)
* (@elliott101)
* [7 years, 6 months ago](https://wordpress.org/support/topic/attribute-css/)
* I just found your plugin. I think this is possible with some development (with
a donation of course).
I have a Woocommerce site that uses multiple attributes
to create product variations. For example, I offer different color plastics with
different color sublayers. I would like a white font for a black selected material
and a black font for a white selected material, maybe with different fonts. I
would like a plugin that adds CSS statements to an attribute – choosing a product’s
attribute would trigger a CSS/HTML statement.
Viewing 7 replies - 1 through 7 (of 7 total)
* Plugin Author [mjke87](https://wordpress.org/support/users/mjke87/)
* (@mjke87)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10942295)
* Hi John,
* If I understand you correctly, this should already be possible, without any further
development.
* Simply add a `
* Attribute “Color”, term “White” add the following
``
* 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://wordpress.org/plugins/variation-swatches-for-woocommerce/](https://wordpress.org/plugins/variation-swatches-for-woocommerce/)
* Best wishes,
Mike
* Thread Starter [John](https://wordpress.org/support/users/elliott101/)
* (@elliott101)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10943513)
* Mike,
* Thank you for our response.
* I am using:
– N-Media Personalized Product Option Manager for the text entry(
I use: .wcp { fill: #f0f0f0; } in an Input CSS field to set initial SVG fill)–
Wysiwyg Custom Products Premium to display entered text (uses SVG) – Improved
Variable Product Attributes to select the color attribute.
* I can not get the right combination of commands for your Product Attribute Tab
to change the SVG fill.
* An example page:
[https://www.customtagengraving.com/product/plastic-round-ear/](https://www.customtagengraving.com/product/plastic-round-ear/)
* Any help will be appreciated.
* John Sherman
Cascade Laser Corp.
* Plugin Author [mjke87](https://wordpress.org/support/users/mjke87/)
* (@mjke87)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10944416)
* 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
* Thread Starter [John](https://wordpress.org/support/users/elliott101/)
* (@elliott101)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10946579)
* Mike,
* Thank you for your interesting solution. I have several dozen images that would
have to be added.
* Are you willing to make a new plugin that uses the Product Attribute Tab to dynamically
change the fill and at what cost?
* I would like to have options.
* John
* Plugin Author [mjke87](https://wordpress.org/support/users/mjke87/)
* (@mjke87)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10952869)
* 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
* Thread Starter [John](https://wordpress.org/support/users/elliott101/)
* (@elliott101)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10954595)
* Mike,
* Thank you for your help. I have adapted your previous suggestion into a temporary
workaround.
* I would like another developer to work on adapting your Product Attribute Tab
plugin to allow dynamic changes, is this permissible? Can you provide me with
additional information for a developer?
* Again, thank you for your help.
* John Sherman
Cascade Laser
* Plugin Author [mjke87](https://wordpress.org/support/users/mjke87/)
* (@mjke87)
* [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10988009)
* 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
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘Attribute CSS’ is closed to new replies.
* 
* [Reusable Product Description for WooCommerce](https://wordpress.org/plugins/woo-product-attribute-tab/)
* [Frequently Asked Questions](https://wordpress.org/plugins/woo-product-attribute-tab/#faq)
* [Support Threads](https://wordpress.org/support/plugin/woo-product-attribute-tab/)
* [Active Topics](https://wordpress.org/support/plugin/woo-product-attribute-tab/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/woo-product-attribute-tab/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/woo-product-attribute-tab/reviews/)
* 7 replies
* 2 participants
* Last reply from: [mjke87](https://wordpress.org/support/users/mjke87/)
* Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/attribute-css/#post-10988009)
* Status: resolved