Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / Code Snippets / How to Make WooCommerce Pages Full Width in Storefront Theme

How to Make WooCommerce Pages Full Width in Storefront Theme

April 23, 2015 By Nick J 16 Comments

Facebook0
Twitter0
Google+0
LinkedIn0

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.

shopimage
Here is a shop page that is supposed to be full-width but still shows the sidebar

itemimage

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.

People that read this article also liked

  • How to Change Fonts in Storefront ThemeHow to Change Fonts in Storefront Theme
  • How to Create a Child Theme for StorefrontHow to Create a Child Theme for Storefront
  • How to Add a Top Bar in Storefront ThemeHow to Add a Top Bar in Storefront Theme
  • How to Center Logo in Storefront ThemeHow to Center Logo in Storefront Theme
Facebook0
Twitter0
Google+0
LinkedIn0

Filed Under: Code Snippets, How-To Articles Tagged With: code snippet, design tweaks, how-to, Storefront, website development, WooCommerce

Comments

  1. Adam Badwan says

    November 24, 2016 at 8:16 pm

    i copied and pasted it into the .php theme file in WordPress and I got an Error 500 syntax error and I cant get access to my website anymore 🙁 PLEASE HELP

    Reply
    • Nick J says

      February 13, 2017 at 7:17 pm

      Hi Adam, We do not recommend editing files from your WordPress dashboard as these things can happen when mistakes are made. You can just access the file system via FTP or Cpanel File Manager and remove the code snippet from there. Find the functions.php file from the Storefront theme folder.

      Reply
  2. manuel says

    January 7, 2017 at 12:58 pm

    Hi
    I have WP 4.7 and the last version of Woocommerce an storefront theme

    I have a storefront child theme

    My problem is: WP doesn’t show page template option in the page attributes when I edit or create a new page.

    What can I do to show page templete option?

    thanks

    Reply
    • Nick J says

      February 13, 2017 at 7:11 pm

      Hi Manuel, what child theme are you using? Have you tried using other themes like the twentyseventeen theme? The problem may be caused by your child theme.

      Reply
  3. Tim says

    February 15, 2017 at 10:11 pm

    Hi Nick

    I need half of this! I need the shop to retain the sidebar (as it contains filters) but the product itself to be full width.

    Can this be done?

    Reply
    • Nick J says

      February 23, 2017 at 7:29 am

      Hi Tim,

      Here’s the code:

      add_action( 'wp', 'woa_remove_sidebar_shop_page' );
      function woa_remove_sidebar_shop_page() {
      if ( is_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;
      }

      Reply
  4. Marshall says

    March 21, 2019 at 11:03 am

    Hi Nick,

    How about if I want the shop and individual product pages to be full-width, but want to show the sidebar on product categories pages? I tried to use the following: if ( is_shop() ) || ( is_product() ) { but got an error of “unexpected ||”. Of course, I’m doing something wrong, but not sure what it is.

    Any help would be greatly appreciated!

    Reply
    • Rob says

      April 5, 2019 at 11:45 am

      Hi Marshall,

      The whole code affects all page types so just remove the bit for the category: https://i.imgur.com/WMYfPem.png
      That way the sidebar will not be removed from the category pages.

      Reply
  5. Anthony says

    March 30, 2020 at 9:34 pm

    Still works beautifully with WooCommerce 4.0.1 and Storefront 2.5.5 – thank you!

    Reply
  6. René Dorta says

    April 21, 2020 at 1:17 pm

    It works fine! Thanks!
    Now we have more space for the shop area, but woocommerce-storefront keep putting there 3 products in a row. I would like to put more products (say 4) in each row.

    Reply
    • René Dorta says

      April 21, 2020 at 1:24 pm

      Excuse me, all!
      It was just a matter of woocommerce settings. No more code needed.

      Reply
    • Rob says

      April 22, 2020 at 4:01 pm

      Hi René,

      You can edit the product rows by going to Appearance > Customize > WooCommerce > Product Catalog. From there, you can change the number of products that appear per row.

      Reply
  7. Ed says

    May 23, 2020 at 12:42 pm

    What is the code to use if I want to create all pages in full-with. We used Elementor as a page builder and currently my homepage doesn’t show in full-width

    Reply
    • Rob says

      August 6, 2020 at 11:48 am

      Hi Ed,

      Each page has a full width template that you can access under the Page Attributes section in the editor. If you are using Elementor though, there should also be full width Elementor templates you can start with.

      Reply
  8. dushyant says

    June 30, 2020 at 10:17 am

    great that code worked for me thanks i just removed the sidebar from my single product page and made it full width and shop and category pages are with side bar that’s what i wanted

    thanks again …………

    Reply
    • Rob says

      July 30, 2020 at 4:30 pm

      Hi dushyant,

      Glad to be of help. 🙂

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $70

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • Orbit Fox by ThemeIsle Plugin Patched for Critical Vulnerabilities
  • Contact Form 7 Critical Vulnerability in File Upload Functionality
  • Why is it Important to Keep Your PHP Version Updated?
  • PageLayer Plugin Vulnerability Affects Over 200,000 WordPress Sites
  • How to Find and Remove Abandoned Plugins from Your WooCommerce Store to Keep Your Site Secure
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $70

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2021 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

This site uses cookies. Please read our Cookie Policy for more information.