Storefront Sidebar (products pages)

Hi,

You’ll need to unhook the WooCommerce sidebar. If you’re familiar with hooks and actions this should be easy enough to figure out.

Alternatively our Storefront WooCommerce Customiser extension will allow you to apply a full width layout to product pages.

And what for those poor souls that aren’t familiar with hooks? ;-;

Use the extension? :p

Or, add some code to your child themes functions.php file. Something like:

add_action( 'init', 'remove_storefront_sidebar' );

function remove_storefront_sidebar() {
	if ( is_product() ) {
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar',			10 );
	}
}

Will remove the sidebar on all product pages. You’ll need to tweak that snippet to remove the sidebar on other areas of your site.

tried to add the code to function. It totally ignored it.

Hi Morgan,

Please replace the add_action() line with the following:

add_action( 'get_header', 'remove_storefront_sidebar' );

Please advise if this produces the desired result. ??

@matty. It did actually work, but for some reason, even through in the personalizzation panel there is no sidebar, the usable width has remained as if there was a sidebar. I thank you in advance for any help you’re giving me.
Edit: it seems that, in the personalizzation bar, there is a “layout” section, that blocks my width to the minimum with sidebar. there is no option to disable it, so…. HALP! ;-;

Hi Morgan,

Please add the following CSS code to “style.css” in your child theme:

body.woocommerce #primary { width: 100%; }

Please advise if this produces the desired result. ??

my preciouss Matty! it actually works! thank you for your precious help! the world needs more peoples like you! ??
but really…. the code in woocommerce is tons of time more complex than a normal html one!

Thanks james & Matty!

cool stuff!

Thanks for your help!

thank you Mr.jameskoster Mr. Matty Cohen for all sharing information.. this is one of my problem, now solved! yeay!!

Thought I’d add something here:

For those who want to remove the space left after removing the sidebar, in case the css above doesn’t work, you can use the Simple Custom CSS plugin and put the css code there. I had that problem and using the plugin helped fix it.

Here is the plugin.
https://www.ads-software.com/plugins/simple-custom-css/

Hope this helps someone.

IF ANYONE HAVE DOUBT WHERE TO PLACE THE CODE EXACTLY YOU CAN INSTALL THE JETPACK PLUGIN AND PLACE THE CODE IN THE CSS EDIT OPTION IN IT.

Thanks james & Matty!

Your code i used thank you so much.I am not that expert so i installed the plugin and it works fine.

Thanks a lot.

Thanks! so helpful1