[Resolved] Woocommerce product variable box cut off

[Stew]

Hello,

I’m working on making a product page, and when I add a size variable I’ve got a couple problems with it. First the drop down box for the size isn’t fully visible, it’s like the text is sitting in the box too low. I’ve attempted to add padding, but that doesn’t make a difference.

The other issue is that between the quantity box and the add to cart button there is a | – OR – which I also can’t seem to figure out how to get rid of.

Product page being built with elementor, elementor claims it is a theme issue.

[Leo]

Hi there,

For the dropdown box issue, it doesn’t look like a theme issue to me.

Can you do me a favor and activate a twenty-series WordPress theme and see if it’s fixed?

I’m not seeing the second issue. Have you fixed it?
https://www.screencast.com/t/FKLb5EyCj

Let me know 🙂

[Stew]

So when I activated WP 2017 theme it was fine. Also, my add to cart button doesn’t look like what you saw. I wanted to wait until I had low traffic to do a theme change.

View post on imgur.com

This is what it looks like for me

[Leo]

Is GP’s WooCommerce add-on activated right now?
https://docs.generatepress.com/article/installing-gp-premium/#activate-your-modules

If so can you deactivated it to test?

I’m still not seeing the OR thing. That doesn’t show up either in twenty-seventeen?

[Stew]

Deactivating the woocommerce module there is no change.

When I did the switch to WP 2017 the OR thing did go away. I checked the page as a non-logged in user and it doesn’t show up. Also as a regular logged in user it isn’t there. It appears it only shows up as an admin.

[Leo]

This CSS should fix the dropdown box and as you can see it’s coming from Elementor:

.woocommerce div.product.elementor form.cart table.variations td.value select {
    height: 3em !important;
}

Perhaps there is a way to change the height within the plugin.

If GP’s WooCommerce module is disabled then there should be nothing that’s coming from GP.

I would bug their support for better answers. If they still think it’s the theme, please ask them to clarify because I’m not seeing code from the theme currently.

[Stew]

I added the CSS, but there was no change.

I’ll get back with Elementor. My only complaint with them is they never take responsibility for anything with their plugin. It’s always the theme, or some other plugin when I have issues and try and take it up with their support.

[Leo]

The CSS should work but was getting overwritten.

Try this again:
https://generatepress.com/forums/topic/woocommerce-product-variable-box-cut-off/#post-675722

[Stew]

That made it work. Thanks!

[Leo]

No problem 🙂

[Tim]

We are having the same issue. Can you let me know exactly where you put that CSS? We’ve put it in the style.css of our child theme but it hasn’t done what we wanted.

[Author]

Posts