Store Editing Snaps: March 27 – April 7

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.

Products Block & Improving Product Elements

The Products block (originally referred to as the “Product Query” block) is a larger project that includes Product Archive Type Blocks and “Blockifying” the Product Archive templates.

In this next phase, we continue to move towards graduating the “Products (Beta)” block out of its beta phase via a thorough QA process on different platforms. Throughout this process, we will also be fixing outstanding bugs from the beta phase and continue improving the UX, making the block smooth and delightful to use.

Product Price, Product SKU and Product Stock Indicator: Add support for color, typography, and spacing (#8906, #8913, #8954)

We’ve added styling options to another set of product elements so they can be adjusted to the look of the rest of your shop. This improvement provides users with more flexibility when customizing the appearance of the shop.

Product Price, Product SKU do and Product Stock Indicator will support the following options:

  • Color: Text color, Background color
  • Typography: Font family, Font size, Font Appearance, Line height, Letter spacing, Text decoration, Letter Case
  • Spacing: Margin, Padding

Blockifying Templates

The goal for this project is to continue our effort to create a complete block experience for all of the Product templates. This will allow merchants to use the features of the Site Editor to create and edit the template used for rendering all single products (or even a specific product). We will also continue to leverage the work that has been done on the “Products (Beta)” block and create equivalent blocks for the various parts of an archive page.

Single Product block (#8610)

We’ve added a new Single Product block, dedicated to the Single Product template, which we are continuing to actively work on. Soon you’ll be able to choose a Single Product block from an inserter and include all the necessary blocks at once.

Product Reviews block (#8857)

In addition to the aforementioned Single Product block, we’ve added a new Product Reviews block. It displays the reviews for a given product. Like the Single Product block, it can be inserted inside the Single Product template.

Add to Cart Form: Replace Notice with Skeleton component (#8842)

In this PR, we have made some improvements to the Add to Cart Form preview.

Before
After

Improvements to the Filter Data counts

This project aims to improve the Filter Blocks, ensuring the correct counts are displayed when filtering products by following a simple rule:

The attributes and meta counts should always match the displayed results, independent of the combination of filters. They accurately represent what is available in the store for the given criteria.

During the past few weeks, we worked on a series of optimizations that are now combined and fully functional, ensuring the counts for products are accurate independent of the number of combinations of filters used. 

We have also opened the proposed approach for discussion, as this implementation differs from what the core of WooCommerce does for the filter widgets.

Add method to fetch attribute and meta counts (#8599)

We have introduced a new get_attribute_counts method, which is responsible for fetching the counts for the Filter by Attribute block.

Add method to fetch product IDs based on the filtered term (#8598)

Here, the new get_product_by_filtered_terms method is introduced, allowing the fetch of product ids by terms. The returned data is used to compose the macro query within get_attribute_counts.

Add method to fetch product IDs based on the filtered meta (#8645)

Here, the new get_product_by_metas method is introduced, allowing the fetch of product ids by metas. The returned data is also used to compose the macro query within get_attribute_counts.

Update the fixture data for the PHP Unit tests to account for the usage alongside the wc_product_attributes_lookup table (#8984)

We’ve introduced some changes to ensure that the PHP Unit tests are successful for the updated get_attribute_counts method.

WooCommerce Blocks Releases ✨

  • 9.9.0 – Many of the changes noted in this post are included in the 9.9.0 release of the WooCommerce Blocks feature plugin from March 31st. You can find the full details in the release notes.

Other Notable PRs / Issues ✅

  • Add padding support for Product Image block (#8895)
  • Product Image Gallery: Prevent image placeholder from going outside its wrapper (#8901)
  • Remove construct method from Product Archive Compatiblity Layer (#8915)
  • Fix the incorrect position of the after_shop_loop_item_title hook (#8911)
  • Fix unlinked border widths in WP 6.2 (#8893)
  • Fix E2E tests with WP 6.2 (#8928)

Thanks for following along with us – until next time! 👋


Keep yourself in the loop!

Sign up for the WooCommerce developer newsletter:
Hidden
Hidden
Hidden


3 responses to “Store Editing Snaps: March 27 – April 7”

  1. thanks for this snap
    Don’t forget the other product types templates !
    i mean Grouped Products, variable products, affiliate products
    … so we can also adjust layout for these (price display, quantity selectors, colors, etc.)

  2. responsiveflow Avatar
    responsiveflow

    Thanks for the update!
    There are new features that I would love to see implemented in Woocommerce Blocks:
    – ability to change the cart icon in the mini cart block
    – add and reorder checkout fields in the checkout block
    – paypal support for checkout block
    – ajax add to cart in single product block
    – quantity selector with + and – signs.
    – product description and reviews as separate blocks: currently, product description and reviews are in a single block called “product details”, however in my stores I generally place the product description below the add to cart button and then below the product description i place the reviews. It’s currently not possible with blocks.

    1. @responsiveflow thank you for the feedback, these are great suggestions! We’ve already started exploring a couple of these.

      Specifically, we’ve done some initial experimentation around the Mini Cart Icon customizability and the Add to Cart button is something we’re planning to look into in the next few months.

      The items related to the checkout block are also on our radar.

      Regarding the separate product description and reviews blocks – there is already a separate block for Product Reviews. To display the product description, you can use the Post Content block.

      So, while it is technically possible to achieve what you mention, there is certainly room for improvement to make it more intuitive (i.e., creating a separate Product Description block)! I’ll raise an Issue for this.

      Single Product Template

      Thanks again for your feedback / suggestions. Also, feel free to create an Issue for future enhancement requests like these on the repository in GitHub!

Leave a Reply

Your email address will not be published. Required fields are marked *