How to Show Sidebar in WooCommerce Shop Page: A Beginner’s Guide
One of the most common customizations WooCommerce store owners want to make is displaying a sidebar on their shop page. A sidebar provides valuable space to showcase product categories, filter options, featured products, or even display promotions and advertisements. But sometimes, it’s mysteriously missing! This guide will walk you through how to get it back (or add it) in a clear and easy-to-understand way, even if you’re new to WordPress and WooCommerce.
Why is a Sidebar Useful on a Shop Page?
Think of a physical store. A sidebar is like the helpful signs directing customers to different departments. On your online store, it:
- Improves Navigation: Customers can easily filter products by category, price, attributes (like size or color), and ratings.
- Enhances User Experience: Provides extra information, like related products or recently viewed items.
- Boosts Conversions: Strategic placement of promotions, trust badges, or call-to-actions can encourage sales.
- Looks more professional: It give a more complete look to the site, preventing users from feeling something is missing
Checking Your WooCommerce Settings
Before diving into code, let’s check the basics. Sometimes, the sidebar is disabled by accident.
1. Check Your Theme Options: Many themes come with built-in options to enable/disable sidebars on specific pages, including the shop page. Navigate to Appearance > Customize in your WordPress dashboard. Look for sections like “Layout,” “Sidebar,” or “WooCommerce Settings.” The exact location will vary depending on your theme. Check if there’s an option to enable the sidebar on shop pages.
* Real-life Example: The popular Astra theme has a “Sidebar” section under “Layout” in the Customizer, where you can specify the sidebar layout for different page types, including the WooCommerce shop page.
2. Check Your WordPress Widget Areas: Go to Appearance > Widgets. Ensure you have widgets added to the “Shop Sidebar” widget area (or similar name, depending on your theme). If the sidebar is empty, it won’t display.
* Reasoning: WordPress uses widget areas (also called sidebars) as containers for adding elements like categories, recent posts, and custom content blocks.
Using Code to Show the Sidebar
If the theme settings and widget areas are configured correctly, but the sidebar is still missing, you might need to add some code. This is the most common scenario when a theme doesn’t explicitly support a sidebar on the shop page.
Important: Before making any changes to your theme’s files, it’s strongly recommended to create a child theme. Discover insights on Woocommerce Order Subscription Export Import Github How To Install This prevents your customizations from being overwritten when you update your parent theme. If you are not able to use child theme, use plugin like “Code Snippets”, that allows to add php code without editing theme’s files.
Steps:
1. Locate `archive-product.php` (or a similar template file):
* The WooCommerce shop page is typically rendered using the `archive-product.php` file in your theme’s WooCommerce folder. If this file doesn’t exist in your theme, it might be using the default WooCommerce template.
* If you’re using a child theme, create a `woocommerce` folder within your child theme. Then copy the `archive-product.php` file from the parent theme into this folder (if it exists there). If the `archive-product.php` doesn’t exist in the main theme, you can create a copy of the `woocommerce.php` (you can find it in `wp-content/plugins/woocommerce/templates/`).
2. Add Code to Display the Sidebar:
Open the `archive-product.php` file in your child theme (or plugin like “Code Snippets” if you don’t use child theme) and add the following code where you want the sidebar to appear. This usually goes *after* the opening `woocommerce_content()` tag or similar. *Before* the closing tag
<?php /**
defined( ‘ABSPATH’ ) || exit;
get_header( ‘shop’ );
/
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper – 10 (outputs opening tags for the content)
* @hooked woocommerce_breadcrumb – 20
* @hooked WC_Structured_Data::generate_product_archive_data() – 30
*/
do_action( ‘woocommerce_before_main_content’ );
?>
<?php
/
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description – 10
* @hooked woocommerce_product_archive_description – 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
<?php
if ( woocommerce_product_loop() ) {
/
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices – 10
* @hooked woocommerce_result_count – 20
* @hooked woocommerce_catalog_ordering – 30
*/
do_action( ‘woocommerce_before_shop_loop’ );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( ‘total’ ) ) {
while ( have_posts() ) {
the_post();
/
* Hook: woocommerce_shop_loop.
*/
do_action( ‘woocommerce_shop_loop’ );
wc_get_template_part( ‘content’, ‘product’ );
}
}
woocommerce_product_loop_end();
/
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
} else {
/
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found – 10
*/
do_action( ‘woocommerce_no_products_found’ );
}
/
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end – 10 (outputs closing tags for the content)
*/
do_action( ‘woocommerce_after_main_content’ );
/
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar – 10
*/
do_action( ‘woocommerce_sidebar’ );
get_footer( ‘shop’ );
The important part is to call this action:
/**
Place this at the very end, after the content section ends. This will display the WooCommerce sidebar if it has widgets. If your theme has a custom sidebar, call the function that displays your theme’s sidebar here instead (e.g., `get_sidebar()`).
Explanation:
- `do_action( ‘woocommerce_sidebar’ )`: This is a WooCommerce hook. Themes are expected to use this hook to display the sidebar. By adding this action, you’re telling WooCommerce to display the sidebar if it’s available.
3. Adjust Layout (if necessary): The sidebar will likely appear, but you may need to adjust the layout. The easiest way is to wrap the main content and the sidebar in a container with flex or use CSS grid.
Then, add the CSS to your theme or child theme’s stylesheet (or using the Customizer’s “Additional CSS”):
.shop-container {
display: flex; /* Or use grid: display: grid; grid-template-columns: 2fr 1fr; */
}
.main-content {
flex: 2; /* Adjust as needed */
}
.sidebar {
flex: 1; /* Adjust as needed */
}
Reasoning: This CSS code will create a two-column layout, where the main product content takes up two-thirds of the width, and the sidebar occupies one-third.
Troubleshooting
- Sidebar Still Not Showing? Double-check that you’ve uploaded the modified `archive-product.php` to the correct location in your child theme.
- Code Snippet not working: Make sure that “Code Snippets” plugin is active. Be careful because the plugin can crash the website, so keep an eye on it.
- Theme Updates Overwriting Changes? This is why using a child theme is crucial. Your changes won’t be affected by parent theme updates.
- Conflicting Plugins? Deactivate other plugins (especially those related to WooCommerce customization) one by Check out this post: How To Change Checkout Fields Woocommerce one to see if any of them are interfering with the sidebar.
Conclusion
Showing a sidebar on your WooCommerce shop page is essential for improving navigation and enhancing user experience. By following these steps, you can easily add or restore the sidebar, making your online store more user-friendly and increasing your chances of converting visitors into customers. Remember to always back up your website before making any changes to the code!
