fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Dropdown on mobile, swatches on desktop

Stefan Zahnd

Hi

is it possible to disable the swatches on mobile and show the regular dropdowns instead. But still show the swachtes on desktop and tablet? On mobile, the list of swatches gets pretty long…

I have to mention, the long list is only very long on product bundles like this one:

https://www.kaybeekids.ch/produkt/eltern-kind-package/

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

Thanks for getting back to us. You can try the following snippets using the Code Snippets Plugin:

add_filter('default_woo_variation_swatches_single_product_dropdown_html', function($default){
if( wp_is_mobile() ){
   return true;
}
}, 10, 1);

It will display the default dropdown rather than swatches on the single product page.

Note: To test it, use a real mobile device. It will also display a dropdown on tablet devices. This is the only function wp_is_mobile() WordPress provides to detect small screens.

Thank You

Stefan Zahnd

Hi Hakik

Thank you very much, and sorry for my late response. This solution works well.

Best regards, Stefan