How to Set Storefront Theme Product Page Full Width

If you are using the Storefront theme, the product page comes with a default sidebar, which can be a problem for many WooCommerce users. However, if you use the Full-Width template for your product page, you will still see the sidebar. However, this is not the case with the other pages.

Table of Contents

This is because setting the template to Full Width effectively hid the sidebar.This happens because all WooCommerce pages use the templates on the WooCommerce plugin. They are not using the templates in the Storefront theme.

WooCommerce Storefront Product Page Full Width

This post will guide you on how to remove this WooCommerce sidebar on the product page. I will be using the WooCommerce storefront WordPress theme, but this approach will work across all WooCommerce themes.

Steps to make WooCommerce Product Page Full Width

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to make WooCommerce product page full width.
Add the following code to the function.php file:

add_action( 'wp', 'njengah_remove_sidebar_product_pages' );

function  njengah_remove_sidebar_product_pages() {
    if ( is_product() ) {
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
  }
}

Alternatively, you can use the is_active_sidebar WordPress function to remove the WooCommerce sidebars:

/**

* Disable sidebar on product pages in WooCoomerce.

*

*/

function njengah_remove_sidebar( $is_active_sidebar, $index ) {

if( $index !== "sidebar-1" ) {

return $is_active_sidebar;

}

if( ! is_product() ) {

return $is_active_sidebar;

}

return false;

}

add_filter( 'is_active_sidebar', 'njengah_remove_sidebar', 10, 2 );

This will be the outcome:

How the Code Works

The first snippet consists of an action hook added to the ‘wp’ event, and its callback functions use a remove_action hook to remove all the sidebars in the product pages since it specifies woocommerce_sidebar. It is the most effective way to remove the sidebar from the product page.

The second snippet consists of a filter hook that checks if there is a sidebar with the index of sidebar-1, which can be changed to match any other sidebar id/name.

Conclusion

In this post, I have shared two code snippets that you can use to remove the sidebar from the WordPress site. Moreover, these solutions will set the Storefront product page to full width. If you are a WordPress developer or WooCommerce theme developer, I am sure you have understood how the WooCommerce sidebar works.

Editorial Staff

How to Set WooCommerce Storefront Theme Product Page Full Width

WooCommerce Storefront Product Page Full Width

Steps to make WooCommerce Product Page Full Width

How the Code Works

Conclusion

Similar Articles

Related