Variable Product Options Drop Down Not Appearing

Hi @coldxot

Using a combination of Elementor + Elementor Pro + WooCommerce + LearnDash.

Have created a product to associate with my LearnDash course which has two pricing options. I’ve set it all up to be a variable product as normal but there is no drop down to pick the option on the product page (https://wordpress-881670-3566016.cloudwaysapps.com/product/ayurvedic-liver-cleanse/) – all other simple products are working fine.

I’ve tried deactivating plugins to look for a compatibility issue to no success.

Everything else is working, simple products add to cart successfully and go to checkout.

Variable products just won’t show the drop down to pick the option and add to cart does nothing.

From what I understand, you’re experiencing an issue with displaying the drop-down options for variable products on your WooCommerce site. You’ve done a great job troubleshooting the issue by checking for potential plugin conflicts, which is usually a common cause for such problems.

Firstly, I’d like to confirm that I’ve checked the product page for ‘AYURVEDIC LIVER CLEANSE‘ and I was able to see the dropdown menu with the ‘Course Access‘ and ‘Access with Coaching‘ options. This suggests that the variable product setup is correct and functioning as expected.

Image Link: https://s12.gifyu.com/images/SWleL.gif

That said, if you’re still experiencing this issue, it could be due to a number of factors including browser caching, theme conflicts, or even a potential issue with the Elementor Pro plugin. Here are a few steps you can take to troubleshoot:

1. Clear Browser Cache: Sometimes, your browser may hold onto older versions of your site. Clearing your browser cache can often resolve issues like this.
2. Test on Different Browsers/Devices: Try accessing your product page on different browsers or devices to see if the issue persists. This can help identify if the issue is specific to a certain browser.
3. Theme Conflict: Temporarily switch to a default WordPress theme like Storefront, then check your product page again. If the issue is resolved, it may be a conflict with your current theme.
4. Elementor Pro Conflict: Temporarily deactivate Elementor Pro and check your product page. If the dropdown appears, the issue might be with Elementor Pro. In this case, reaching out to Elementor Pro support may be beneficial.
5. WooCommerce Conflict: Temporarily deactivate all plugins except WooCommerce and see if the problem persists. If it is resolved, reactivate each plugin one by one until the issue reappears. This can help identify if there’s a conflicting plugin.

I hope this helps guide you in the right direction. If you have any more questions, don’t hesitate to ask. We’re here to assist!

Hey Tamrat,

Thanks for the amazing support and thorough response. I managed to get it sorted following your suggestions. Likely a caching issue that was persistent.

I do have a remaining issue that might be related though?

I’ve set the variation price $108 to be centered with the entire box, but it doesn’t want to move over. I think I may need some custom CSS on this issue but can’t find any documentation on this matter. See screenshot for detail

Image link – https://ibb.co/LdXzVB5 as it doesn’t seem to be embedding for some reason.

Hi @coldxot ,

Glad to hear that the initial issue has been sorted!

I’ve set the variation price $108 to be centered with the entire box, but it doesn’t want to move over. I think I may need some custom CSS on this issue but can’t find any documentation on this matter

Can you try adding the following CSS to?Appearance?→ Customize → Additional CSS?and see if this does the trick:

/*  center align price  */
.woocommerce-variation-price {
    text-align: center;

This should be the outcome:

Cheers!

Weird! This is what I tried before and it didn’t work I must have mistyped something.

Thank you very much for your help.

Hi @coldxot

Weird! This is what I tried before and it didn’t work I must have mistyped something.

Thank you very much for your help.

It’s understandable that sometimes, despite our best efforts, things might not go as planned due to a minor mistake or oversight. Don’t worry, it happens to the best of us.

I’m glad to hear that you found the assistance provided helpful. It’s our primary goal to ensure that your experience with WooCommerce is as smooth and enjoyable as possible.

If you have a few minutes, we’d love if you could leave us a review: https://www.ads-software.com/support/plugin/woocommerce/reviews/

Cheers!