Product Variation Drop Down Padding Issues.

  • Hi there.

    I’m trying to use Elementor with GeneratePress and am running into a bit of an issue with individual product pages. For some reason, despite how the products look in the backend, the variation drop-down is cut off on certain devices on the customer-facing site.

    I enquired with ELementor assuming that this was their problem and they got back to me and mentioned that it’s an issue with GeneratePress and some padding or such that is applied to the variation dropdown. They said that switching to the default WordPress theme and adding the following custom CSS fixed it:

    #elementor .elementor-element-230b3fd form.cart table.variations td.value select, #elementor .elementor-element-230b3fd form.cart table.variations td.value:before {
    padding: 0;
    }.

    I don’t want that to be the solution because switching to the default WordPress theme breaks a lot of the site’s layout.

    Not wanting to turn to the support forums without first trying to fix it myself I tried that. I had no luck and so here I am. I’m really hoping you guys are able to assist.

    * I’ve included the URL to one of the individual product pages. It’s worth noting that this issue is across all 10 product pages.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    You definitely won’t need to switch themes.

    Does the CSS they give you do anything when GeneratePress is activated?

    Here’s what I’m seeing: https://www.screencast.com/t/jsl82F0Rnem

    Are you seeing something different? If so, can you show me a screenshot?

    Thanks! ??

    Thread Starter weylandswart

    (@weylandswart)

    Hey Tom

    Thanks for getting back to me.

    The CSS that they gave me doesn’t seem to do anything, no. I should also probably clarify that the formatting only seems to be an issue for Chrome on Windows and iOS, as attached.

    View post on imgur.com

    View post on imgur.com

    I’m not sure if you’re able to private message me somehow but I’d be happy to share the login details for you to take a look if that might be easier.

    Thank you!

    Theme Author Tom

    (@edge22)

    Out of curiosity, does this do anything?:

    .woocommerce div.product.elementor form.cart table.variations td.value:before, 
.woocommerce div.product.elementor form.cart table.variations td.value select {
    height: auto;
}

    Hi Tom!!

    I was having the same issue and your code fixed it!!

    Just my 2 cents in case you wanna look further into it.

    Im a premium user of your theme and very happy with it so far. This is the first issue ive had.

    Thanks

    Theme Author Tom

    (@edge22)

    Thanks for letting me know! Appreciate it ??

    Hi Tom!
    where did i have to put the code? I’m not a very expert user… ??

    Thanks a lot!

    Theme Author Tom

    (@edge22)

    Hi there,

    You can add it using one of these methods: https://docs.generatepress.com/article/adding-css/

    Thank you for the tip!
    Now the drop down menu is visible but all the pagination in broken (the descriptions of the variation is covered by the menu). Here what it look like:

    https://www.dropbox.com/s/bjmqmu4aqcvm9d9/Cattura.PNG?dl=0

    There is another way to fix it?

    Theme Author Tom

    (@edge22)

    I would have to see the site to know what’s going on there. Any chance you can open a new topic and include the URL so I can check it out?

    Thanks!

    Of course! And thanks again!

    markmurphy1974

    (@markmurphy1974)

    Had a little trouble with this myself.

    Adding a height of say 3em fixes it but changing the padding-top can fix without changing the height.

    .woocommerce div.product.elementor form.cart table.variations td.value::before, .woocommerce div.product.elementor form.cart table.variations td.value select {
	padding-top: .1em;
	/* height: 3em; */
}

    Using auto didn’t work too well.

    kaytellehoel

    (@kaytellehoelgmailcom)

    There is a similar issue with a competing theme, so I wouldn’t be surprised if it was caused by Elementor.

    Thanks for the code @markmurphy1974 – this solved it for me.

    Thank you very much. Solved same problem for me. Running into a lot of problems with Elementor, sorry to say.

    Hi!
    I have the same problem on my website but none of the solutions proposed above works for me.

    I tried to integrate them in the style.css file of my child theme, as well as in the CSS custom on the product page … but nothing changes

    Can someone help me please? I am stuck in advancing my website and I’m despairing

    I can provide a screenshot if someone told how to do.

    Thanks a lot

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Product Variation Drop Down Padding Issues.’ is closed to new replies.