Tutorial: How to build blocks with WooCommerce

In this tutorial, we’ll guide you through building a WooCommerce Product Collection block by walking you through a step-by-step code example. This repository serves as a helpful tool for implementing an MVP of the Product Collection block. We’ve chosen this block because it covers many essential features that WooCommerce block developers often need to work with, including filters, custom queries, and product display logic.

This tutorial was created and run as part of a workshop during one of our team meetups. The workshop was led by Karol Manijak (@karolmanijak) and Lucio Giannotta (@sunyatasattva), and is now available for you to follow along in this video.

Whether you’re new to building blocks for WooCommerce or you’re looking to refine your skills, this video tutorial will help you implement core block features that you can build upon.

🎥 Follow along with the video tutorial

The video above will give you an overview of what blocks are, how they can be used to enhance your commerce experience and, most importantly, will try to dispel the pressure developers may feel when thinking of developing new blocks.

Through a live-coding session we’ll guide you through some of the most important concepts on how to build complex and dynamic experiences for your users. By the end of the video, you’ll have hands-on experience creating interactive blocks and utilizing advanced WooCommerce features.

That’s not all, we’ll leave you with two exercises that you can go through to refine your understanding of these concepts. And—fret not!—both guidance and solutions are available in the resources we’ll provide.

⚙️ Prerequisites

Before you begin, make sure you’ve completed the following setup steps:

What to expect in the video

This video is divided in three parts:

Part 1: Introduction to Blocks in WooCommerce

Here, you’ll learn the theory behind Gutenberg blocks, and how they can enhance a commerce experience. We’ll explain the basic concepts of modularity, extensibility and composability and how we can use them to our advantage as WooCommerce developers.

Part 2: Live-Coding session developing the Product Collection

We’ll take our recently released block powering our catalogues, the “Product Collection” block, as an example, and guide you through a live-coding session attempting to dispel the myth that developing complex blocks that engage with WooCommerce is complicated, rapidly introducing you to powerful concepts such as:

• Dynamic blocks.
• Using familiar PHP APIs to develop your front-end code.
• Client-side hydration and routing.

Part 3: A deeper dive in the actual Product Collection

If you haven’t heard of it yet, in this part of the video we’ll introduce you to the actual “Product Collection” block shipping with WooCommerce by default. We’ll tell you about it, what makes it special and why it took us longer to develop than this hackathon-style exercise, and how we ensure developers can extend it to adjust it to their needs.

Still looking for more?

We’ll leave you with a couple of exercises we went through in our live workshop. If you haven’t followed along with the live-coding session, you can pick up where we left off.

ℹ️ If you decided to skip the video, you can check out branch step-7 in the repository to pick up the code exactly where we have left it off at the end of the video.

Exercise 1: Implement a “Featured” Filter

• Goal: Implement a “Featured” filter that will show only featured products when enabled in the Inspector Controls. When disabled, it will display all products as-is.
• Why this exercise: You’ll learn how to manipulate block settings with the Inspector Controls and handle dynamic product filters.

🛟 Additional resources:

• 🔮 Example (a spoiler!)
• The block in the Editor
• Inspector Controls documentation
• Toggle component documentation
• Wc_get_product documentation
• getProducts implementation

Exercise 2: Register a custom Collection

• Goal: Register a custom collection using the WooCommerce public API that displays on-sale products under $40, with support for pagination.
• Why this exercise: You’ll dive into creating custom product collections and explore the WooCommerce API for advanced filtering and pagination.

🛟 Additional resources:

• Registering custom collections in product collection block
• Example (a spoiler!)

The solutions for those exercises are available in the same repository, on branches exercise-a and exercise-b.

Tell us how it went

Both exercises will help you better understand how to extend WooCommerce blocks and interact with the WooCommerce product data dynamically.

If you have feedback or questions about this tutorial, please comment on this post or reach out to us on the Woo Community Slack.