Ecommerce Shopify WordPress Discussion

WordPress variable product dropdown closes right after being clicked

I have a variable product on my WordPress site and there are several issues with it: Issue 1: The dropdown closes automatically after being clicked when the menu opens downwards. If the menu opens upwards, the issue is not present. See attached gifs: Menu opens downwards: Menu opens upwards: Issue 2: The dropdown menu gets misaligned for different screen sizes. This is probably due to the position: absolute top: XXXpx; left: XXXpx; parameter when the menu is open. Still, I cannot seem to find the right fix. Menu is misaligned when opened upwards: Code: <table class="variations" cellspacing="0" role="presentation"> <tbody> <tr> <th class="label"> <label for="data-plan">Data Plan:</label> </th> <td class="value"> <select id="data-plan" class="select2-hidden-accessible" name="attribute_data-plan" data-attribute_name="attribute_data-plan" data-show_option_none="yes" tabindex="-1" aria-hidden="true"> <option value="">Choose an option</option> <option value="1 Year" class="attached enabled">1 Year</option> <option value="3 Years" class="attached enabled">3 Years</option> <option value="5 Years" class="attached enabled">5 Years</option> <option value="Unlimited" class="attached enabled">Unlimited</option> </select> <span class="select2 select2-container select2-container--default select2-container--focus select2-container--open select2-container--above" dir="ltr" style="width: 125.6px;"> <span class="selection"> <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-data-plan-container" aria-owns="select2-data-plan-results" aria-activedescendant="select2-data-plan-result-3qsl-Unlimited"> <span class="select2-selection__rendered" id="select2-data-plan-container" title="Choose an option"> Choose an option </span> <span class="select2-selection__arrow" role="presentation"> <b role="presentation"></b> </span> </span> </span> <span class="dropdown-wrapper" aria-hidden="true"> </span> </span> <a class="reset_variations" href="#" style="visibility: hidden;">Clear</a> </td> </tr> </tbody> </table> This is the menu code, which is added at the bottom of the source code, after the dropdown is pressed (only visible, when the dropdown menu is open): <span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 565.7px; left: 853.188px;"> <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 200px;"> <span class="select2-search select2-search--dropdown select2-search--hide"> <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"> </span> <span class="select2-results"> <ul class="select2-results__options" role="tree" id="select2-data-plan-results" aria-expanded="true" aria-hidden="false"> <li class="select2-results__option select2-results__option--highlighted" role="treeitem" aria-selected="true">Choose an option</li> <li class="select2-results__option" id="select2-data-plan-result-c2h0-1 Year" role="treeitem" aria-selected="false">1 Year</li> <li class="select2-results__option" id="select2-data-plan-result-wo5c-3 Years" role="treeitem" aria-selected="false">3 Years</li> <li class="select2-results__option" id="select2-data-plan-result-e4yv-5 Years" role="treeitem" aria-selected="false">5 Years</li> <li class="select2-results__option" id="select2-data-plan-result-3qsl-Unlimited" role="treeitem" aria-selected="false">Unlimited</li> </ul> </span> </span> </span>
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.