How to add WooCommerce quick view Gutenberg blocks
We’ve just released version 1.4 of WooCommerce Quick View Pro, which fully supports Gutenberg blocks. If you’re looking for a WooCommerce quick view Gutenberg block, then look no further – I’ll tell how which blocks are available, and how to use them.
There are lots of ways to list WooCommerce products. The WooCommerce Gutenberg blocks provide extra flexibility if you want to list products within pages with other content, instead of using the built-in Shop and Category pages. As a page builder, the Gutenberg editor lets you create fancy page layouts with multiple columns and different types of block – all on one page. As a WooCommerce store owner, it makes sense to list your products using Gutenberg blocks.
But unfortunately, not all WooCommerce plugins support these Gutenberg blocks yet. For example, most WooCommerce lightbox plugins let you add quick view buttons to the Shop and Category pages, but don’t work with blocks.
The solution is to use the WooCommerce Quick View Pro plugin, which supports all the Gutenberg blocks provided by WooCommerce. List your products using blocks, and a quick view button will automatically appear alongside the add to cart button for each product. It’s the perfect way to provide more information and allow customers to purchase, without having to visit a separate page.
Which WooCommerce Gutenberg blocks can have quick view buttons?
You can add quick view buttons to the vast majority of the WooCommerce Gutenberg blocks which list products:
- Hand Picked Products Block – Use a Gutenberg block to list specific products anywhere on your site, complete with quick view buttons.
- Best Selling Products Block – List your top selling products. (You may also like our separate tutorial on other ways to list bestselling products.)
- Products by Category – List products from a specific category or categories. (You may also like our tutorial on how to list products from a specific category in a table.)
- Newest Products – List your most recent products using Gutenberg. (Also see our tutorial on how to list new arrivals in a table anywhere on your site.)
- On Sale Products Block – Display products that are on sale and have discount prices.
- Products by Attribute Block – List products with a specific attribute (e.g. color).
- Top Rated Products Block – Display your highest rated products, according to the customer reviews.
- Products by Tag Block – List products with a specific tag.
- WooCommerce Product Table Block – If you’re using our WooCommerce Product Table plugin, then it comes with a free Gutenberg block plugin to insert product tables using Gutenberg. You have full control over which products to list in each block, and can include a column containing quick view buttons.
When WooCommerce Quick View Pro is installed and activated, all of the above WooCommerce Gutenberg blocks will show quick view buttons alongside the add to cart button.
The only exception is the ‘All Products’ block, which lists all the products from your WooCommerce store. WooCommerce have coded this differently from the others and it’s not possible for us to add quick view buttons to it. If you want to show quick view buttons, then you should either use the Shop page that comes with WooCommerce instead of a Gutenberg block, or use one of the other blocks to list your products.
How to add a WooCommerce quick view Gutenberg block
- Make sure you have a WordPress website with WooCommerce and WooCommerce Quick View Pro is installed, and some products added. If you want to use the Product Table Gutenberg block then you’ll also need to install WooCommerce Product Table.
- On the WooCommerce Quick View Pro plugin settings page, make sure you have enabled one or both of the options for Opening the Quick View.
- Create a new page by going to Pages → Add New.
- Click the ‘Add Block’ + icon in the top left corner of the page, next to the WordPress logo.
- Type ‘WooCommerce’ into the block search box (or WooCommerce Product Table if you’re looking for that block).
- Select one of the WooCommerce Gutenberg blocks that supports quick view, listed above.
Save the page, view it, and voila – your products will be listed complete with quick view buttons!
Where to get the plugin
WooCommerce Quick View Pro is available from our website. Get it today, and start creating WooCommerce quick view Gutenberg blocks. It just takes a couple of minutes to set up and comes with a full 30-day money back guarantee. There’s no risk and you can get up and running straight away.