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 6 months, 4 weeks ago ago by Andrew Mitchell

  • Avatar: Nio
    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
    Avatar: Nio
    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
    Avatar: Justin
    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
    Avatar: Nio
    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
    Avatar: Andrew Mitchell
    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: , , , , , ,

  • 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

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Restaurant – WordPress Theme
lazy-placeholder
Cosmetics Store – WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Medical – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
Legenda – E-Commerce and Corporate PSD Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Rental Car – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.