Return to previous page

Costum CSS X store Product Attribute Product Page

This topic has 6 replies, 2 voices, and was last updated 10 months, 1 weeks ago ago by Luca Rossi

  • Avatar: Nio
    Nio
    Participant
    May 19, 2024 at 19:41

    Hallo zusammen,

    I tried to implement it today using a css code, but I don’t know how to address the element.

    I just want to give the product attribute “menge” a costum CSS

    On mobile I would like to set the two values of the attribute to 100 percent, the same length as the shopping cart button…

    i would also like to give the element a different font size and color

    Can you tell me how to address it correctly so that only this ” menge” is influenced… and set in on mobiule on 100 %

    Thank you very much

    what I tried…

    /* Span Tag für das Produktattribut “Menge” */
    .et_product-block .variations_form .variations tbody tr.attribute_pa_menge .value .st-swatch-preview .subtype-square span {
    transform: translateX(0px) translateY(0px);
    background-color: #2a3952 !important;
    color: #ffffff !important;
    border: 2px solid red !important; /* Roter Rand */
    }

    /* Custom attribute with the name ‘menge’ */
    .page-wrapper tr:nth-child(3) .subtype-square:nth-child(1) .st-custom-attribute[data-attribute-name=”menge”] {
    background-color: red;!important;
    }

    Please, contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    #395886 Copied Theme version: 9.3.10
    5 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    May 20, 2024 at 11:24

    Hi @Nio,

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
@media (max-width: 480px){
    .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%;
    }
}

    Hope it helps!

    Please contact administrator
    for this information.
    #395942 Copied
    Avatar: Nio
    Nio
    Participant
    May 21, 2024 at 07:11

    thank you yes , i will try this out .. :))

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

    a quick question…. i can use this code if i want to add css, like background color, or font size? So I can add these in the code for the element or?

    #396051 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    May 21, 2024 at 07:40

    Hi @Nio,

    The change the background color, font size. Please use this custom CSS instead:

    
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_menge"] li.type-label {
    background-color: #f0f0f0;
    color: #f00f00;
}
.single-product ul.st-swatch-preview-single-product[data-attribute="pa_menge"] li.type-label span {
    font-size: 22px;
}

    Best Regards,
    The 8Theme Team.

    #396057 Copied
    Avatar: Nio
    Nio
    Participant
    May 21, 2024 at 12:28

    hello, thank you very much for this, I will experiment a bit… have a nice day :))

    lg Oliver

    #396101 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    May 21, 2024 at 13:58

    Hi @Nio,

    In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

    Click here to share your thoughts: https://themeforest.net/downloads

    Being part of our community means a lot, and your feedback contributes immensely.

    Best Regards,
    The 8Theme Team

    #396113 Copied

  • Tagged: , , , , , ,

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Costum CSS X store Product Attribute Product Page’' has been successfully resolved, and the topic is now closed for further responses

Support Forum Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
NFT Crypto Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Books Store – WordPress WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Purely Handmade – WordPress WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce 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.