WooCommerce: How to Hide the Sidebar on Your Shop Page (Functions.php Method)
Introduction:
The sidebar on your WooCommerce shop page can be a useful place to display product categories, filters, and promotions. However, sometimes a cleaner, more focused look is desired. Removing the sidebar can improve the user experience, especially on mobile devices, and potentially increase conversion rates by eliminating distractions. There are several methods to achieve this, but this article will focus on using the `functions.php` file in your WordPress theme, giving you a code-based solution that can be easily customized and maintained. This method is particularly useful for those comfortable with a bit of code and who want a precise control over the layout. We’ll walk you through the process step-by-step, discussing the pros and cons of this method, and providing the code snippets you need to implement it.
Main Part: Hiding the Sidebar Using functions.php
Before we begin, it’s crucial to understand the risks involved when directly editing your theme’s `functions.php` file. Any errors in the code can break your website. Therefore, always create a child theme first! This allows you to make modifications without affecting the original theme files and ensures your changes won’t be overwritten during theme updates.
1. Create a Child Theme (If You Haven’t Already)
If you don’t have a child theme, follow these general steps:
- Create a new folder in your `wp-content/themes` directory. Name it something descriptive like `your-theme-child` (replace “your-theme” with your parent theme’s name).
- Inside this folder, create two files: `style.css` and `functions.php`.
- In `style.css`, add the following code:
- Replace `”Your Theme”`, `”http://example.com/your-theme-child/”`, `”Child theme for Your Theme”`, `”Your Name”`, `”http://example.com”`, and `”your-theme”` with your actual theme information.
- In the WordPress admin, go to Appearance > Themes and activate your child theme.
/*
Theme Name: Your Theme Child
Theme URI: http://example.com/your-theme-child/
Description: Child theme for Your Theme
Author: Your Name
Author URI: http://example.com
Template: your-theme
Version: 1.0.0
*/
@import url(“../your-theme/style.css”); /* Import the parent theme’s stylesheet */
2. Add Code to functions.php to Remove the Sidebar
Now that you have a child theme active, you can safely modify its `functions.php` file. The key is to check if you are on the shop page and, if so, remove the action that displays the sidebar. Most WooCommerce themes use actions like `woocommerce_sidebar` to render the sidebar. You need to remove this action conditionally.
Open the `functions.php` file in your child theme (e.g., using Appearance > Theme Editor in WordPress, or via FTP and a text editor) and add the following code:
<?php /**
Explanation:
- `remove_shop_sidebar()`: This is the function we’re creating to remove the sidebar.
- `if ( is_shop() )`: This conditional statement checks if the current page is the WooCommerce shop page.
- `remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 )`: This line is the core of the solution. It removes the `woocommerce_get_sidebar` function (which is responsible for displaying the sidebar) from the `woocommerce_sidebar` action. The ’10’ is the priority of the action.
- `add_action( ‘template_redirect’, ‘remove_shop_sidebar’ )`: This hook ensures that our function `remove_shop_sidebar` is executed before the page template is rendered, allowing us to remove the sidebar before it’s displayed.
Important Note:
- `woocommerce_sidebar` Check out this post: How To Make Woocommerce Responsive and `woocommerce_get_sidebar` are common action and function names, but they may vary depending on your theme. If this code doesn’t work, you’ll need to inspect your theme’s files (specifically `woocommerce.php`, `archive-product.php`, and potentially `sidebar.php`) to identify the correct action and function names responsible for displaying the sidebar. You can use your browser’s “Inspect Element” tool to help find the relevant code sections. Look for lines that add actions related to displaying the sidebar.
- The number `10` represents the priority of the action. You may need to adjust this if your theme uses a different priority.
3. Adjusting the Content Width
After removing the sidebar, the content area might be too narrow. You’ll likely need to adjust the content width to utilize the available space. This usually involves modifying your theme’s CSS. In your child theme’s `style.css`, add CSS to expand the main content area. The exact CSS will depend on your theme’s structure, but here’s an example:
.woocommerce #content,
.woocommerce-page #content {
width: 100%; /* Or a specific pixel value like 1200px */
float: none; /* Remove float if the original theme used floats */
margin: 0 auto; /* Center the content (optional) */
}
.woocommerce #sidebar,
.woocommerce-page #sidebar {
display: none; /* Ensure the sidebar is completely hidden */
}
Replace the `.woocommerce #content` and `.woocommerce-page #content` selectors with the appropriate selectors for your theme’s content area. Use your browser’s “Inspect Element” tool to find the correct CSS classes or IDs.
Conclusion:
Using `functions.php` to hide the sidebar on your WooCommerce shop page provides a powerful and flexible solution. By understanding the action/function names and using a child theme, you can customize the look and feel of your online store precisely. Remember to always back up your website before making significant code changes. By following these steps, you can effectively remove the sidebar, create a cleaner shop page layout, and potentially improve the user experience for your customers. This method gives you granular control over the layout and is a good choice for developers or users comfortable with code.
