Log in Get SwiftGrid →
Resolved

Woocommerce variation names not centered

Polestar Theme started by danny weiss Dec 8, 2018 12 replies
danny weiss Dec 8, 2018 · 6:23 pm #11111

Hi again,

I’ve discovered a new issue, it’s about the way that products’ variation names are displayed on a Woocommerce website. They are not centered, as they should be, and this provides an unprofessional look on the product page. Below I’ve added some screenshots so you can get an idea of what I mean:
product1
product2

🙂

danny weiss Dec 9, 2018 · 2:04 pm #11115

This reply has been marked as private.

Andrew Misplon Puro Dec 9, 2018 · 8:44 pm #11119

Thanks. There are other plugins adding their own styling here which complicates matters. Try the following inserted at Customize > Additional CSS or the Custom CSS location of your choosing:

.wvas_variations td.label {
	vertical-align: middle !important;
}

.wvas_variations td.label {
	font-size: 16px;
}

.single .woocommerce-variation-add-to-cart {
	margin-top: 35px;
}

.woocommerce.single .product .summary .price {
	margin-bottom: 0 !important;
}
danny weiss Dec 10, 2018 · 7:10 pm #11120

This reply has been marked as private.

Andrew Misplon Puro Dec 11, 2018 · 10:40 am #11121

Thanks for the feedback. Please try adding:

.single-product td.value {
	padding: 20px !important;
}

After our other rules. Any better?

I’ll look at accommodating the plugins you’re using here in the next update. Thanks again.

danny weiss Dec 11, 2018 · 6:37 pm #11122

Unfortunately no, it didn’t change anything…
Also here’s how it looks on mobile: https://ibb.co/Kcng5P1

Andrew Misplon Puro Dec 11, 2018 · 8:29 pm #11123

Hi Danny. The last rule I sent is being applied as I intended it to. It isn’t the same as before, the variation images, that cell now has padding. Let me know how you’re wanting Baby Bath Magic Flower variations to display and I’ll do what I can to assist.

On mobile, are you asking about the grey field that’s protruding on the right of your screenshot? If so, I can’t recreate that on my phone or using any of the devices available in Chrome’s Developer tool.

Andrew Misplon Puro Dec 11, 2018 · 8:36 pm #11124

To move the Color label slightly further up, you can try removing the previous rule I sent and replacing it with:

.single-product td.value {
    padding: 20px 20px 0 20px !important;
}
danny weiss Dec 12, 2018 · 3:36 pm #11125

Yes, I’m trying to get the variation label to go higher, but if I use that last piece of code, all other labels, which were previously fixed, move up.
I attached the mobile screenshot because, compared to the pc version, you can see much clearer how bad the variation title is positioned.

Andrew Misplon Puro Dec 12, 2018 · 7:12 pm #11127

Thanks. Please, try removing only the previous rule which is:

.single-product td.value {
    padding: 20px 20px 0 20px !important;
}

And then add:

.woocommerce .product .summary .variations .reset_variations[style*="visibility: hidden"] {
	display: none !important;
}
danny weiss Dec 13, 2018 · 7:17 pm #11137

Yeeesss! It worked, mistery solved. I can’t thank you enough!
I owe you a beer (at the very least) whenever you happen to be in my country, Romania. 🙂 🙂

Andrew Misplon Puro Dec 13, 2018 · 7:22 pm #11138

Super, glad to hear that helped 🙂 Sorry we couldn’t get there earlier.

Chat soon 🙂

Cheers!

13 posts