Woocommerce How To Not Display Sidebar On Shop Apge

WooCommerce: How to Hide the Sidebar on Your Shop Page (Easy Guide for Beginners)

So, you’ve built a fantastic online store with WooCommerce. Awesome! But you’re looking at your shop page and thinking, “That sidebar is just cluttering things up!” You’re not alone. Many WooCommerce store owners want to declutter their shop page and give their products more visual prominence. This guide will walk you through how to hide the sidebar on your WooCommerce shop page in a simple, beginner-friendly way.

Why Hide the Sidebar on Your Shop Page?

Think about walking into a physical store. Is your attention immediately drawn to the products, or are you distracted by unnecessary displays and promotional materials? The same principle applies online. Here’s why removing the sidebar can be a great idea:

Improved Focus: Removing the sidebar directs visitors’ attention solely to your products. This is especially useful if you have stunning product photography and want to showcase it. Think of Apple’s website – clean, minimalist, and product-focused.
Enhanced Mobile Experience: Sidebars often get pushed to the bottom of the page on mobile devices. Hiding it can make your shop page look cleaner and load faster on smaller screens, leading to a better user experience. Mobile shoppers are a huge part of the market, so this is crucial!
Faster Page Load Times: While a sidebar might seem small, every element on your page impacts loading speed. Removing it can slightly improve loading times, which Google loves and can improve your SEO.
Cleaner Design: Sometimes, less is more. Removing the sidebar creates a cleaner, more modern look.
Increased Conversions: By removing distractions, you can help guide customers to your products and encourage them to make a purchase. A clear path to purchase often leads to more sales.

Method 1: Using WooCommerce Theme Options (If Available)

The easiest way to hide the sidebar is through your theme’s options. Many WooCommerce themes have a built-in setting to disable the sidebar on specific pages, including the shop page.

1. Go to your WordPress Dashboard: Log in to your WordPress admin area.

2. Look for “Theme Options” or “Customize”: The location of these options varies depending on your theme. Common places include:

Appearance > Customize
Appearance > Theme Options
A dedicated tab within your theme’s settings (e.g., “[Your Theme Name] Learn more about How To Enable Tokenization In Woocommerce Options”).

3. Find Sidebar Settings: Within the theme options, look for settings related to sidebars, page layouts, or shop pages. You might find options like “Shop Page Layout,” “Sidebar Position,” or “Disable Sidebar on Shop.”

4. Disable the Sidebar: Select the option to disable the sidebar on the shop page. It might be a dropdown menu where you select “Full Width,” “No Sidebar,” or similar options.

5. Save Your Changes: Click the “Save” or “Publish” button to apply your changes.

Example: Let’s say you’re using the “Astra” theme. You would go to Appearance > Customize > Layout > WooCommerce > Product Archive. Here, you’ll find a “Sidebar” option, which you can set to “No Sidebar.”

Reasoning: This method is the simplest and safest because it utilizes the built-in features of your theme, avoiding any coding.

Method 2: Using CSS (Quick and Easy)

If your theme doesn’t have a built-in option, you can use CSS to hide the sidebar. This Read more about How To Change Add To Cart Button Woocommerce method is generally safe and doesn’t require modifying any core WooCommerce files.

1. Find the CSS Class or ID of Your Sidebar: You need to identify the unique CSS class or ID associated with your sidebar. The easiest way to do this is using your browser’s developer tools (right-click on the sidebar and select “Inspect” or “Inspect Element”).

2. Identify the Shop Page Class: Most themes add a class to the “ tag specifically for the shop page. Look for classes like `woocommerce-page`, `woocommerce-shop`, or similar. This will ensure the CSS only applies to the shop page and not other pages.

3. Add the CSS Code: Go to Appearance > Customize > Additional CSS. Paste the following code, replacing `YOUR_SIDEBAR_CLASS` or `YOUR_SIDEBAR_ID` with the actual class or ID you found in step 1:

.woocommerce-page #YOUR_SIDEBAR_ID {

display: none;

}

.woocommerce-page #YOUR_SIDEBAR_CLASS {

display: none;

}

.woocommerce-page #content { /* adjust content width to fill the space */

width: 100%;

}

Important: Use `#` for IDs and `.` for classes. Also, adjust the `#content` width rule, or whatever wrapper that contains the main content, to take up the full width. The class name or ID you have to change depends on your theme.

Example: Let’s say your sidebar has the ID `secondary` and your content has the ID `primary`. The CSS would look like this:

.woocommerce-page #secondary {

display: none;

}

.woocommerce-page #primary {

width: 100%;

}

4. Publish Your Changes: Click the “Publish” button.

Reasoning: This method is straightforward and efficient. CSS is designed for styling, making it a natural choice for hiding elements. The `woocommerce-page` class ensures the CSS only affects the shop page.

Method 3: Editing the WooCommerce Template (More Advanced)

This method is more advanced and requires some coding knowledge. Always back up your website before making any changes to template files.

1. Identify the Shop Template: WooCommerce typically uses `archive-product.php` to display the shop page. However, your theme might override this template. Consult your theme’s documentation to find the correct file. The location can depend on the theme. It’s usually within `/wp-content/themes/[your-theme-name]/woocommerce/archive-product.php` or even sometimes `/wp-content/themes/[your-theme-name]/archive.php`.

2. Create a Child Theme: Crucially, create a child theme! This prevents your changes from being overwritten when you update your theme.

3. Copy the Template to Your Child Theme: Copy the `archive-product.php` file from your parent theme to the same location within your child theme (e.g., `/wp-content/themes/[your-child-theme-name]/woocommerce/archive-product.php`). If the `woocommerce` folder doesn’t exist in your child theme, create it.

4. Edit the Template: Open the `archive-product.php` file in your child theme using a text editor Explore this article on How To Setup Woocommerce Product Page or code editor.

5. Remove the Sidebar Code: Look for the code that includes the sidebar. This often involves functions like `get_sidebar()` or code within a `

` or `

` element with a class related to the sidebar (e.g., `sidebar`, `widget-area`). Delete or comment out (using `` in HTML or `/* */` in PHP) this code.

6. Adjust the Content Area: After removing the sidebar, you’ll likely need to adjust the width of the content area to fill the available space. This usually involves modifying the HTML code that defines the content area’s width or CSS classes.

Example: Let’s say your `archive-product.php` file contains this line:

You would either delete this line or comment it out like this:

You would then look for code that defines the content area and adjust its width accordingly. This may be a `

` with a class like `content-area` where you would modify the CSS to make it `width:100%`.

7. Save the Changes: Save the changes to your `archive-product.php` file.

Reasoning: This method gives you the most control over the layout of your shop page, but it’s also the most technical. Editing template files directly can break your site if you’re not careful.

Before You Begin: Back Up Your Website!

No matter which method you choose, always back up your website before making any changes! This will allow you to quickly restore your site if anything goes wrong. You can use a plugin like UpdraftPlus or BackWPup to create a backup.

Conclusion

Hiding the sidebar on your WooCommerce shop page can significantly improve the user experience and highlight your products effectively. Choose the method that best suits your technical skills and theme options. Remember to back up your website before making any changes, and always test thoroughly to ensure everything works as expected. Happy selling!

Complete Guide