Recently we had a client that wanted to have a search bar and sub-categories displayed on WooCommerce categories, but only when viewed on mobile.
We achieved this by adding a sidebar to the category pages and adding both search & categories widgets. Then we simply hide that sidebar on desktop devices with css.
Note: also set it full width
But, the problem was that by default on mobile devices WordPress puts sidebar bellow the actual page content. And there is a reason for that, simply the content is more important than the sidebar. But in our case, it is useless this way so we had to put the sidebar on top.
We did this also with css, simply replacing the sidebar and main-content position.
Note: You can’t just copy-paste this script, because it will not work on your theme. You have to identify your theme elements and replace ours.
.mkdf-wrapper .mkdf-sidebar-standard .mkdf-sidebar – your sidebar
.mkdf-wrapper .mkdf-container-inner .mkdf-grid-row – inner row section