Problem With Product Variation Dropdown

  • Resolved WP Junky

    (@wordpressjunky)


    11 years, 3 months ago

    Hi there. First thanks for an amazing theme.

    I’ve been testing virtue as possible new theme for one of my woocommercesites but I’ve noticed an issue with the product variation dropdown menu on product pages.

    The issue is present on my local test site as well as the virtue demo site. For example see the “Football T-shirt” product listing:http://themes.kadencethemes.com/virtue/product/football-t-shirt/

    When changing from portrait to landscape mode on a mobile device the product variation menu loses functionality and is often non responsive.

    If you initially load a product page in portrait or landscape mode and stay in portrait or landscape mode orientation the dropdown/popup works just fine.

    However, if you load a product page in one orientation and happen to rotate your device orientation to change to a different view before using the dropdown menu to make a selection, the menu typically becomes non functional.

    The same is true if you load the page in one orientation, use the product variation menu, and then change device orientation to the opposing view afterwards. (If you decide to change your product variation/option selection at that point you’ll encounter difficulty using the menu needed to do so)

    Basically the variation menu appears to work fine as long as visitors don’t change their device orientation while browsing the page.

    The only way to “fix” the issue for the visitor is to refresh the page or to change back to the original orientation used at page load. That’s a little inconvenient and I’m guessing there is a percentage of less than tech savy users that will simply give up and abandon their purchase assuming the site is broken.

    I’ve noticed if a user happens to change orientation while the menu popup is open,it will stay open but will still be malfunctioning should they decide to make a change in their option/variation selection.

    This issue is present for me using two different phones: one using a stock android browser and on both phones using different versions of the Chrome mobile browser.

    I can also reproduce the issue in Firefox and Google Chrome desktop browsers by resizing the browser window. (Load the page in full/max window size and then resize to a smaller mobile device size and I get a nonfuctioning menu until I refresh or switch back to the original window size when the page was loaded.

    I’m not sure how many visitors will encounter this issue but I know I frequently change device orientation when shopping and browsing on my phone and other mobile devices. Changing browser window width might be a little less common but it’s still also a concern.

    Is there any potential fix for this? Or is this something I (and my customers) need to deal with if I choose to continue using the virtue theme? Any thoughts or solutions are greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter WP Junky

    (@wordpressjunky)

    11 years, 3 months ago

    I’m using:
    Wordpress Version 4.1
    Virtue 2.3.7
    Woocommerce 2.2.11

    Ben Ritner – Kadence WP

    (@britner)

    11 years, 3 months ago

    Thanks for reporting and giving the details. I have come up with a fix and tested on the demo. It wil be included in the new update but if you would like to use it now just add this js in your footer using a text widget:

    <script type="text/javascript">
jQuery(document).ready(function ($) {
matchMedia('only screen and (max-width: 480px)').addListener(function(list){
		$('select.hasCustomSelect').removeAttr("style");
		$('select.hasCustomSelect').css({'width':'250px'});
    	$('.kad-select.customSelect').remove();
    	$('select.kad-select').customSelect();
    	$('.customSelectInner').css('width','100%');
	});
});
</script>

    Kadence Themes

    Thread Starter WP Junky

    (@wordpressjunky)

    11 years, 3 months ago

    Thanks so much for the quick reply. Looks like this fixed the issue beautifully! Thanks again!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Problem With Product Variation Dropdown’ is closed to new replies.