Attribute styling and Attribute in product names

This topic has 10 replies, 3 voices, and was last updated 6 years by Radu.

Author
November 19, 2017 at 16:47 #180304

dekoningalex
Participant

Hi,

I want to style 5 attributes types included in the main attribute “condition” from green to red (see screenshot). The mint condition should be green as in the screenshot, but i fail to select the specific css path for other conditions. In other words, all the attributes within the condition attribute are now green (see screenshot). Is there a way for me to select the specific attributes and give them their own background colors?

Moreover, I would like to include the condition attribute in each product name automatically. For example:

Infernape lv.X – DP10 (NearMint/Mint, Played)

Thanks!

November 19, 2017 at 16:49 #180305

Kieran_SQ
Moderator

Hi,

Please update this ticket with your screenshots, current CSS, where can i see what you’re referring to in action and login credentials for your site.

Thanks

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

November 19, 2017 at 16:51 #180306

dekoningalex
Participant

Oops forgot the screenshots

Attachments:
You must be logged in to view attached files.

November 19, 2017 at 16:53 #180311

dekoningalex
Participant

Current css used:

#additional_information_tab > div > table > tbody > tr:nth-child(3) > td > p > a {
background-color: #8aff8a;
padding: 7px;
padding-right: 10px;
}

I tried > Mint at the end but being no coder, that must be pretty stupid 🙂

November 19, 2017 at 16:53 #180312

dekoningalex
Participant

You already have the credentials but i can look them up if necessary

November 19, 2017 at 17:04 #180316

Kieran_SQ
Moderator

Hi,

We ask for details each time because it takes time to find old credentials in other tickets and those details may no longer be active or correct. I have found credentials from your first ticket that work and have logged in with that account.

Attributes within WooCommerce do not naturally output their own classes with each item, though they should, this makes it difficult to style – especially so using nth-child as your order may change over time.

The best option I can think of immediately would be to use the plugin Variation Swatches for WooCommerce which is freely available in the WordPress plugin repository https://wordpress.org/plugins/variation-swatches-for-woocommerce/. As you’ll see it will allow you to assign colors (or text, labels, images) for each attribute for use on the front end.

Let me know if this works for you.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

November 19, 2017 at 17:12 #180320

Kieran_SQ
Moderator

I forgot to mention, you will need to remove your current CSS to test with this plugin as it will likely cause a visual conflict.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

November 19, 2017 at 17:13 #180321

dekoningalex
Participant

thanks for your response.

That plugin isnt an option because it only works with variable products. Most of my products have only one variation of condition in stock, so are not variable but single products. Even when there is only a mint card available, i want it to be green.

What about my second issue?

Thanks!

November 19, 2017 at 17:29 #180322

Kieran_SQ
Moderator

Hi,

For you second question I will refer the ticket to a developer who may be able to assist you. They’ll get back to you as soon as they can, Mon to Fri, East Europe Time.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

November 19, 2017 at 21:03 #180328

dekoningalex
Participant

Any other suggestions on how to style the attributes on the product page? The plugin only customises the available options for variations for a product which isn’t what i’m looking for.
November 20, 2017 at 17:50 #180389

Radu
Moderator
Hi,

The markup it’s generated without specific classes or ID’s there to can target only the
COPY CODE
```
table.shop_attributes tr td p a[rel=tag] {
    background: red;
}
```
there should be on any TR a class named by section like tr class=”condition” or tr class=”validation” etc

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts