Return to previous page

Https://www.8theme.com/topic/costum-css-x-store-product-attribute-product-page/#post-396101

This topic has 5 replies, 3 voices, and was last updated 2 months ago ago by Andrew Mitchell

Nio

Participant

May 22, 2024 at 17:14
I have a question about the ticket linked in the subject line.

I wanted to add another rule to your code:
```
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label {
    background-color: #EE1250;
    color: #FFFFFF; 
}
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label span {
    font-size:15px; 
}

New Rule 
  change Background color for the li element with the specific data-value and data-name attributes..... 
data-value="1-paar-nur-5941-e-15-rabatt
data-name="1 PAAR NUR 59,41 € - 15% RABATT" 

I tried this one..but it does not work : 
```
`/* new */
.single-product ul.st-swatch-preview-single-product[data-attribute=”pa_professional-ultra-deal”] li.type-label[data-value=”1-paar-nur-5941-e-15-rabatt”][data-name=”1 PAAR NUR 59,41 € – 15% RABATT”] {
background-color: #00FF00; /* Hintergrundfarbe auf Grün ändern */
}

what is my mistake?

Its on this page

https://www.optimumcore.eu/professional-ultra-kniegelenkbandage-mit-gelkissen/

i have two values in the variant and both should have a different background color… so they should not have the same color atode

LG Oliver
#396291 Copied Theme version: 9.3.10
4 Answers

Nio

Participant

May 22, 2024 at 23:39

hi,
this is a bit crazy, but i have tested it three times… and it happens when i use the code… the code is actually for the variant. But when I use it, it also changes my footer navigation… when i use it it happens with the footer navigation see picture …..

` .single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] {
width: 100%;
}
.single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] li.type-label {
width: 100%;
}
}

Files is visible for topic creator and
support staff only.

#396308 Copied
Luca Rossi

Support staff

May 23, 2024 at 10:38
Hi @Nio,

This custom CSS codes is having 2 brackers at the end, so it might cause the issue:
```
.single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] {
width: 100%;
}
.single-product ul.st-swatch-preview-single-product[data-attribute=”pa_menge”] li.type-label {
width: 100%;
}
}
```
For another background color on this product: https://www.optimumcore.eu/professional-ultra-kniegelenkbandage-mit-gelkissen/, please try with this:
```
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label [data-value="1-paar-nur-5941-e-15-rabatt"] {
    background-color: #EE1250;
}
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_professional-ultra-deal"] li.type-label [data-value="single-bandage-3495-e-1x"] {
    background-color: #00FF00;
}
```
Hope it helps!
#396363 Copied
Nio

Participant

May 23, 2024 at 16:43

thank you very much, sorry that this has become so annoying… :((

but I’ll write a good review tomorrow when I’m in the office…

#396425 Copied

Andrew Mitchell

Support staff

May 23, 2024 at 17:22

Dear Nio,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#396429 Copied
Tagged: ecommerce page design, product page optimization, woocommerce customization, woocommerce themes, wordpress custom css, wordpress ecommerce themes, x store product attribute
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘https://www.8theme.com/topic/costum-css-x-store-product-attribute-product-page/#post-396101’' has been successfully resolved, and the topic is now closed for further responses

Https://www.8theme.com/topic/costum-css-x-store-product-attribute-product-page/#post-396101

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection