Wrap/Span the variables with a css class

Resolved hd42
(@hd42)

5 years, 10 months ago

Hey guys,

I installed a swatches plugin but the images shown are rly small.
There is an option for bigger images.
But I guess my theme (portotheme) is somehow overriding it.

So my question:

Can I add a css class to the variations? Or even better to only one specific variation type?

Kind regards
Hüseyin

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Contributor Niels Lange
(@nielslange)

5 years, 10 months ago

Hello Hüseyin,

Please note that this forum only addresses questions related to the WooCommerce plugin itself. If you’re using the paid Variation Swatches and Photos extension, the please our premium support via https://www.woocommerce.com/my-account/create-a-ticket/.

If you’re using a plugin from a different developer, than please contact the corresponding developer on this case.

Thread Starter hd42
(@hd42)

5 years, 10 months ago

Thank you for the reply Niels.

No, my question is in general. I brought up swatches to show/state what I am trying to achieve.

I need to add css to a variation, wether it has swatches elements or not is irrelevant.
Thread Starter hd42
(@hd42)

5 years, 10 months ago
Following code is doing what I want:
```
.woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item {
	width: 200px !important;
    height: 200px !important;
}
```
I have a swatches class there I know. But for example in storefront that has to look similar.

My only problem now is that this applies to all 3 variation types I have.

I only want it on the third variation type.

So how do I adress this in css?

I see

data-attribute_name="attribute_pa_tarif"

So my variation ID would be “attribute_pa_tarif” I guess.

I tried following
```
#attritubte_pa_tarif .woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item {
	width: 200px !important;
    height: 200px !important;
}
```
but sadly it didnt work.

Any ideas?
Plugin Contributor Niels Lange
(@nielslange)

5 years, 10 months ago
Hello @hd42,

I only want it on the third variation type. I see data-attribute_name="attribute_pa_tarif"

In this case, your CSS code should look as follows:
```
[data-attribute_name="attribute_pa_tarif"] {
  width: 200px !important;
  height: 200px !important;
}
```
Thread Starter hd42
(@hd42)

5 years, 10 months ago
I think we are getting closer to my aim XD

That worked for the value part (i think we can call it the table of variant options?) of tha variation.

I use following code in style.css (child theme)
```
.variable-item:not(.radio-variable-item) {
	width: 150px !important;
	height: 150px !important;
}
```
But that applies to all variations. So I think I need to combine my code with yours somehow?

I tried some variations but it didnt work out. Do you have any ideas for that?

Or in another words: How can I use my code by adressing that “data_attribute…” part
- This reply was modified 5 years, 10 months ago by hd42.
Thread Starter hd42
(@hd42)

5 years, 10 months ago
Ok, did it.
```
[data-attribute_name="attribute_pa_tarif"] .variable-item:not(.radio-variable-item) {
  width: 200px !important;
  height: 200px !important;
}
```
I took your idea and added the class items/elements.

Thank you for your help so far.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Wrap/Span the variables with a css class’ is closed to new replies.

Tags