Storefront Theme Archives - Business Bloomer

WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon.

Later on, I realized that that tiredness was something more serious – in fact I tested positive against COVID for the first time in my life, and I’m now in self-isolation hoping it won’t last long… Another 7 days without my kid – send help!

Anyhow, what really struck me at WCEU 2022, and based on various chats and some data that I’ll share below, is that the WooCommerce ecosystem is in trouble.

A nicer way to put that? WooCommerce is not moving forward as fast as it should, and unless some key issues are addressed right now, in a few years time we all may pay the consequences.

Please note, this is not a rant. It’s a proper analysis, full of actionable information.

@ WooCommerce team - if you're reading this - my plan is to give you constructive feedback and tell you what the community (really) thinks, needs and wants, so that you can get a better picture of the current situation. I know you've already started working on this, so this is just a recap/reminder and a way to get the whole community realigned.

In this post, I will share my worries, my fears, the current WooCommerce issues, some data I collected at WCEU 2022 and then a list of actionable solutions that may be implemented in order to clear the backlog and get back on track – asap. Enjoy!

WooCommerce: How to Add a Top Bar to Storefront Theme

The Storefront theme is one of the most popular WooCommerce themes. As of today, it has 200,000 active installations and 4.5/5 ratings, as well as a great overall performance.

But sure, you can’t win them all. Storefront is missing an important feature: the top bar. That’s a pity, because most ecommerce themes have either a dedicated widget area or somewhere you can add content in the theme options.

So, let’s go fix that. Here’s how to add a top bar with a background to your Storefront theme. Enjoy!

WooCommerce: Horizontal My Account Navigation Menu

The WooCommerce My Account pages feature a “left sidebar” navigation menu (by default, links are: “Dashboard”, “Orders”, “Downloads”, “Addresses”, “Account details”, “Logout”).

A cool (and easy) improvement may be moving such navigation to the top, and displaying it horizontally instead of vertically. You’d think this is a complex PHP customization… but you’ll feel great when you’ll notice you just need CSS for that.

Please note the CSS may change slightly based on your theme, in case it applies custom CSS to the default WooCommerce My Account navigation panel. I will list below a couple of solutions for default WooCommerce and for the Storefront theme, so at least you have an idea of what you could need in terms of tweaking it. Enjoy!

Storefront Theme: Edit or Remove Footer Credits

The Storefront theme developed by WooCommerce/Automattic comes with default footer credits content: “Built with Storefront & WooCommerce | Privacy Policy | Copyright Website 2020“.

Thankfully, this default content comes with “hooks”, so it’s possible to override such behavior without touching core files or duplicating templates. So, here are a few snippets you can use to edit or remove the Storefront theme copyright content. Enjoy!

WooCommerce: Show Empty Product Categories

By default, empty WooCommerce product categories (i.e. categories which have no published products) will not display on your Shop page.

This makes a lot of sense and avoids that customers land on empty pages… BUT sometimes you might have different needs and require that users still see these categories when the shop display is set to “Show Categories”.

Thankfully there is a quick one-line fix that you can copy / paste in your functions.php to show empty categories… enjoy!

WooCommerce + Storefront Theme: Hide Homepage Title

The Storefront theme displays the homepage H1 title by default, no matter if you use the “Default” or the “Homepage” page template.

Of course, you could do it via CSS, with a simple “display:none”. Even better, you could completely avoid loading the homepage title by using PHP (SEOs out there: better not to load an H1 than hiding it via CSS, right?).

So, how do they do it? Here’s the quick fix!

WooCommerce + Jetpack: Exclude Image From “Lazy Load”

If you don’t use an “Image Lazy Load” plugin, it’s time you install one. And if you happen to pick Jetpack’s free Lazy Load module, you probably did the right thing.

However, since I installed Jetpack Lazy Load, I noticed a little “jump” in my Storefront theme header section, where in fact there is an image – my Business Bloomer logo. The same might apply to any WooCommerce image: a category thumbnail, a single product featured image, a cart icon in the header, a homepage hero image, and so on.

Thankfully Jetpack has a useful “filter” you can tap into in order to exclude image classes from lazy loading (yes, I found this out today, it’s not that I know everything!). So, here’s the fix. Enjoy 🙂

Storefront Theme: How to Install and Configure It

Storefront is one of the most flexible and extensible theme when it comes to launching a WooCommerce store using WordPress.

Due to its clean code architecture it became hugely popular among users and currently more than 100,000 online stores uses Storefront as their WordPress theme.

Storefront Theme: How To Add A Full Width Slider

Storefront is great theme for launching an online store. It’s getting popular due to its simplicity and compatibility with WooCommerce. But one of the major drawback is it does not have a built-in slider section. Since it’s one of the most requested features of support forums in this tutorial we will demonstrate how to add a full-width slider to the StoreFront homepage using Storefront Add Slider plugin.

Using Storefront Add Slider you can add any slider shortcode (Meta Slider, Smart Slider 3, Soliloquy, Revolution Slider, LayerSlider shortcode) to your Storefront theme Frontpage. Let’s see how we can add a full width homepage slider. We will use the Meta Slider but the same process will apply to any slider plugin.

WooCommerce: Add an Icon to the Add to Cart Buttons

Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”.

So, how do you add an icon (or an HTML symbol) to the add to cart buttons in WooCommerce? This can be done in two ways – via CSS if you want to show Fontawesome Icons or via PHP if you prefer to use a simple HTML unicode symbol.

Let’s take a look at both methods!

WooCommerce: How to Customize Storefront Theme in a Few Clicks

If your WooCommerce website runs on Storefront theme (same as Business Bloomer), then you probably know it doesn’t come with a lot of customization options.

For developers like me, Storefront theme is ideal: it comes with many “hooks”, so that it’s easy to remove, move or add layout elements within a few lines of PHP.

But for those who do not develop or have no intention to waste time troubleshooting missing commas or fighting with FTP clients, well, there’s a plugin for that. And it’s developed and maintained by WooCommerce itself, so you can’t go wrong with the purchase and you’re guaranteed to have a fully working, up to date piece of software for the long term.

So, here’s a quick overview of what the plugin does. Enjoy!

Storefront Theme Extensions – The Complete List

The WooCommerce Storefront theme is quite basic, so sooner or later you’ll need to customize it to your needs. For this reason, I’ve written a thorough list of plugins you can install to immediately get that functionality that you wanted.

Storefront Theme: How to Customize Homepage Layout

Storefront is a free theme (with 100,000+ active install), developed & designed by WooCommerce Core Developers. I’ve put together a list of snippets so that you can quickly and easily customize your Storefront Homepage.

WooCommerce: How To Change Product Image Sizes

WooCommerce lets you resize the product images on Single Product and Shop pages from Appearance > Customize > WooCommerce > Product Images.

Besides, you don’t have to manually regenerate the images after resizing them with an additional plugin, as WooCommerce can crop, resize and automatically regenerate image sizes out of the box.

Despite this seems easy enough, it often happens that themes or plugins may override the “Customizer” settings, and even hide them entirely, which causes a lot of confusion.

In this post, we’ll take a look at the default WooCommerce image settings, and finally with a list of FAQ we’ll try to cover all possible scenarios in case you can’t find a solution. Got a question? Feel free to use the comment area!

Storefront Theme Visual Hook Guide

Here’s a visual hook guide for Storefront Theme by WooCommerce.

This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Also, you can copy & paste in seconds and speed up your customization time.

Let me know in the comments what you think about this resource! Enjoy!

WooCommerce: Hide “Showing x-y of z results” @ Shop Page

This is quite an annoying thing in WooCommerce when you have just a few products.

Besides, if you only have 1 product in a given category, the notice “Showing the Single Result” will appear on top of the category page.

So, how do we remove the whole “Showing 1–15 of 178 results” element from the Shop, Category, Tag and product loop? Here’s the fix. enjoy!