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!

Continue reading WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

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!

Continue reading WooCommerce: How to Add a Top Bar to Storefront Theme

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!

Continue reading Storefront Theme: Edit or Remove Footer Credits

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!

Continue reading WooCommerce: Show Empty Product Categories

Storefront Theme: How To Remove Breadcrumbs

Storefront is the most compatible theme when it comes to building a WordPress eCommerce website. Following the best practices Storefront displays Breadcrumb navigation at the top of every product pages. But some store owners think they are better off without this extra navigation item.

In this tutorial, we will see how we can completely remove breadcrumb navigation from Storefront WooCommerce theme.

Continue reading Storefront Theme: How To Remove Breadcrumbs

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!

Continue reading WooCommerce + Storefront Theme: Hide Homepage Title

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 🙂

Continue reading WooCommerce + Jetpack: Exclude Image From “Lazy Load”

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.

Continue reading Storefront Theme: How To Add A Full Width Slider

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!

Continue reading WooCommerce: Add an Icon to the Add to Cart Buttons

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!

Continue reading WooCommerce: How to Customize Storefront Theme in a Few Clicks

WooCommerce: How To Change Product Image Size

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!

Continue reading WooCommerce: How To Change Product Image Size

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!

Continue reading Storefront Theme Visual Hook Guide

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!

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