Product sorting options by CSS in IOS

Hi @lesbillbell,

Mobile browsers, especially on iOS devices, sometimes have different default settings that can override or ignore certain CSS rules.

To solve the issue, you may consider using a PHP snippet to remove the sorting options instead of using CSS to hide the sorting options. This code should be added to your child theme’s functions.php file:

add_filter( 'woocommerce_catalog_orderby', 'a8c_remove_sorting_option_woocommerce_shop' );
  
function a8c_remove_sorting_option_woocommerce_shop( $options ) {
   unset( $options['popularity'] );   
   return $options;
}

I have tested this snippet with WooCommece 8.5.1 and Storefront theme, and it works fine on all devices:

Snippet source: https://www.businessbloomer.com/woocommerce-remove-rename-add-default-sorting-options-shop/

I hope this helps! Please let us know how it goes or if you need further assistance.

Hi Shameem,
Your explanation is helpful and the solution is much appreciated.

I actually knew that it can be done in functions.php with a child theme, but I was trying to avoid having to make a child theme. If there is no way to get the IOS mobile browsers to abide by the CSS rules, which I did not know, I’ll do it the way you say – and making a child theme doesn’t sound too difficult when I read about it.

Many thanks!
Les

Hi @lesbillbell,

I’m glad to hear that you found Shameem’s explanation helpful and that you are willing to try his solution. Unfortunately, it is not possible to hide the product sorting options using CSS in iOS. You will notice that the drop-down will have the default system design in iOS and it is not possible to force any styling rules on those elements.

The best way to achieve what you want is to use the code suggested by Shameem in your functions.php file. This will allow you to remove the product sorting options from your shop page.

Please give it a try and let us know how it goes. ??

Many thanks, Afzal. I was also thinking I could use the plugin

StoreCustomizer – A plugin to Customize all WooCommerce Pages –

WordPress plugin | www.ads-software.com – which has been updated since I started this thread, but Shameem’s seems a more elegant solution.

Hey, @lesbillbell!

You can definitely use a plugin if you prefer. It is really up to you which option fits you best.

Just please note that we do not provide support for third-party plugins, so it is good to check the plugin thoroughly to see if it is reliable. You can find more about this in this guide.

I hope this is helpful.

Please let us know if there’s anything else we can do to help.

Have a wonderful day!