• Hi,
    Currently the Sidebar which I use for listing product categories sits below the page content in mobile/tablet view, I dont feel this is a good position for it.

    I’d like to move it above the content for mobile/tablet view but keep it to the left of the content in desktop view.

    Could I use a hook like storefront_before_content, but how would I apply that function only for mobile/tablet view i.e) max-width: 768px;?

    Any help much appreciated.

    Thanks.

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hey,

    First of all you’ll need to remove the current sidebar which is hooked in to storefront_sidebar.

    Then hook it back in to storefront_content_top. That should get your markup arranged correctly so the mobile display will be as you want it.

    From there you’ll likely need to perform some css tweaks to get the desktop layout displaying correctly.

    Cheers

    Thread Starter andyt1980

    (@andyt1980)

    I’m still just learning about hooks, could you give me a bit more code to start with?

    Thanks.

    Thread Starter andyt1980

    (@andyt1980)

    I’ve tried both following snippets but nothing is happening:

    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    add_action( 'storefront_content_top', 'woocommerce_sidebar', 10 );
    function add_sidebar_to_top() {
        add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    }
    add_action( 'storefront_content_top', 'add_sidebar_to_top');

    I deactivated W3 Total Cache incase it was a cacheing problem, but still nothing changes.
    Any help much appreciated.

    Try;

    remove_action( 'storefront_sidebar',        'storefront_get_sidebar',          10 );
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );

    Cheers!

    Thread Starter andyt1980

    (@andyt1980)

    Thanks, it worked!.
    However, it also adds the sidebar to the Homepage and non-Woocommerce pages where its not required. For the moment I’ve just hidden it with CSS, but is their a better PHP solution?.

    Ah, yeah. You’ll need to wrap that second line in an if statement which checks all of your specific conditions. EG

    // Add the sidebar to all pages except the home page
    if ( ! is_home() ) {
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );
    }
    Thread Starter andyt1980

    (@andyt1980)

    I’ve tried:

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    // Add the sidebar to all pages except the home page
    if ( ! is_home() ) {
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );
    }

    and

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    // Add the sidebar to all pages except the home page
    if ( ! is_front_page() ) {
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );
    }

    but neither removes sidebar from homepage.

    Any ideas?

    Hi andyt1980,

    I see the issue, it should be !is_home as opposed to ! is_home – that extra space there is the issue. Try it without the space and you should be fine.

    Cheers,

    Hi,
    I just tried without that extra space but without success

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    // Add the sidebar to all pages except the home page
    if ( !is_home() ) {
    add_action( 'storefront_content_top', 'storefront_get_sidebar' );
    }

    Can you tell me what is wrong?

    without success not to show sidebar in homepage…

    if ( is_home() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    }

    That should remove the sidebar on your homepage.

    Hm…it did not help.

    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    // Add the sidebar to all pages except the home page
    if ( is_home() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    }

    There is no sidebar before products at all atall pages. What is missing?

    Can you help me Please?

    What are you trying to do?

    If you just want to remove the sidebar on your homepage this should work;

    if ( is_home() || is_front_page() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
    }
Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Sidebar Position on Mobile/Tablet’ is closed to new replies.