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 useful 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 time. 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


Was this post helpful?

    Leave a Comment

    We use cookies to provide an awesome experience on our website. By continuing to use this site, you agree to our tasty cookies.
    🍪 Accept Cookies
    Privacy Policy