Return to previous page

Costum CSS X store Product Attribute Product Page

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

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

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: advanced store customization, custom css x store, efficient product display, personalized woocommerce layout, product attribute page, woocommerce themes, wordpress ecommerce
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

Costum CSS X store Product Attribute Product Page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection