Hide “Sort by price” for mobile safari

Hello @planetshaker,

Can you please share your site’s URL with a screenshot of what you want to hide? ??

Look forward to hearing back from you.

Hi Saif, thanks for answering! The site is not launched yet, but here are the screenshots from what I mean:

Chrome: https://clips.zaehlpixel.com/4gu4n9NW

Safari: https://clips.zaehlpixel.com/Z4umKkn0

I used CSS to hide it. But works on Chrome only: https://clips.zaehlpixel.com/llugNYXQ

Hope that helps to clarify it.

• This reply was modified 1 year, 11 months ago by Albert.

Hi @planetshaker

Thanks for sharing the screenshots, these are helpful,

As requested by Saif above, can you please share the URL or the link to your site so that we could check this further?

Thanks!

Hello,

no, the site hasn’t launched yet. It’s only on a staging server. but it’s normal WooCommerce behavior and reproduceable everywhere.

Howdy @planetshaker

An alternative to hiding a selection of choices would be to only display the desired ones.

Thus, feel free to replace the now existing drop-down with, say, three buttons -one for each sorting choice. Subsequently, link those buttons to the respective queries that produce the selected sorting.

I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.

Hi Pepe, hm, no I don’t want to replace them actually. Is there a CSS rule that applies for Mobile safari simply?

Hello @planetshaker,

We can’t provide a CSS solution without inspecting the site elements, but here’s a template you just plug the values into.

@media only screen and (max-width: 480px) {
  Delete_this_and_replace_with_value_of_that_selector{
  display: none;
}
}

To get the selector of that element, please check the following screencast: https://d.pr/v/c12FhJ

Hope this helps!

Hey Saif,

thanks – the site is now released and finally I can share the link to look over it:

https://maranatha-mission.de/shop/

Here, you can see on the order select form that I already did what you said:

.orderby option[value="price"],?.orderby option[value="price-desc"]?{
display: none;}

And it works for Chrome and Firefox, but not on Safari, neither Desktop nor Mobile.

Is there any other way to hide sorting by prices on Safari?

Hi,

Thanks for your response.

May I ask, can you switch the site’s theme to Storefront? Is this working at this point in Safari browser?

If you do not want to touch the live site to check, you can test it in the staging environment, we recommend WP Staging for quickly spinning up a new test site.

Let us know how that goes for you.

Hi Igor, Thank you, but I think this is not theme related, it’s browser related, so I’d rather wait for other advice. Maybe someone has another idea how to do that with CSS or a hook.

Hello @planetshaker,

I did some digging and seems like Safari doesn’t respect CSS rules for the <option> tag.

You can remove the price options from the DOM programmatically with the filter below but I’m not sure if there’s a way to target certain devices.

add_filter( 'woocommerce_catalog_orderby', 'remove_price_from_dom' );
 
function remove_price_from_dom( $options ){
    unset( $options[ 'price' ] );
    unset( $options[ 'price-desc' ] );
    return $options;

}

You can add it to your functions.php file or use a plugin like Code snippet.

Hope it helps!

Hey Saif, that was exactly the solution I am looking for.

But unfortunately, it does not change anything ??

If you call https://maranatha-mission.de/shop/, the filters are still in the select, see here: https://clips.zaehlpixel.com/4gu4NKDy

• This reply was modified 1 year, 10 months ago by Albert. Reason: Not resolved
• This reply was modified 1 year, 10 months ago by Albert.

Hi there @planetshaker

Kindly keep in mind, we are not developers and only offer support for existing functionality.

Please see our Support Policy: https://www.woocommerce.com/support-policy/

For assistance with customization or development with your site, we recommend that you seek help from:

• A local web developer
• Codeable.io
• WooExperts
• Stackexchange

If you are comfortable coding yourself and have questions, I would also recommend that you consider:

• WooCommerce developer Portal
• WooCommerce Slack Community
• Advanced WooCommerce Facebook group

I hope that helps you to figure it out.

Feel free to get back to us if you have further questions.

As we haven’t seen any activity on this thread, I am marking it as resolved.

It is our hope that you were able to find a solution to your problem! If you have any further questions, please feel free to post them in a new topic.

Best wishes!