Hello and welcome to another round of Snaps from the WooCommerce Store Editing team! 🎇
Every couple of weeks, we give an update on all the work being done on WooCommerce Blocks from behind the scenes.
Let’s take a look at some highlights of what we’ve done since our last update.
Note that the linked #numbers that accompany each item below point to the relevant issues and pull requests on the GitHub repository.
What We’re Working On 🚧
We’ve worked on a number of things in the last two weeks but here are some specific items we want to highlight.
Product Collection Block
Product Collection block offers an improved experience for displaying your products. The block is already feature-rich, covering all the cases Products (Beta) or All Products blocks offered. Now, we’re working on new features and further improvements that will allow for even easier setting up your store.
Enhance No Results View in Block (#10826)
The “No Results” block shows up in Editor at the bottom of the Product Collection block. It’s displayed to the buyers when Product Collection doesn’t show any products. For example due to applied filters. Till now it showed up with an empty Paragraph block as the default content. In this PR we provide a default content for this block that includes two links allowing buyers to easily get back to browse products.
This is just a default No Results content, you can still edit this and adjust it to your needs.
Add new flow for adding Product Collection block (#10952)
You may remember we described the new flow in recent Snaps but we’re still iterating on it. Recently, we simplified the flow and added more Collections that will allow you to easily insert your preconfigured Product Collection.
When you add Product Collection block you’ll be prompted to choose one of the available Collections. At the moment we aim to offer 6 of them, but there’s more to come:
- New Arrivals
- Top Rated
- Best Selling
- On Sale
- Featured
- Default Query
We’re still tweaking that experience, but you can check out the current state in the video below where we showcase how to create a shop page that includes Featured products at the top, your product catalog with filters in the middle, and New Arrivals at the bottom of the page in a couple of clicks:
Enable shrink columns option in Product Collection by default (#11821)
Recently we introduced a new feature to Product Collection block: shrink columns to fit, which makes the block responsive, allowing for example to achieve a 2-columns grid on mobile devices. It’s been highlighted in Store Editing Snaps: October 09 – 20 where you can watch the demo. We decided that this option should be enabled by default, as it provides better UX for your customers.
“Shrink columns to fit” is only available in Product Collection block so it’s another reason to try this block out! We’re happy to hear your feedback here!
Product Gallery Block
This project builds off of our previous work and aims to introduce additional functionalities to the blocks and enhance their interactivity. We plan to achieve this utilizing the Interactivity API and the Behaviors API, alongside enhancing block reliability through the development of e2e tests within the new Playwright infrastructure.
Thumbnails: Fix overflow issues and improve responsiveness (#11665)
We improved the way Thumbnails display and re-size in the editor and the frontend, preventing them from overflowing the container. You can see the comparison before and after the change, where thumbnails are aligned to the main image.
- In Editor:
| In Editor – Before | In Editor – After |
 |  |
| On the Frontend – Before | On the Frontend – After |
 |  |
Store Customization
This project aims to create a brand new Store Customization experience by introducing new key features, such as an updated design hub, onboarding experience, and more. While many different teams are working on this initiative, our primary focus in this phase is to start implementing AI-driven flows, helping users design their stores with the power of AI.
During this cycle, the goal is to have AI manage the images displayed in patterns, ensuring they dynamically change depending on what the user decides to add as a description for their business in the settings.
Over the past couple of weeks, we primarily focused on pattern improvements. While there are too many to list here, below are a few highlights.
Update patterns with the new images (#11782)
Some of the patterns were updated with the freshen-out images so they better showcase their capabilities. See a couple of examples below:
Featured Category Cover Image:
Hero Product Split
Just Arrived full hero
Store Customization MVP (Phase 4) (#11764)
There’s a new epic created for the Store Customisation project, which gathers the upcoming work in that area. If you’re interested in what’s coming next, definitely visit it here!
Frontend Filters
The goal of this project is to improve the performance of all filters that impact the products blocks. We want to make the filters’ context aware, so we only query the products we need and make the overall user experience better and smoother by exploring the use of interactivity API.
MVP: Attribute filter block powered interactivity API (#11749)
This is the initial implementation of the new Attribute Filter block using Interactivity API. 🎉 Another step towards more performant frontend filters.
Command Palette
We are adding WooCommerce-specific commands to the Command Palette with the goal to speed up your workflow when performing certain WooCommerce tasks.
The Command Palette is a new tool introduced in WordPress 6.3 that makes it easy to perform certain actions from the Post, Page, and Site Editors by simply pressing Ctrl+K and typing the command you want to perform.
You can read the ongoing discussion of commands we will add in this GitHub discussion.
Add several WooCommerce-related commands to the Command Palette (#41605)
In addition to the ongoing discussion, we already started implementing some commands that might be useful to merchants: that includes creating products and orders or navigating to specific product pages, settings, or analytics reports.
WooCommerce Blocks Releases ✨
- 11.5.4 – Many of the changes noted in this post are included in the 11.5.4 release of the WooCommerce Blocks feature plugin from March 13th. You can find the full details in the release notes.
- 11.4.4 & 11.4.5 & 11.4.6 & 11.4.7 & 11.4.9 – These are fix releases that include bug fixes and enhancements for WC Blocks.
Other Notable PRs / Issues ✅
- Translate Related Products heading in Single Product template (#11693)
- Product Button: Remove the hardcoded width and padding (#11537)
Thanks for following along with us – until next time! 👋
Leave a Reply