How To Remove Sidebar From Woocommerce Categories Page

How to Remove the Sidebar from Your WooCommerce Category Pages (Even if You’re a Beginner!)

So, you’ve got a beautiful WooCommerce store all set up, but your category pages are looking a little cluttered with that pesky sidebar? Maybe it’s pushing your product grid too far to the left, or perhaps it’s filled with widgets that don’t really add value to the browsing experience. Don’t worry, you’re not alone! Many WooCommerce store owners want to remove the sidebar from their category pages for a cleaner, more focused look.

This article will guide you through a few simple methods to achieve just that, even if you’re a complete beginner. We’ll cover different approaches, from the easiest to slightly more advanced, giving you the flexibility to choose what works best for you and your website.

Think of it like this: Imagine you’re browsing a real-world clothing store. You walk into the “T-shirts” section, but you’re bombarded with information about other categories and promotions unrelated to T-shirts. It’s distracting, right? Removing the sidebar from your category pages aims to create a similar, distraction-free experience for your online shoppers.

Why Remove the Sidebar?

Before we jump into the “how,” let’s briefly touch on the “why.” Here are some common reasons for removing the sidebar from WooCommerce category pages:

Improved User Experience: A wider product grid lets you showcase more products at once, making browsing easier.
Clean Design: Removing unnecessary elements creates a more modern and visually appealing design.
Increased Conversion Rates: A focused layout can guide users directly to the products they’re looking for, potentially leading to higher sales.
Mobile Responsiveness: Sidebars can often look awkward or be pushed to the very bottom of the page on mobile devices, hindering usability.

Method 1: Using Theme Options (The Easiest Option!)

The first place to look is within your theme’s options. Many modern WordPress themes, especially those designed with WooCommerce in mind, offer built-in settings to control the layout of different page types, including category pages.

1. Access Your Theme Options: This usually involves logging into your WordPress dashboard and navigating to Appearance > Customize or a similar section (e.g., Theme Options, Theme Settings, or something specific to your theme).

2. Look for Layout Settings: Within the theme customizer, look for sections related to “Layout,” “Blog,” “Shop,” or something similar.

3. Check for Category Page Options: Some themes will have specific settings for WooCommerce category pages. You might find options like “Sidebar Position” or “Layout Type.”

4. Select “No Sidebar” or “Full Width”: Choose the option that removes the sidebar. This is often labeled as “No Sidebar,” “Full Width,” or “1 Column.”

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

Example: Your theme might have a “Shop Layout” section in the customizer. Under this, you might find a dropdown menu for “Category Page Layout” with options like “Right Sidebar,” “Left Sidebar,” and “No Sidebar.”

Reasoning: This is the easiest method because it doesn’t require any coding or plugin installation. It utilizes the features already built into your theme.

Method 2: Using a WooCommerce Layout Plugin

If your theme doesn’t offer the option to remove the sidebar, a WooCommerce layout plugin can be a great alternative. These plugins provide more granular control over the layout of your WooCommerce pages.

1. Install a WooCommerce Layout Plugin: Go to Plugins > Add New in your WordPress dashboard. Search for plugins like “WooCommerce Layouts,” “WooCommerce Page Layout,” or “Layout Control for WooCommerce.” Install and activate the plugin.

2. Configure the Plugin: After activation, you’ll usually find a new menu item or settings page related to the plugin.

3. Locate the Category Page Settings: Within the plugin’s settings, look for options related to “Category Pages” or “Product Category Archives.”

4. Disable the Sidebar: The plugin should offer an option to disable the sidebar on category pages. This might involve selecting a “Full Width” layout or toggling a “Disable Sidebar” option.

5. Save Your Changes: Save the plugin’s settings.

Example: A plugin might offer a visual layout builder where you can drag and drop elements or select pre-defined layouts for different WooCommerce page types, including category pages.

Reasoning: Plugins provide flexibility when your theme’s options are limited. They often offer more advanced customization options as well.

Method 3: Using Custom CSS (For More Control)

If you’re comfortable with a little bit of CSS, you can use custom CSS to hide the sidebar on WooCommerce category pages. This method is useful if you want more precise control over the styling and layout.

1. Identify the CSS Classes: You’ll need to inspect the page to find the CSS classes or IDs associated with the sidebar and the main content area. Right-click on the sidebar and select “Inspect” (or “Inspect Element”) in your browser. Look for the classes or IDs that uniquely identify the sidebar container. You will also need the main content div class.

2. Add Custom CSS: Go to Appearance > Customize > Additional CSS in your WordPress dashboard.

3. Write Your CSS: Use the following CSS code as a starting point, replacing the placeholder class names with the actual class names you identified in step 1:

.woocommerce-archive.tax-product_cat #secondary { /* Sidebar element */

display: none;

}

.woocommerce-archive.tax-product_cat #primary { /* Main Content element */

width: 100%; /* Adjust width to occupy full width */

}

Explanation:

`.woocommerce-archive.tax-product_cat`: This targets WooCommerce category archive pages. This is important to only target category pages.
`#secondary`: Replace this with the actual ID or class of your sidebar container.
`#primary`: Replace this with the actual ID or class of your main content area.

4. Adjust Width (Important): You’ll also need to adjust the width of the main content area to take up the full space now that the sidebar is gone. Change the `width` property in the CSS rule for the main content area accordingly.

5. Save Your Changes: Click the “Publish” button.

Example: If your sidebar has the class `widget-area` and your main content area has the class `content-area`, your CSS might look like this:

.woocommerce-archive.tax-product_cat .widget-area {

display: none;

}

.woocommerce-archive.tax-product_cat .content-area {

width: 100%;

}

Reasoning: CSS offers fine-grained control over the appearance of your website. It’s useful for making specific adjustments that aren’t easily achievable through theme options or plugins.

Method 4: Using a Child Theme and Custom Code (For Advanced Users)

This is the most advanced method and requires some PHP knowledge. It involves creating a child theme and modifying the WooCommerce template files.

Important: Creating a child theme is crucial to prevent your changes from being overwritten when you update your parent theme.

1. Create a Child Theme: If you don’t already have one, create a child theme for your current theme. There are many tutorials online that explain how to do this.

2. Copy the Template File: Find the WooCommerce template file that controls the category page layout. This is typically `archive-product.php` located in the `woocommerce/templates` directory. Copy this file to the `woocommerce` directory in your child theme (e.g., `your-child-theme/woocommerce/archive-product.php`).

3. Edit the Template File: Open the copied template file in your child theme. Look for the Check out this post: How To Set Up Woocommerce Amazon Fulfillment code that includes the sidebar. This might look something like this:

 <?php /** Hook: woocommerce_sidebar.
 * @hooked woocommerce_get_sidebar - 10
 */ do_action( 'woocommerce_sidebar' ); ?>

4. Remove or Comment Out the Sidebar Code: You can either completely remove this section of code or comment it out by wrapping it in “ tags. For example:

 <?php /* /** Hook: woocommerce_sidebar.
 * @hooked woocommerce_get_sidebar - 10

*/ do_action( 'woocommerce_sidebar' ); */ ?>

5. Adjust the Layout: You may need to adjust the layout of the remaining content area in the template file to take up the full width of the page. This might involve modifying the HTML structure or CSS classes.

6. Save Your Changes: Save the modified template file in your child theme.

Reasoning: This method provides the most flexibility, allowing you to completely customize the category page layout. However, it requires more technical expertise. It’s also important to keep track of template changes in future WooCommerce updates to ensure your customizations remain compatible.

Testing Your Changes

After implementing any of these methods, always test your changes thoroughly. Check your WooCommerce category pages on different devices (desktops, tablets, and mobile phones) to ensure the layout looks as expected.

Conclusion

Removing the sidebar from your WooCommerce category pages can significantly improve the user experience and create a cleaner, more focused design. Choose the method that best suits your technical skills and the flexibility you need. Start with the easiest option (theme options) and work your way up to more advanced methods if necessary. By following these steps, you’ll be able to create category pages that are both visually appealing and effective at driving sales!