Sidebar Position on Mobile/Tablet

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

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

Thanks.

Have a read: https://webdevstudios.com/2015/11/12/getting-started-wordpress-hooks/ ??

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!

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' );
}

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 );
}