WooCommerce Blocks


WooCommerce Blocks are the easiest, most flexible way to display your products on posts and pages!

Products by Attribute Block
Display a grid of products from your selected attributes.

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.

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.

選択した1つ以上のカテゴリーの商品のグリッドを表示します。 商品はさまざまな方法で注文できます。

カテゴリー選択フィルタも改善されました。 2つ以上のカテゴリーを選択した場合は、選択した任意のカテゴリーまたはすべてのカテゴリーを含む商品を表示するように選択できます。



  • WordPress 5.0
  • WooCommerce 3.6 or greater
  • PHP バージョン5.2.4以降(PHP 7.2以降を推奨)
  • MySQL バージョン5.0以上(MySQL 5.6以上を推奨)



WordPress が自動的にファイル転送を処理するため、自動インストールが最も簡単な方法です。Web ブラウザを終了する必要はありません。 このプラグインを自動的にインストールするには、WordPress ダッシュボードにログインし、[プラグイン]メニューに移動して[新規追加]をクリックします。

検索フィールドに「WooCommerce Gutenberg Products Block」と入力し、プラグインを検索をクリックします。 このプラグインを見つけたら、ポイントリリース、評価、説明など、それに関する詳細を表示できます。 もちろん最も重要なのは、「今すぐインストール」をクリックするだけでインストールできることです。


手動のインストール方法では、プラグインをダウンロードして、お気に入りのFTPアプリケーションを介して Web サーバーにアップロードします。 WordPress コーデックスには、ここでこれを行う方法についての説明が含まれています。


WooCommerceには、商品を追加して商品ブロックをすばやく簡単に作成するために使用できるサンプルデータがいくつか付属しています。 sample_products.csv をインポートするには、コアの CSV importer または CSV Import Suite plugin を使用できます。


バグは WooCommerce Gutenberg Products Block GitHub repository に報告してください。

これはすごい! 私は貢献できますか?

はい、できます! GitHub repository に参加してください。

WooCommerce 開発者ブログで公開されているリリースノートとロードマップノート。


  • The Featured Product Block
  • Selecting a product for the Featured Product Block
  • Selecting Products for the Hand-Picked Products Block
  • Selecting categories in the Products By Category block
  • WooCommerce Product Blocks in the block inserter menu



Hand-picked Products
Product Categories List
Products by Category
Featured Product
Newest Products
On Sale Products
Best Selling Products


7月 19, 2019
This plugin causes exessive js: loading a significant amount of extra JavaScript from wp-includes/js/dist on the frontend due to doing it wrong!
7月 14, 2019
Plugin is broken. After 2.2 update, plugin will not add products to blog post. Error reads "Error loading block: The response is not a valid JSON response."
7月 13, 2019
After updating to 2.2.1 from 2.1.0 the shop images aren't loading (only the spider is rotating). The hover-flyouts of the dropdown menus are disappeared. After deactivating the plugin these errors are fixed.
4月 19, 2019
Great concept. Can't wait for it to actually work. It can't find all of my products. It encounters errors displaying products. When I first add the block I get a spinner while it loads all of my products. I have over 1,600 published products and I have 20,000 unpublished products. So it's a bunch of products, but that's not a lot compared to other stores. The search doesn't find all of the products I have in my store. When I try to add a category block, I know I have published products in those categories, but the block doesn't think so. It's like these blocks do a query of my products but tops out after a certain number of products and refuses to acknowledge any additional products past that unknown number. The Featured Product block also makes no sense. It provides a nice presentation of the product - but no way to add the product to the cart nor does it even include a link to the product. What's the point of it? And for the Hand Picked Products block, if I add only one product, it keeps it in a narrow column as if there were more products to be added. It should adapt and fill the void. These product blocks will be super awesome and helpful. It just needs to work first!
3月 1, 2019
It would be great to implement product categories list.


WooCommerce Blocks はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。


“WooCommerce Blocks” は10ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“WooCommerce Blocks” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。


2.2.1 – 2019-07-04

  • Fix: Allow custom CSS classes on grid blocks.
  • Fix: Allow custom CSS classes on featured product block.
  • Fix: Allow custom CSS classes on product categories list.

2.2.0 – 2019-06-26

  • Feature: Add Product Categories List navigation block for showing a list of categories on your site.
  • Enhancement: All grid blocks are now rendered directly by the blocks code, not using the shortcode.
  • Enhancement: Brand the WooCommerce Blocks for better discoverability in the block inserter.
  • Build: Update build process to dynamically generate required WordPress dependencies.
  • Build: Update packages.

2.1.0 – 2019-05-14

  • Feature: Add focal point picker to the Featured Product block, so you can adjust the background image position (only available on WP 5.2+ or with Gutenberg plugin).
  • Fix: Improved fetching products from API, so searching for products in Featured Product & Hand-picked Products is faster for stores with over 200 products.
  • Fix: It might be possible to request over 100 products for the editor preview, but this would cause an API error – we now limit the preview request to 100 products.
  • Build: Update build script to show visual progress indicator.
  • Build: Update packages.

2.0.1 – 2019-04-22

  • Fix: Fix warnings about blocks already being registered.
  • Fix: Fix a conflict with WooCommerce 3.6 and WooCommerce Blocks 1.4 (this change only applies to the version of blocks bundled with WooCommerce core).

2.0.0 – 2019-04-18

  • BREAKING: Requires WordPress 5.0+, WooCommerce 3.6+
  • BREAKING: Remove the legacy block entirely
  • BREAKING: Remove the wc-pb/v3/* endpoints in favor of new core wc-blocks/v1/* endpoints
  • Feature: Add content visibility settings to show/hide title, price, rating, button
  • Feature: Add transforms between basic product grid blocks
  • Fix: Add product rating display to preview, to better match front end
  • Fix: Product titles render HTML correctly in preview
  • Fix: Icons are now aligned correctly in placeholders
  • Fix: Grid block preview column width now matches the front-end
  • Fix: Webpack now builds using a custom jsonp callback, fixing possible collisions with other projects
  • API: Change namespace, endpoints now accessed at /wc-blocks/v1/*
  • API: Add catalog_visibility parameter for fetching products
  • API: Update structure of attribute term endpoint to return attribute.slug, attribute.name etc
  • API: Update parameters to use full names, category_operator, attribute_operator
  • Components: Move SearchListControl to @woocommerce/components library
  • Components: Added new control component GridContentControl to manage content visibility
  • Build: Reorganize CSS into one file for editor preview, and one file for front-end styles
  • Build: Move registration code to a new class
  • Build: Update packages

1.4.0 – 2019-02-12

  • Feature: Added new block: “Products by Attribute”
  • Enhancement: Added the ability to resize the Featured Product block (a default and minimum height can be set by your theme)
  • Enhancement: Updated button on Featured Product block to match core button block behavior
  • Components: Added new control component GridLayoutControl to manage row/column layout values
  • Components: Updated ProductAttributeControl to list only attribute types, then once selected, list terms in that attribute
  • UX: Remove ability to change selected product in Featured Product block, to prevent “sticky” product links.
  • Fix: A product without an image will now use the placeholder image in grid-layout block previews
  • Fix: Previously, there was a PHP notice when a Featured Product has no background image
  • Fix: There is now an enforced limit on column and row counts (which can be set by your theme)
  • API: Added attr_operator support to products endpoint to compare product attribute terms
  • Build: Update packages
  • Build: Remove unnecessary internationalization build step

1.3.1 – 2019-01-17

  • Fix: A CSS conflict was causing the core columns style to reset, this has been fixed and columns will display as expected now.
  • Fix: A version conflict with a JS package was causing the blocks to be broken in non-English locales. The package was updated.
  • Fix: Translations were not being loaded correctly for the JS files. We now bundle the Danish, Spanish, and French translations so that these can be used.

1.3.0 – 2019-01-15

  • Feature: Added new blocks: “Featured Product”, “Hand-picked Products”, “Best Selling Products”, “Newest Products”, “On Sale Products”, “Top Rated Products”
  • Enhancement: Create new “WooCommerce” block category, all blocks are found there now
  • Enhancement: Added a control to “Products by Category” block to control whether products need to match any selected categories or all selected categories
  • Fix: A “Products by Category” block with no category selected will no longer show all products
  • Legacy block: Remove legacy “Products” block from being shown in the block inserter (still loading the block for an existing uses)
  • Legacy block: Fix an issue with imageless products in the legacy “Products” block.
  • Components: Add new Control components ProductControl, ProductsControl, ProductOrderbyControl
  • Components: Update SearchListControl to allow selecting a single item
  • API: Add cat_operator support to products endpoint
  • API: Add product description & short_description to each product
  • API: Add attribute group names to each attribute
  • Build: Update packages
  • Build: Add cssnano to minify CSS
  • Build: Split out node_modules code into separate vendors files

1.2.0 – 2018-12-04

  • Feature – Stand-alone product category block with improved category selection interface.
  • Fix – All users who can edit posts can now use these blocks thanks to a new set of API endpoints allowing view access to products, product categories, and product attributes.
  • Fix – Compatibility with WP 5.0, fixed error “Cannot read property Toolbar of undefined”.
  • Fix – Only published products are shown in previews.
  • Enhancement – Translations should now load into the block (for WP 5.0+).
  • Enhancement – Modernized build process and developer tools, and added tests for faster future development.

1.1.2 – 2018-09-07

  • Fix – Refactor to remove withAPIData usage, as the class was removed in Gutenberg 3.7.

1.1.1 – 2018-08-22

  • Fix – Make Newness ordering order correctly on frontend.
  • Fix – Don’t cause fatal errors if WooCommerce is not active.

1.1.0 – 2018-06-06

  • 機能 – “ベストセラー”と “高評価”の商品スコープを追加します。
  • Fix – Only enqueue scripts and styles in the site backend.
  • Fix – Remove focus checks deprecated in latest Gutenberg version.
  • Fix – Added keys to some elements to prevent React warnings.
  • Enhancement – Added custom API endpoint for more accurate block previews with orderby.
  • Performance – Refactored the way the attribute select works to prevent many concurrent API requests on sites with many attributes.

1.0.0 – 2018-04-24

  • Gutenberg Products ブロックの初期実装