Removing the Side Menu (Sidebar) from Your WooCommerce Store: A Beginner’s Guide
So, you’ve got a WooCommerce store and you’re rocking the sales (hopefully!). But maybe you’re not happy with that side menu, also known as the sidebar, hogging space and potentially distracting your customers. You’re not alone! Many store owners want a cleaner, more focused look for their product pages, and that often involves getting rid of the sidebar.
This guide will walk you through several methods to remove the WooCommerce sidebar, from simple theme settings to a bit of code tweaking. Don’t worry, we’ll keep it newbie-friendly!
Why Remove the WooCommerce Sidebar?
Before diving in, let’s understand *why* you might want to remove the sidebar in the first place.
- Clean Design: A clutter-free layout can improve the overall aesthetic appeal of your store. Think of Apple’s website: minimalist and focused on the product.
- Improved Conversion Rates: Removing distractions like unnecessary widgets in the sidebar can lead customers directly to the “Add to Cart” button, increasing your sales. Imagine a customer clicking through countless categories in the sidebar instead of buying that awesome t-shirt!
- Better Mobile Experience: Sidebars can shrink down to a cramped mess on smaller screens. Removing it ensures your product pages are clear and easy to navigate on mobile devices.
- Full-Width Product Presentation: Display your products with more prominence. Removing the sidebar lets you use the full width of the screen, making product images larger and more appealing.
Method 1: Theme Options (The Easiest Way!)
Most modern WordPress themes, especially those designed for WooCommerce, offer built-in options to control the layout of your pages. This is the simplest and recommended approach if available.
1. Log in to your WordPress dashboard.
2. Navigate to Appearance > Customize.
3. Look for options like “Layout,” “Sidebar,” “Blog Settings,” or something similar. The exact wording will vary depending on your theme.
4. Within those options, you should find a setting to disable the sidebar on specific pages (like your shop page, product pages, or categories). Often, you’ll have choices like “Full Width,” “Left Sidebar,” or “Right Sidebar.” Select “Full Width” or an option that removes the sidebar.
Example: Many popular themes like Astra, OceanWP, and GeneratePress provide these options directly in the customizer. You might find the sidebar settings under “Layout” > “WooCommerce” or “Layout” > “Pages.”
Reasoning: This is the safest and easiest way. Theme developers have tested these options, ensuring compatibility and proper display.
Method 2: Page-Specific Layout Settings
Sometimes you want to remove the sidebar only on *certain* WooCommerce pages, like your main shop page, but keep it on others, like your blog. Many themes allow you to specify the layout on a per-page basis.
1. Go to Pages in your WordPress dashboard.
2. Find the page you want to modify (e.g., your “Shop” page).
3. Edit the page.
4. Look for a “Layout” or “Sidebar” setting in the page editor itself. This is often found in a meta box below the main content editor, or within the page settings in the Gutenberg editor.
5. Choose “Full Width” or an option that removes the sidebar for that specific page.
Example: If you’re using the Gutenberg editor, look for a “Page Attributes” panel in the sidebar on the right. You might find a “Template” option that lets you select a “Full Width” template.
Reasoning: This gives you granular control over your layout. You can tailor the appearance of each page to best suit its content.
Method 3: Using a Plugin
If your theme lacks the built-in options mentioned above, a plugin can help. A plugin can provide more robust control over your website’s layout without requiring you to touch code.
1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for “Fullwidth Templates,” “Remove Sidebar,” or “WooCommerce Layout.”
3. Install and activate the plugin.
4. Follow the plugin’s instructions. Many plugins will add new options to your theme customizer or page editor, allowing you to control the sidebar on various pages.
Example Plugin: “Fullwidth Templates for Any Theme & Page Builder” is a popular choice. It adds full-width templates to your pages that you can easily select.
Reasoning: Plugins offer a non-technical solution when your theme is limited. Be careful to choose a well-reviewed and actively maintained plugin.
Method 4: Adding Custom Code (For the More Adventurous!)
This method involves adding code to your theme’s `functions.php` file or using a code snippets plugin. This is generally NOT recommended for beginners unless you are comfortable with PHP and understand the risks of modifying theme files. It’s crucial to back up your site before making any code changes.
<?php /**
/
* Modify WooCommerce Theme Support to Declare Fullwidth support if missing.
* Otherwise, declare new theme support.
*/
function declare_woocommerce_support() {
global $woocommerce;
if ( version_compare( $woocommerce->version, ‘3.0’, “>=” ) ) {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}
/
* WooCommerce Theme Support
*/
add_theme_support( ‘woocommerce’, array(
‘product_grid’ => array(
‘default_rows’ => 4,
‘min_rows’ => 4,
‘max_rows’ => 4,
‘default_columns’ => 3,
‘min_columns’ => 3,
‘max_columns’ => 3,
),
) );
/
* WooCommerce Theme Support
*/
add_theme_support( ‘woocommerce’, array(
‘single_image_width’ => 600,
‘thumbnail_image_width’ => 300,
‘gallery_thumbnail_image_width’ => 100,
‘product_grid’ => array(
‘default_rows’ => 4,
‘min_rows’ => 4,
‘max_rows’ => 4,
‘default_columns’ => 3,
‘min_columns’ => 3,
‘max_columns’ => 3,
),
) );
}
add_action( ‘after_setup_theme’, ‘declare_woocommerce_support’);
/
* Conditionally Declare Fullwidth if missing from current theme
*/
function declare_woocommerce_template() {
if ( ! is_page_template( ‘page-templates/fullwidth.php’ ) ) {
get_template_part( ‘template-parts/content’, ‘woocommerce-fullwidth’ );
}
}
add_action(‘template_include’, ‘declare_woocommerce_template’, 99);
?>
Explanation:
- `remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );` This line unhooks the function that displays the sidebar from WooCommerce.
- `is_shop() || is_product_category() || is_product_tag()` This condition makes sure the sidebar is only removed on the shop page, product category pages, and product tag pages.
- `add_action( ‘woocommerce_before_main_content’, ‘remove_woocommerce_sidebar’ );` This hooks our function to run before the main content, ensuring the sidebar is removed before anything else is displayed.
- The other functions declare WooCommerce support and conditionally declares a fullwidth template if the current theme is missing.
How to Use (with caution!):
1. Backup your website!
2. Access your theme’s `functions.php` file: This can be done through FTP or the WordPress theme editor (Appearance > Theme Editor). Be extremely careful when using the theme editor, as incorrect changes can break your site.
3. Alternatively, use a code snippets plugin: Search for “Code Snippets” in the WordPress plugin repository. This is a safer way to add custom code without directly modifying theme files.
4. Add the code snippet to your `functions.php` file (or through the Code Snippets plugin). Place it at the end of the file, before the closing `?>` tag (if present).
5. Save the file.
6. Test your site: Visit your WooCommerce shop page to see if the sidebar is gone.
Reasoning: This method provides the most control, but it also comes with the highest risk. Use it only if you have a good understanding of PHP and WordPress themes.
Important Considerations:
- Child Theme: If you are using a premium theme, it’s always recommended to create a child theme and make your changes there. This prevents your customizations from being overwritten when you update your parent theme.
- Theme Updates: Be aware that theme updates can sometimes revert your changes, especially if you’ve modified the `functions.php` file directly. Always recheck your customizations after updating your theme.
- Testing: After making any changes, thoroughly test your website on different devices (desktop, tablet, mobile) to ensure everything looks as expected.
Conclusion
Removing the WooCommerce sidebar can significantly improve the user experience of your online store. Start with the easiest methods (theme options or page-specific settings) and only resort to code editing if necessary. By following these steps, you can create a cleaner, more focused online shopping experience for your customers, leading to increased engagement and, hopefully, more sales! Good luck!
