EDIT: Storefront now has a full-width page template so you no longer need to use the custom code in this article. To remove the sidebar on WooCommerce pages, you can set the page template to Full Width.
If you are using Storefront theme and you want to use the Full Width template for your store and other pages, you might come across a problem. After you’ve set your page to the Full Width template, you can still see the sidebar. And that’s not the case with the other pages, since setting the template to Full Width effectively hid the sidebar.
And here is a product page which is supposed to be full-width but still shows the sidebar
This happens because all WooCommerce pages use the templates on the WooCommerce plugin. They do not use the Storefront templates. To resolve the problem, add the following code to your child theme’s functions.php.
add_action( 'wp', 'woa_remove_sidebar_shop_page' );
function woa_remove_sidebar_shop_page() {
if ( is_shop() || is_tax( 'product_cat' ) || get_post_type() == 'product' ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', 'woa_remove_sidebar_class_body', 10 );
}
}
function woa_remove_sidebar_class_body( $wp_classes ) {
$wp_classes[] = 'page-template-template-fullwidth-php';
return $wp_classes;
}
This code would remove the sidebars on the product page, product categories, and the shop page. It would also add the page-template-template-fullwidth-phpclass that causes the layout to be in full width.
Now you know how to make WooCommerce pages full width in Storefront Theme! If you have further questions please let us know.
Getting started on a WooCommerce store all starts with installing WooCommerce. It’s pretty simple and straightforward, but if you don’t know how to install it, we’ll help you out. There are two ways to install WooCommerce and we’ll detail them both in this post.
Similarly, you can also optimize WooCommerce product categories for SEO. Just go to “Products” and click on “Categories” Edit the category that you want to optimize. When you scroll down to the bottom of the “Edit Category” page, you’ll see a section called Yoast SEO Settings. Fill in the SEO Title and SEO Description fields and click on Update.
You might have heard about XML sitemaps and that it’s good for your website’s SEO but don’t really know what it is. Or maybe you don’t know how to create a sitemap for your WooCommerce store. We can help with that. For starters, Google defines a sitemap as:
Most SEO experts say that adding a link to your sitemap on your website does not serve any purpose since the search engines find the sitemap through the robots.txt file or when you manually submit the sitemap to Google Webmaster Tools or Bing’s. Some disagree however and mention that having a link in the footer adds value.
