Divi WooCommerce: How to Remove the Sidebar and Create a Stunning Shop
Are you using Divi and WooCommerce to create a beautiful online store? Great choice! But sometimes, that pesky sidebar can feel cluttered and unnecessary, especially when you want a clean, modern look. Don’t worry, removing it is easier than you think! This guide will walk you through how to remove the sidebar in your Divi WooCommerce shop step-by-step, even if you’re a complete beginner.
Think of it this way: Imagine you’re designing a physical store. Do you want customers distracted by unnecessary shelves or displays? No! You want them focused on the products. The same applies to your online store. Removing the sidebar can create a more streamlined and engaging shopping experience.
Why Remove the WooCommerce Sidebar in Divi?
The default WooCommerce setup often includes a sidebar with widgets like product categories, recent reviews, and search bars. While these can be helpful, they can also:
- Distract customers: Too much information can lead to decision paralysis.
- Make your site look cluttered: A clean, minimalist design often converts better.
- Reduce the focus on your products: You want your products to be the stars of the show!
- Take up valuable screen real estate: Especially important on mobile devices.
- All Product Pages: Removes the sidebar from all individual product pages.
- Shop Page: Removes the sidebar from your main shop page.
- Product Category Pages: Removes the sidebar from category listing pages.
- Specific Products/Categories: For highly targeted control.
- Specificity: Make sure your CSS is specific enough to override the default styles. Using `!important` can help, but it’s best to understand CSS specificity.
- Testing: Always test your changes in a Learn more about How To Integrate Woocommerce staging environment before applying them to your live site.
- Shop Page: Is the sidebar removed?
- Product Pages: Are the product pages full-width?
- Category Pages: Are the category pages displaying correctly?
- Mobile Responsiveness: Does the site look good on different screen sizes?
By removing the sidebar, you can create a more focused and visually appealing shopping experience, ultimately leading to increased sales.
Method 1: Using Divi Theme Options (Global Removal)
This method removes the sidebar globally from all your WooCommerce pages (shop page, product pages, category pages, etc.). This is often the easiest and most efficient approach.
1. Access Divi Theme Options: In your WordPress dashboard, navigate to Divi > Theme Options.
2. Navigate to the WooCommerce Tab: Click on the “WooCommerce” tab.
3. Change the Product Page Layout: Look for the option labeled “Product Page Layout”.
4. Select “Fullwidth”: From the dropdown menu, choose “Fullwidth”.
5. Save Changes: Click the “Save Changes” button at the bottom of the page.
Example: Let’s say you’re selling handcrafted jewelry. You want your product photos to be large and prominent, showcasing the intricate details. Removing the sidebar allows these photos to take center stage, capturing the customer’s attention immediately.
Method 2: Using the Divi Theme Builder (More Control)
The Divi Theme Builder allows for much more granular control. You can create custom templates for different WooCommerce pages (e.g., different templates for product pages vs. category pages). This is ideal if you want a sidebar on some pages but not others.
1. Access the Divi Theme Builder: In your WordPress dashboard, go to Divi > Theme Builder.
2. Add a New Template: Click “Add New Template”.
3. Assign the Template to WooCommerce Pages: Choose where you want to apply this template. You can select:
4. Create the Template: Click “Create Template”.
5. Add a Custom Body: Explore this article on How To Add Customize Woocommerce Product Search To Stores Click “Add Custom Body” and then “Add From Scratch”.
6. Insert a Fullwidth Section: Add a new section and choose the “Fullwidth” layout.
7. Add a “Woo Products” Module: Inside the fullwidth section, add a new module and search for “Woo Products”. Configure it as needed (number of columns, products to display, etc.).
8. Save Your Changes: Click the green “Save” button at the bottom of the page and then the “Save Changes” button in the Theme Builder.
Reasoning: The Theme Builder provides flexibility. Maybe you want a sidebar on category pages to help customers filter products, but you want a clean, distraction-free layout on individual product pages to maximize conversions.
Method 3: Using Custom CSS (For Advanced Users)
If you’re comfortable with CSS, you can use this method to hide the sidebar. This method is generally not recommended for beginners as incorrect CSS can break your site’s layout.
1. Identify the Sidebar’s CSS Class or ID: Use your Explore this article on Woocommerce How To Change Price Of Product browser’s developer tools Read more about How Do I Add Payment Options To Woocommerce Payment Methods (usually by right-clicking on the sidebar and selecting “Inspect”) to find the CSS class or ID associated with the sidebar container. Common names include `.et_pb_widget_area`, `.sidebar`, or `#sidebar`.
2. Add Custom CSS: Go to Divi > Theme Options > General and scroll down to the “Custom CSS” section.
3. Paste the CSS Code: Add the following CSS code, replacing `YOUR_SIDEBAR_SELECTOR` with the actual class or ID you found:
#page-container #left-area, #page-container #right-area {
display: none !important;
}
#page-container #content-area {
width: 100% !important;
}
/* Replace YOUR_SIDEBAR_SELECTOR with the correct class/ID */
/* .YOUR_SIDEBAR_SELECTOR {
display: none !important;
} */
4. Save Changes: Click the “Save Changes” button.
Important Notes for CSS:
Method 4: Using a Plugin (Not Recommended if other methods work)
While plugins exist that can remove sidebars, they often add unnecessary bloat to your site. It’s generally better to use the built-in Divi options or custom CSS unless you have a very specific and complex need.
Testing Your Changes
After implementing any of these methods, it’s crucial to test your WooCommerce pages to ensure the sidebar is gone and your site looks as intended. Check:
Conclusion
Removing the sidebar in your Divi WooCommerce store is a simple yet effective way to create a more streamlined and engaging shopping experience. By following these steps, you can easily customize your store’s layout and highlight your products in the best possible light. Choose the method that best suits your skill level and desired level of control, and get ready to see your sales soar! Remember to always back up your site before making significant changes. Good luck!
