How To Remove Sidebar From Woocommerce Product Category Page

How to Remove the Sidebar from Your WooCommerce Product Category Pages (Easy Guide for Newbies)

You’ve got a beautiful WooCommerce store, meticulously crafted product pages, but that pesky sidebar keeps popping up on your product category pages, cluttering the layout and distracting your customers? Don’t worry, you’re not alone! Many store owners face this issue. A cluttered page can decrease conversions because customers are overwhelmed. This guide will show you how to remove the sidebar from your WooCommerce product category pages, resulting in a cleaner, more focused shopping experience. We’ll keep it simple and beginner-friendly, so no need to be intimidated!

Why Remove the Sidebar from Product Category Pages?

Imagine you’re in a physical store browsing the “T-shirts” section. You wouldn’t want a massive display of “Home Decor” items smack in the middle, right? It’s the same online! A sidebar can:

Distract customers: They might click away to a completely different part of your site.
Decrease visual appeal: A cluttered layout can look unprofessional.
Reduce mobile responsiveness: Sidebars often get crammed at the bottom of the page on mobile devices, pushing your products further down.
Improve Page Load Speed: Removing unnecessary elements, like the sidebar, can potentially improve your website’s loading time.

Removing the sidebar can create a cleaner, more focused view of your products, encouraging customers to browse and buy more.

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

The simplest way to remove the sidebar is often through your theme’s options panel. Most modern WordPress themes, especially those designed for WooCommerce, have built-in settings to control the layout of different page types.

1. Log in to your WordPress dashboard.

2. Navigate to Appearance > Customize. (The exact location might vary slightly depending on your theme.)

3. Look for options related to “Layout,” “Sidebar,” “WooCommerce,” or “Shop.” Examples might include:

“Shop Page Layout”
“Category Page Settings”
“Sidebar Placement”

4. Within these settings, you should find an option to disable or remove the sidebar on category pages. This might be a dropdown menu where you can select “No Sidebar” or a checkbox to “Disable Sidebar.”

5. Save your changes. Click the “Publish” button at the top of the Customizer.

Example: Many popular themes like Astra, OceanWP, and GeneratePress provide these options directly in the Customizer.

Method 2: Using CSS (For Targeted Removal)

If your theme doesn’t offer a direct option to remove the sidebar, you can use CSS to hide it. This is slightly more technical, but still very manageable.

1. Identify the CSS class or ID of your sidebar. The easiest way to do this is using your browser’s “Inspect” tool (right-click on the sidebar in your browser and select “Inspect” or “Inspect Element”). Look for something like `

`. The `id` and `class` attributes are what we need.

2. Go to Appearance > Customize > Additional CSS.

3. Add the following CSS code, replacing `#secondary` or `.widget-area` with the actual class or ID of your sidebar:

/* Hide the sidebar on WooCommerce category pages */

.woocommerce-term #secondary {

display: none;

}

/* Adjust the main content area to fill the space */

.woocommerce-term #primary {

width: 100%; /* Make the main content take up the full width */

}

Explanation:

`.woocommerce-term`: This targets the category pages specifically. It is an important part, because we don’t want to affect other pages.
`#secondary` (replace with your sidebar’s ID) or `.widget-area` (replace with your sidebar’s class): This selects the sidebar element.
`display: none;`: This hides the sidebar.
`#primary` (replace with your main content’s ID): This targets the main content area of your page.
`width: 100%;`: This makes the main content take up the full width of the page, now that the sidebar is gone.

4. Save your changes. Click the “Publish” button.

Real-life example: Suppose the `id` of your sidebar is `sidebar-primary`. You would then use `#sidebar-primary` in the CSS.

Important:

Test on different screen sizes: After applying the CSS, check your category pages on different devices (desktop, tablet, mobile) to make sure the layout looks good. You might need to adjust the CSS further for optimal responsiveness.
Be specific: The `.woocommerce-term` selector is crucial to ensure you only remove the sidebar on category pages and not on other pages of your website.

Method 3: Using a Child Theme and Template Modification (More Advanced)

This method involves creating a child theme and modifying the WooCommerce template files. It’s more complex but provides the most control. This is generally recommended for experienced users only.

1. Create a Child Theme: This prevents your changes from being overwritten when the parent theme is updated. There are plugins that can help you create a child theme, or you can do it manually.

2. Copy the `archive-product.php` file from the `woocommerce` folder of your parent theme to the `woocommerce` folder in your child theme. You’ll find the WooCommerce template files inside the WooCommerce plugin directory `/wp-content/plugins/woocommerce/templates/`.

3. Open the `archive-product.php` file in your child theme and remove the line that includes the sidebar. This line typically looks something like this:

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

You can simply comment out the `do_action( ‘woocommerce_sidebar’ );` line by adding `//` in front of it:

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

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

4. Adjust the content area: You’ll likely need to adjust the width of the content area in your child theme’s CSS file to take up the full width now that the sidebar is gone.

Why use a child theme? Because it’s the WordPress best practice to avoid directly modifying core theme files. When your parent theme receives an update, all your changes would be lost!

In Conclusion:

Removing the sidebar from your WooCommerce product category pages is a simple way to improve the shopping experience for your customers. Start with Method 1 (theme options) if possible. If not, Method 2 (CSS) is a great alternative. Only use Method 3 (child theme and template modification) if you’re comfortable working with code and understand the risks involved. Happy selling!

How to Remove the Sidebar from Your WooCommerce Product Category Pages (Easy Guide for Newbies)

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

Method 2: Using CSS (For Targeted Removal)

Comments

Leave a Reply Cancel reply