How to Make Your WooCommerce Shop Page Use a Template with a Sidebar (Beginner’s Guide)
Want to add a sidebar to your WooCommerce shop page? You’re in the right place! While WooCommerce offers a basic shop page out of the box, often you’ll want more control over its layout. Adding a sidebar can significantly improve the user experience, allowing you to display product categories, filters, promotions, or other helpful information right alongside your products.
This guide walks you through how to achieve this, even if you’re new to WordPress and WooCommerce development. We’ll avoid complex coding and focus on practical, easy-to-understand solutions.
Why Add a Sidebar to Your WooCommerce Shop Page?
Think of it this way: imagine walking into a physical store with neatly organized shelves, but no clear signage or helpful staff. You’d probably feel lost and struggle to find what you’re looking for. A sidebar acts as that signage and helpful staff for your online store.
Here’s why adding a sidebar is a good idea:
- Improved Navigation: A sidebar allows customers to easily browse product categories or filter by price, size, or color.
- Enhanced Visibility: You can highlight special offers, new arrivals, or best-selling products in the sidebar.
- Increased Engagement: Use the sidebar to display blog posts related to your products, encourage email subscriptions, or promote social media profiles.
- Better User Experience: A well-designed sidebar makes your shop page more informative and engaging, leading to a better overall shopping experience.
- Start by creating a two-column layout. The larger column will hold your product listings, and the smaller column will be your sidebar.
- Drag and Drop “WooCommerce Products” Widget: In the larger column, drag the “WooCommerce Products” widget from the Elementor editor. Configure this widget to display your products in the desired format (e.g., number of columns, products per page, sorting options).
- Add Widgets to the Sidebar: In the smaller column, drag and drop widgets like “Product Categories,” “Product Filters (if Elementor Pro)”, “Search,” “Recent Products,” or custom HTML to create your sidebar.
- Product Categories: Rings, Necklaces, Earrings, Bracelets
- Price Filter: A slider allowing customers to filter products by price.
- Material Filter: A checkbox list allowing customers to filter by materials like silver, gold, and gemstones.
- Featured Jewelry Piece: A striking image showcasing your latest creation.
- Add Sidebar Markup: Find the code that displays the product loop (typically within a `woocommerce_content()` function call or similar). Wrap this code within a `div` that represents the main content area. Then, create another `div` for the sidebar.
Method 1: Using a Page Builder Plugin (Easiest for Beginners)
The simplest way to create a custom shop page template with a sidebar is by using a page builder plugin like Elementor, Beaver Builder, or Divi. These plugins offer drag-and-drop interfaces, making it easy to design custom layouts without writing any code.
Let’s use Elementor as an example:
1. Install and Activate Elementor and Elementor Pro (Optional, but Recommended): If you’re using Elementor, having the Pro version gives you access to the WooCommerce widgets you need for creating custom shop pages.
2. Create a New Template: Go to Templates -> Theme Builder in your WordPress dashboard.
3. Choose “Archive” Template Type: Select the “Archive” template type. This tells Elementor that you’re creating a template for archive pages, including your WooCommerce shop page.
4. Design Your Shop Page:
5. Publish Your Template: Click the “Publish” button. Elementor will ask you where you want to display this template. Select “Product Archive” (or similar option, depending on your Elementor version) to apply it to your WooCommerce shop page. You might need to specify further conditions (e.g., display on all product archive pages).
Example: Imagine you sell handmade jewelry. You could use the sidebar to display:
Method 2: Customizing Your Theme’s `archive-product.php` (For More Advanced Users)
This method requires a bit more technical know-how, as it involves editing your theme’s files. Important: Always back up your theme before making any changes.
1. Create a Child Theme: Do not edit your parent theme directly! Creating a child theme is crucial. Any changes you make to the parent theme will be overwritten when it’s updated. Search online for “how to create a wordpress child theme” for detailed instructions.
2. Copy `archive-product.php` to Your Child Theme: Locate the `archive-product.php` file in your parent theme’s WooCommerce directory (usually `/wp-content/themes/[your-parent-theme]/woocommerce/archive-product.php`). Copy this file to the same directory structure within your child theme (`/wp-content/themes/[your-child-theme]/woocommerce/archive-product.php`). If your parent theme doesn’t have this file, copy the file from `woocommerce/templates/archive-product.php` into the directory in the Child Theme structure.
3. Modify `archive-product.php`: Edit the `archive-product.php` file in your child theme.
<?php /**Hook: woocommerce_before_main_content. * @hooked woocommerce_output_content_wrapper_start - 10 (outputs opening divs for the content) @hooked woocommerce_breadcrumb - 20 @hooked WC_Structured_Data::generate_product_data() - 30 */ do_action( 'woocommerce_before_main_content' ); ?><?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 divs for the content)
*/
do_action( ‘woocommerce_after_main_content’ );
?>
- Call `get_sidebar()`: Within the sidebar `div`, add “. This function will load the `sidebar.php` file from your theme.
4. Customize `sidebar.php` (Optional): If your theme doesn’t have a `sidebar.php` file, you can create one in your child theme. This file defines the content that will be displayed in your sidebar. You can add widgets, custom HTML, or any other content you want. WordPress usually comes with default sidebar, but you can always create a new one and asign to this template.
5. Add CSS Styling: Finally, add CSS to your child theme’s `style.css` file to style the layout. Ensure the main content and sidebar are properly aligned and responsive.
Example: Let’s say you’re selling clothing. In your `sidebar.php`, you could add:
- Product Categories: Men’s Clothing, Women’s Clothing, Kids’ Clothing
- Size Filter: (Using a plugin or custom code) XS, S, M, L, XL
- Color Swatches: (Using a plugin or custom code) Displaying color options as clickable swatches.
Key Takeaways
- Start with Page Builders: For beginners, page builders like Elementor offer the easiest and most flexible way to create custom shop page layouts.
- Child Themes are Essential: When customizing theme files, always use a child theme to prevent your changes from being overwritten.
- Consider Responsiveness: Make sure your shop page and sidebar look good on all devices (desktops, tablets, and smartphones). Test and adjust your layout and styling as needed.
- Optimize for SEO: Include relevant keywords in your sidebar content and ensure your page loads quickly for a better search engine ranking.
By following these steps, you can easily add a sidebar to your WooCommerce shop page and create a more engaging and user-friendly shopping experience for your customers. Good luck!
