HomeЛюди и блогиRelated VideosMore From: MAX Website Design

How to Add a Sidebar to Storefront WooCommerce Theme

10 ratings | 2238 views
Storefront comes shipped with 1 sidebar. We want to add more sidebars so that we can provide relevant content based on the page content. Here are the steps (refer back to video for clarification if needed): 1. Copy sidebar.php from your storefront theme and place it in your child theme. Change the name of the file to sidebar-yourNewSidebar.php and alter the code on that page for your new sidebar name. My example: See Website for Code: https://maxwebsitedesign.com/website-development/add-sidebar-storefront-woocommerce-theme/ 2. In functions.php file of child theme, add the following code to register your sidebar (obviously change the names to what your sidebar is called): See Website for Code: https://maxwebsitedesign.com/website-development/add-sidebar-storefront-woocommerce-theme/ 3. Find the template files that you want to override and copy them to your child theme. Comment out (or delete) the previously registered sidebar and add your new sidebar: eg. I changed the archive.php file at the bottom: get_sidebar('sidebar2'); //do_action( 'storefront_sidebar' ); That should be it. Add sidebars and override your storefront theme template files to your heart's content. :)
Html code for embedding videos on your blog
Text Comments (12)
E Berg (1 year ago)
Thank you for this.. But is it also possible to change the side the sidebar is on? For example, on category pages , pages, posts , homepage i’m fine with the sidebar on the left side, but for the single product page i like in on the right side
MAX Website Design (1 year ago)
Hmmm if floating the sidebars doesn't work for each class then you'll have to play around with the CSS a bit more. Giving each sidebar its own class should allow you to position it as you wish, just a matter of getting all elements on the page to work nicely together :)
E Berg (1 year ago)
I also managed to add another class to the sidebar2 > <div id="secondary" class="widget-area classnew" role="complementary">
E Berg (1 year ago)
mmm not sure how to. I can switch it by editing .left-sidebar .content-area {float: left;}. But i cant figure out how to put sidebar1 (shown on category page) on the left and sidebar 2 (shown on product pages) on the right side..
MAX Website Design (1 year ago)
Yes. I believe I mention how to do that in the video. Just set an ID or Class and then float the sidebar with your CSS.
Devin Egger (1 year ago)
Thanks a million!!! This was the only tutorial i could find that accurately described how to do this! Day Saver!!!
MAX Website Design (1 year ago)
My pleasure... I just noticed that Youtube messed up the code that I put in the description, here's a website link if you need the code: https://maxwebsitedesign.com/website-development/add-sidebar-storefront-woocommerce-theme/
Marco de Obaldia (1 year ago)
Thank you for this info. I don't think Storefront is just minimalistic. I believe they remove functionality so that they can sell you plugins ...
Marco de Obaldia (1 year ago)
Absolutely! Your video DID help me. I was limited to having a sidebar on my store which I didn't want to even with their plugin ... Plus, one less plugin to add :) Thank you!
MAX Website Design (1 year ago)
Thank you for that info about their free plugin! I've found that one of the big problems with WooCommerce is that they don't have good search functionality on their own website! I searched many phrases for "sidebar, multiple sidebars, etc" and so no mention of this plugin. This plugin ultimately does what I did manually - ha! But hopefully my video will still help people that want to add additional sidebars in general, and show how to add them in different pages/areas as well. Thanks again!
Marco de Obaldia (1 year ago)
Agreed. I don't know PHP, but I've been doing HTML and CSS since around the time Gutenberg printed his first bible :) I used your instructions above, but I still had to tweak the code a bit more. If you haven't turned on the primary sidebar, all the pages show full content (makes sense). I only wanted a sidebar on the blog, so even after using your solution, the sidebar I added was being pushed down by the content (full width). So I created my own class in the "content-area" div to be able to show the sidebar and the content side by side. By the way it turns out that WooCommerce already has something similar to what you did (https://woocommerce.com/woosidebars/), but it didn't work for what I wanted to do ... the sidebar I wanted on the blog was also showing on my store ... That's no bueno. Thanks again! The Storefront constraints were driving me crazy. I'm still working on it. Take a look https://thinkdoodledo.com
MAX Website Design (1 year ago)
haha... that definitely is one way to look at it! Fortunately I have the skills to add most of the functionality I need without buying plugins. I bought the "powerpack" bundle for this one though, "$69" I think just to make my job a little easier for minor CSS changes however. Doesn't add a lot of bloat like many of the "WooCommerce Themes" out there. If you're unfamiliar with how to modify WordPress then yes, you could end up spending a few hundred in plugins to get where you want to be and maybe at some point even nullifying the reason you bought the 'bare-bones' theme to begin with!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.