Using WooCommerce Blocks

Last Thursday, we had another online Zürich WooCommerce Meetup and were joined by Niels Lange, a JavaScript Engineer for Automattic, who is currently mainly working on moving all the short code functionality into WooCommerce blocks. I met Niels for the first time at WordCamp Europe 2022 in Porto. He’s also one of the organizers of WordCamp Asia 2023, which takes place from February 17 through 19 in Bangkok/Thailand.

While everyone is talking about Gutenberg and the new block editor, WooCommerce is still using short codes such as (woocommerce_cart) and (woocommerce_checkout). Wouldn’t it be great if WooCommerce would utilize blocks as well? As a matter of fact, WooCommerce started doing this with WooCommerce Blocks on April 24, 2018. Since the release of WooCommerce 6.9.0 in September 2022, short codes still work, but will no longer be the default for the Cart and the Checkout page.

Niels was born in Germany, lived in the Netherlands for several years and since mid-2014 has been living in Indonesia, where he fights bugs between palm trees and rice fields. While he truly enjoys Asian food, occasionally he’s craving for a proper Swiss Fondue. The presentation was mainly directed towards WooCommerce users, but Niels also answered various developer questions during his presentation. Here’s the audio recording.

Audio Recording

Available WooCommerce Blocks

• Featured Product Block: Select and display a single product in a new, high impact fashion. Control text alignment, hide or show the price and description, add a color overlay, change the button call to action, and override the product photo.
• Featured Category Block: Visually highlight a product category to increase traffic to that specific section on your shop.
• Hand-Picked products Block: Display a grid of hand picked products. Products can be ordered in various ways.
• Best Selling Products Block: Display a grid of your best selling products, filterable by category.
• Top Rated Products Block: Display a grid of your top rated products, filterable by category.
• Newest Products Block: Display a grid of your newest products, filterable by category.
• On Sale Products Block: Display a grid of on sale products, filterable by category.
• Products by Category Block: Display a grid of products from your selected category, or categories. Products can be ordered in various ways
• Products by Tag Block: Show a grid of products based on a specific tag that allows you to highlight products based on finer classification options.
• Products by Attribute Block: Display a grid of products from your selected attributes.
• Product Categories List Block: Display all your product categories as a list or dropdown and help shoppers to find a specific category.
• Reviews by Product: Display reviews of a specific product to build trust in your product and brand.
• Reviews by Category: Highlight reviews from specific categories and help merchants making an informed purchasing decision.
• All Reviews: Show a list of all product reviews on a landing page, blog post or any other page in your site.
• Product Search: Help shoppers find your products by placing a search box in specific locations.
• All Products: Display all products from your store as a grid with pagination and sorting options. Requires WordPress 5.3.
• Filter Products by Price: Display a slider to filter products in your store by price. Works in combination with the All Products block. Requires WordPress 5.3.
• Filter Products by Attribute: Display a list of filters based on a chosen product attribute. Works in combination with the All Products block. Requires WordPress 5.3.
• Active Product Filters: Display a list of active product filters. Works in combination with the Filter Products by Price and Filter Products by Attribute blocks. Requires WordPress 5.3.
• Mini Cart: Allow customers to check the contents of their cart from any store page.
• Cart Block: Display the current cart contents (currently in beta, see this page about its status).
• Checkout Block: Display the checkout page, with customer details, shipping options (dependant on product type), and payment method (currently in beta, see this page about its status)

Credits

• Picture courtesy of Tan Kaninthanond