Do the quick view buttons work with blocks and page builders?
WooCommerce Quick View Pro works with most of the Gutenberg blocks which allow you to list WooCommerce products, plus top page builder plugins such as Elementor, Divi Builder, Oxygen Builder, Bricks, Visual Composer, and so on.
Supported Gutenberg blocks
You can add quick view buttons to any of the following WooCommerce blocks:
- Hand Picked Products
- Best Selling Products
- Products by Category
- Newest Products
- On Sale Products Block
- Products by Attribute Block
- Top Rated Products Block
- Products by Tag Block
- WooCommerce Product Table - If you're using our WooCommerce Product Table plugin, then you can also use our free Gutenberg plugin to add product tables using Gutenberg.
Limitation - 'All Products' block
The only exception is the 'All products' Gutenberg block. This is coded differently and unfortunately it's not possible for us to add the quick view buttons to this block.
Limitation - Product pages designed using Divi
When you use the Divi theme, you can display the quick view buttons on pages designed using Divi, but if you have designed your product pages using Divi Builder then they will not display correctly in the quick view lightbox. If you are using WooCommerce Quick View Pro with Divi, then we therefore recommend that you don't use Divi Builder to design your product pages. You can still use it to design all your other pages.
If your theme is Divi
Divi includes its own quick view or popup modules. If one of these is enabled, it can clash with WooCommerce Quick View Pro. If you are using our plugin, disable Divi's built-in quick view or popup feature in the Divi theme options so that the two don't conflict.
As noted above, you can show our quick view buttons on pages designed with Divi, but you should avoid building your individual product pages with Divi Builder, as that content will not render correctly inside the quick view lightbox.
If the quick view buttons are hard to read because Divi styles them with its own button colours, you can set the text colour with a small CSS snippet. Add this in Appearance → Customize → Additional CSS, changing the colour to suit your design:
.wc-quick-view-button {
color: #ffffff !important;
}
The !important keyword makes sure your colour overrides Divi's own button styling.
How to set it up
You can choose whether or not to show quick view buttons in the WooCommerce Gutenberg blocks and modules from other page builders using the 'Opening the Quick View' options on the plugin settings page. These let you choose whether to show quick view buttons, or whether to replace the links to the single product page with quick view.
See our full tutorial about how to add WooCommerce quick view Gutenberg blocks.