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 9 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