[Resolved] GP & Elementor Woocommerce: Displaying Product Variations in Template

[Josh]

Hi,

I’m building a Woocommerce site with GP Premium and Elementor Pro.

I’m trying to get my product variations dropdowns into my Elementor Single Product template. Elementor doesn’t appear to have a widget for this.

The dropdowns appear on the standard GP product page when I disable the Elementor template. So the product is set up correctly on the Page.

I also see some threads on here where people were making these dropdowns appear in the Single Product Template (bug threads where the dropdown CSS was not displaying correctly). So I know it can be done…

How? Shortcodes? Widget areas? Thanks!

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

when creating a single product template in elementor it uses the first product in your list. Make sure this product has variations and then it will automatically be displayed as part of the Add to Cart Widget.

If thats not the case then we would need to the site with a link to a variable product to take a closer look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Josh]

Thanks David. I did get the variations dropdowns to appear.

However I’m having a similar issue to what a couple of other posters had.

1) The text for ‘Choose an option’ in the dropdowns is truncated by the boxes.

2) Without adding margin to the dropdown bottoms, the boxes are crammed up tight against the ‘Add to Cart’ button

I used this code in Simple CSS:

/* FIX GP Variations on Product Page */
.woocommerce div.product form.cart .variations {
    margin-bottom: 48px;
    border: 0;
    width: 100%;

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

When use only the code to fix the text inside the dropdowns, it lets me see them a bit more, but doesn’t really fix the issue.

If I use the code for putting the margin there to make a gap…the dropdown text code doesn’t seem to work at all.

I included the URL to the staging site and product page to demo this. Mind taking a look?

[David]

I assume you’re on Firefox as it looks fine on Chrome and Safari… try this CSS:

.woocommerce div.product.elementor form.cart table.variations td.value select {
    font-size: 1.4em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Josh]

I use Chrome as my main development browser (Version 72.0.3626.121 (Official Build) (64-bit)). The issue has been showing up there.

The large font-size in your last code only made the font size large, it didn’t fix the problem.

I managed to snap the text into the middle of the box using padding:

/* FIX GP Variations Box on Product Page */
/* Make gap between variations box and Add to Cart button */ 
.woocommerce div.product form.cart .variations {
    margin-bottom: 48px;
    border: 0;
    width: 100%;
}

/* Put 'Choose an option' text in center of variation dropdowns */
.woocommerce div.product.elementor form.cart table.variations td.value select {
     height: 3em;
     padding: 2px 2px 16px 10px; 
}

However:

1) The height declaration is pushing the dropdown arrow on the right down

2) The height declaration is creating a gap between the box and the menu when it pops out

3) The dropdown arrow in Firefox is larger than the box… and yet …

4) The box, text and menu are looking good all around on Edge

[Tom]

Hey Josh,

Just checking this out. I removed the CSS you added (height: 3em etc..) and this is what I see in Chrome: https://www.screencast.com/t/AgeqOlWS

Can you show me what you’re seeing?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Josh]

Hi Tom …

This is the dropdown arrow pushed down to the bottom right ( with the code I used above):

https://ibb.co/NLVxN67

This shows the gap between the menu and the box. The other box has a similar, smaller gap (with the code I used above):

https://ibb.co/5r0JHV0

This is what I see when I remove the 3em height declaration:

https://ibb.co/jZvN5v7

[Tom]

I’m only seeing the issue in Firefox as well.

This seems to fix it?:

.woocommerce div.product.elementor form.cart table.variations td.value select {
    padding-bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Josh]

Thanks, it seems to be the best result I’ve seen so far.

Text is readable and closer to the box middle (but not quite centered still):

https://ibb.co/WfCYxS3

Dropdown menus are now tucked up tight under the box.

https://ibb.co/PMd7XVM

1) Any suggestions for how to get the text centered the rest of the way?

The text sits about the same amount of pixels below center of the box in Firefox and Edge. It really should pop up the rest of the way.

2) Strange how I’m seeing it this way on my Chrome install, but you guys aren’t.

3) Seems like a good issue to address for an upcoming GP release 🙂

[Tom]

You could try this:

.woocommerce div.product.elementor form.cart table.variations td.value select {
    padding-top: 0;
    padding-bottom: 0;
}

Not sure if it will work though, as it looks good for me on Firefox with just the bottom zeroed out.

It actually looks like the offending CSS is in your custom CSS:

.woocommerce div.product.elementor form.cart table.variations td.value select {
 padding: 2px 2px 16px 10px;
}

If you remove that, the issue should go away.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Josh]

Ok, removing the padding-top moved it the rest of the way.

The full code I’m using to get these elements to sit right:

/* Add gap between variations box and Add to Cart button */ 
.woocommerce div.product form.cart .variations {
    margin-bottom: 48px;
    border: 0;
    width: 100%;
}

/* Put text in middle of variation dropdowns */
.woocommerce div.product.elementor form.cart table.variations td.value select {
      padding-top: 0;
      padding-bottom: 0;
}

Result – showing text in middle of box, and gap between the variations boxes and Add to Cart button:

https://ibb.co/jkjZ2cC

Thanks for help guys! Legendary support as always. Hopefully this solution will come in handy for others that are running into it …

[Tom]

Glad we could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts