Gutenberg Archives - Business Bloomer

WooCommerce Block Theme: Aiming to Replace Storefront?

purple, nature, sunset, darling, see, clouds

In a recent Business Bloomer Club Slack thread, members reacted to a new announcement from WooCommerce about their upcoming “Woo Block Theme” — a next-generation block-based theme meant to modernize store design and functionality.

According to Woo’s developer blog, the new theme will offer a fast, modern experience fully built on Full Site Editing (FSE), which is now considered the future of WordPress theming.

This initiative seems aimed at replacing Storefront, WooCommerce’s official theme since 2014. But that’s no small challenge. While Storefront is showing its age in terms of design and layout, it’s still regarded as the safest default: stable, lean, commerce-ready, and built with Woo’s own priorities in mind.

The conversation among Club members touched on the GitHub preview, current limitations, what store owners really want, and whether the new theme can strike the right balance between simplicity and control — the very thing that made WooCommerce appealing in the first place.

WooCommerce Blocks: The Extensibility Challenge

In the fast-evolving landscape of ecommerce, WooCommerce has long stood out as a flexible and powerful platform, largely thanks to its deep extensibility. Developers (like myself), agencies, and store owners have historically leveraged its robust hook system to customize virtually every aspect of an online store.

However, with the advent of block-based editing and the new Cart and Checkout blocks, a palpable tension has emerged within the community. This shift, while promising a more streamlined user experience, has inadvertently created new hurdles for those who build and extend on the platform.

The very superpower of effortless customization, once a hallmark of WooCommerce, seems to have been diminished, leading to a crucial conversation about the future direction of the platform and its commitment to the developer ecosystem.

This was vividly illustrated in a WooCommerce Slack “office hours” session held just yesterday, where core block developers were present, and numerous passionate community developers participated.

The discussion went through the heart of these concerns, exploring the challenges faced by extension developers and the urgent call for renewed focus on developer-centric extensibility.

Should There Be a “Classic WooCommerce” Plugin?

A lineup of vintage cars parked outdoors surrounded by palm trees on a sunny day.

In a recent Twitter thread, I asked why no one had yet built a “Classic WooCommerce” plugin — something akin to Classic Editor and Classic Widgets.

After all, those two plugins have over 12 million active installs combined, proving there’s a strong demand for keeping things… well, classic.

The tweet triggered a few replies, so I thought I’d expand on the idea here. What would such a plugin actually do, and more importantly, would it be useful?

Let’s dive into this “just curiosity” thought experiment and explore potential use cases, roadblocks, and community sentiment.

WooCommerce Visual Hook Guide: Cart Page (Block Version)

I’ve put together a visual hook guide for the WooCommerce Cart Block (you can find the legacy shortcode version here).

Please note – as of the date above, you can’t really customize the Cart Block via PHP (unless you use the workaround below).

If you need to personalize the Cart page, move elements around, hide default elements, add custom content, you can play on the Edit Page and do the usual manual work with blocks: you can move them (e.g. you can move the coupon form to the bottom), remove them (e.g. you can remove the cross-sells block), place blocks in between default blocks (e.g. you can add some text above and below the “Place Order” button), etc.

But if you wish to do that via code (custom plugin, snippet, child theme), then you must revert to the shortcode version – unless, once again, you get to understand my workaround as per the below visual hook guide.

So, at least for now and until WooCommerce decides to release actions and filters for us developers, let’s see how to find WooCommerce Cart Block hooks quickly and easily by seeing their actual location.

Once you’ve picked your hook, all you need to do in your custom code is “add_action(‘hook_name’,’custom_function’);” and you can place your personalized content in that exact position within the WooCommerce Cart Block.

Enjoy!

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 Get Started with WooCommerce Blocks – PART 2

WooCommerce is one of the leading eCommerce platforms marking its territory in the eCommerce industry one website at a time – with over 5 million downloads. It offers a complete online store solution for small and medium-sized businesses and web professionals.

And now, the development team is working at making WooCommerce fully compatible with Gutenberg. And the first phase is about building custom WooCommerce Blocks that can be used in the new WordPress editor.

These blocks come free of cost and let you customize and change the complete look and feel of your WooCommerce store – without typing a single line of code. With a simple drag and drop tool – you can place your store products wherever on the website in whichever desired format.

In part 1 of this article we saw ten WooCommerce blocks and their significance. In this article, we’ll talk about ten more blocks you can use for an interactive online store. But first, let’s learn about adding and editing these blocks on your store.

WooCommerce: How to Get Started with WooCommerce Blocks – PART 1

Since WordPress 5.0, the default page/post editor has been completely redeveloped. Surely, you’ve heard about Gutenberg.

Bad news is that WooCommerce joined the new editing experience much more slowly, and there are still major things to develop in order to make it Gutenberg-friendly.

The compatibility progress can be tracked via the WooCommerce Blocks official plugin, which states “You can use this plugin if you want access to all the available blocks for WooCommerce – including experimental ones. Our current “stable” blocks are bundled into WooCommerce, and can be added from the “WooCommerce” section in the block inserter“, because you can find their “beta” blocks in there, those they call “experimental” and that will be officially released into WooCommerce once they are approved.

In this article, we’ll specifically dive deep into WooCommerce Blocks – what they are, why they’re important, how many blocks are available, and how you can use them.

Since this is a huge topic – we have twenty WooCommerce Blocks to cover – we’re dividing it into two parts. This article will evaluate the first ten Blocks you can use in your store. But first, let’s identify what WooCommerce blocks are and investigate why they are so important.

WooCommerce Blocks: Hide Images Etc. From Product Grid Block

Business Bloomer enters the world of Gutenberg today, and we do it with a simple customization tutorial related to the “Product Grid” WooCommerce Gutenberg Blocks: currently these are “Best Selling Products“, “Newest Products“, “On Sale Products“, “Top Rated Products“, “Products by Category” and use the same base code…

However, all of them use custom code and not the default WooCommerce templates (and therefore we can’t take advantage of the WooCommerce hooks for the shop / product archive / product loop unfortunately), so we need to find a workaround if we wish to remove some of the default elements that come up with the product grid items: product permalink, product image, product title*, sale badge, product price*, rating*, add to cart button* in this exact order.

* As you can see from the screenshot below, actually, you can already remove the information with an asterisk from the Block settings. So, in this article, we will see how to remove the rest in case you don’t want it: permalink, image, sale badge. Enjoy!

Tag: Gutenberg