WooCommerce Blocks are pre-built content elements you add in WordPress Block Editor (Gutenberg) to build your store pages visually. Instead of writing shortcodes or editing PHP templates, you can drag and drop blocks for products, categories, filters, cart, checkout and more. For example, blocks like “All Products” (Product Collection) show grids of products, “Featured Product” highlights a single item, and the “Product Filters” block adds live filters (price, color, size, etc.) automatically. Using blocks means no coding or shortcodes – just select blocks and customize them.
Table of Contents
ToggleTo use the new Store Editing features, it’s best to run the latest WordPress and WooCommerce versions. Also note that full site editing requires a block-based theme (one built for Gutenberg). With a block theme active, you can edit entire templates (headers, footers, shop pages) using blocks. Even with a classic theme, however, you can still add WooCommerce blocks inside any post or page. In summary, WooCommerce Blocks let beginners and experts alike design shop pages and product layouts by inserting and configuring blocks in the editor.
Getting Started with WooCommerce Blocks: Step-by-Step Guide
Step 1: Install and Update WooCommerce
Begin by installing or updating WooCommerce to the latest version. Block features (like the Cart and Checkout blocks) are built into WooCommerce 7.0+. Always keep WordPress and WooCommerce up-to-date to ensure you have the newest blocks and bug fixes. Once WooCommerce is active, you’ll automatically have access to its block library in the editor.
Step 2: Choose a Block-Compatible Theme (Optional)
For full store editing, use a block (full-site editing) theme. These themes allow you to edit templates in the Site Editor. The WooCommerce docs note that using a block theme is needed for the complete store editing experience. Popular block-friendly themes include Storefront Blocks, Twenty Twenty-Two, Astra, etc. If you prefer your existing theme, you can still use WooCommerce blocks within pages or posts, but you won’t be able to edit templates like the Shop or Product page via the Site Editor.
Step 3: Open a Page and Insert Blocks
Go to Pages > Add New and open the Gutenberg editor. Click the + (Add Block) button in the top toolbar (or in the content area) to open the Block Inserter. Search for WooCommerce-related blocks. Under WooCommerce or Product categories, you’ll find blocks like All Products, Featured Product, Product Categories, Product Search, Cart, Checkout, etc. Click a block to add it. For example, insert an All Products (Product Collection) block to display a grid of products. You’ll see a live preview of products immediately. As the official docs explain, WooCommerce blocks let you “mix and match” elements to build custom layouts.

Step 4: Configure Block Settings
After inserting a block, use the block toolbar and sidebar settings to customize it. The toolbar (above the block) lets you move, duplicate, or transform the block. The sidebar (open via the gear icon) has block-specific options. For example, a Products grid block lets you choose rows and columns, and toggle details like price, rating, or the Add-to-Cart button. A Featured Product block lets you select which product to display and show/hide its price or description. Play with these settings: each WooCommerce block’s sidebar offers controls relevant to that block. (If you only see an Advanced section, you may be editing a locked template, or need to update WooCommerce.) By exploring the sidebar and toolbar for each block, you’ll quickly learn how to shape your store pages.
Designing a Product Display Page Using Blocks
Step 1: Add a Product Grid Block
To showcase multiple products, use the All Products (Product Collection) block. Click + and search for “Products” or “Product Collection”. Please insert it into your page. This block will display your products in a grid layout. By default, it may show all products, but you can filter it (in the sidebar) by category, tag, sale status or other attributes. Once added, you’ll see a live preview of products on the page.
Step 2: Customize the Product Grid
Select the Products block you added. In the right sidebar, adjust its settings: set how many rows and columns of products to display, and choose which details to show (e.g., price, star rating, Add to Cart button). You can also hide the sorting dropdown or other elements. These controls let you tailor the grid appearance. If block options seem limited, make sure you’re editing a normal page (not a locked template) and have updated WooCommerce. The flexibility here means you can easily turn on/off fields or change the layout without touching the code.
Step 3: Add a Featured Product Block
To highlight a single item (e.g., a bestseller or promotion), use the Featured Product block. Click +, find “Featured Product”, and insert it above or next to your grid. A prompt will appear to choose a product from your catalog. Pick the product you want to feature. The block will display that product with its image. In the sidebar, you can customize it further: show/hide its price or full description, change the background overlay color, and edit the call-to-action button text. Place this block prominently (above the product grid) so it’s the first thing visitors see.
Step 4: Arrange and Style the Page
Finally, arrange your blocks for a clean layout. Typically, put the Featured Product block at the top of the page, with a heading above (e.g., “Featured Item”) if desired. Below that, your Products grid block (All Products) will form the main catalog. You can add heading blocks, separators or group blocks to structure spacing. Use the List View (from the toolbar) to check the block order and drag blocks into place if needed. For example, ensure the Featured Product is listed above the All Products block. Each block also has style settings: use the sidebar to change text colors, background colors, and spacing. This lets you match blocks to your brand style. With these steps, you’ve built a custom product display page entirely with blocks, fully adjustable from the editor.

Enhancing Product Discovery with Filtering Options
Step 1: Insert the Product Filters Block
For stores with many items, add a Product Filters block so shoppers can narrow results. In the editor, click + and search for “Filters”, then insert the Product Filters block. Place it on your Shop or Catalog page (typically in a sidebar or above the products). The block will automatically scan your store and display available filter controls – no extra setup needed. It may show filters such as color checkboxes, size options, stock status, a price range slider, and star ratings. This gives customers a dynamic panel to refine their search.
Step 2: Configure Filter Block Settings
With the Filters block selected, check what’s displayed. At the top, you’ll see a “Clear Filters” link so customers can reset all selections. If expected filters (e.g., Color or Size) are missing or show a warning, it means those product attributes haven’t been created yet. In the block sidebar, you can tweak things like the block width or styling. Remember: the Filter block is dynamic – it only shows filters based on your store’s data.
Step 3: Create Product Attributes (if needed)
If you need specific filters like color or size, first create those attributes. Go to Products > Attributes in the WordPress dashboard. Add a new attribute (e.g., Name: Color, Slug auto-generated). Then, in the list below, click Configure terms for that attribute. Add each filter value (e.g., “Red”, “Blue”, “Green”) as separate terms. Repeat for any other attributes (Size, Material, etc.). Once done, these attributes will be available for product settings.
Step 4: Assign Attributes to Products
Next, assign these attributes to your products. Go to Products > All Products and edit a product. In the Product data panel, click the Attributes tab. Select your new attribute from the dropdown, click Add, then pick the relevant values (e.g., Red, Blue). Ensure you check “Visible on the product page” so the filter can use it. Save the product, and repeat for other products. After a few products have these attributes, the Product Filters block will update, and the previously missing filters will activate. Now, customers can filter the product grid by those options, improving discoverability.

Customizing Cart and Checkout Pages with Block Editor
Step 1: Use the Cart and Checkout Blocks
WooCommerce now provides dedicated blocks for the Cart and Checkout pages. To switch to them, open your Cart or Checkout page in the editor. If there’s a [woocommerce_cart] or [woocommerce_checkout] shortcode there, delete it. Then click + and insert the Cart block on the Cart page (or the Checkout block on the Checkout page). This replaces the old shortcode with the new block-based layout, giving you full control over how these pages appear.
Step 2: Adjust the Cart Block Layout
When you add the Cart block, you’ll see its default sections: a product list with quantity controls, a coupon code field, a shipping calculator, and a checkout button. To customize this page, click on the Cart block and use the List View or toolbar to move or remove elements. For example, you can delete the coupon field if you don’t need it, or reposition the shipping calculator. Each part is a sub-block, so you can also style them individually (colors, fonts, spacing) via the sidebar. The flexibility means you can streamline the cart page for your customers without any coding.
Step 3: Customize the Checkout Block Layout
The Checkout block works similarly. It includes separate sections for billing/shipping fields, payment options, and an order summary. Each of these sections is its own block inside the Checkout block. You can drag them to reorder (e.g., move payment below the form), toggle a section off, or even rename headings. For instance, you might rename “Billing Details” to “Your Information” or hide optional fields to speed up the checkout process. All these edits happen in the editor just like any other block. This way, you can simplify and brand your checkout flow visually, without extra plugins or templates.

Building a Conversion-Friendly Custom Shop Page
Step 1: Create a New Shop Page
Instead of using your theme default shop, create a custom one. Go to Pages > Add New, and name it (for example, “Shop” or “Browse Products”). This page will serve as your new shop index. You’ll add blocks here to guide customers through your catalog.
Step 2: Add a Product Search Block
Add a Product Search block at the top. This provides a search bar so users can quickly find specific items. Please place it in a prominent spot (often above or to the side of the product listings) so it’s immediately visible. This lets customers search your entire store directly from the shop page.
Step 3: Add a Product Categories List
Next, insert a Product Categories List block. This displays your product categories in a list, dropdown, or image grid. For example, you can show main categories with thumbnails or enable counts. This block helps customers navigate by category. In its settings, you can enable category images or product counts as needed.
Step 4: Insert the Product Filters Block
Place the Product Filters block on this page as well (e.g., in a sidebar or above the products). It works just like before: it will offer dynamic filters for price, attributes, stock status, and ratings. Having it on the shop page means customers can immediately narrow the entire catalog by the filters you set up earlier.
Step 5: Add a Featured Product Block
Optionally, add a Featured Product block here too. This could spotlight a sale item or a new arrival. Insert it somewhere on the shop page (top or middle) with a custom headline or background. It’s an eye-catcher to drive conversions. As noted, choose a product and customize the text and style to make an offer stand out.
Step 6: Publish and Assign the Shop Page
After arranging your blocks, publish the page. Then go to WooCommerce > Settings > Products and set this new page as your Shop page. This ensures WooCommerce uses your custom layout as the main product catalog. Now your block-built page will greet visitors instead of the theme default.
Optimizing Performance and Stability While Using Blocks
Use Fast, WooCommerce-Optimized Hosting
Many WooCommerce blocks (like filters, carts, and product grids) load dynamic data. When your server becomes slow or overloaded, it may also slow down pages or even ruin the experience. Choose a hosting provider tuned for WooCommerce: one that supports full-page caching (with proper WooCommerce exclusions), PHP optimization, and resource scaling. For example, ensure that the cart and checkout pages are excluded from caching so totals update correctly. A good host will handle dynamic queries efficiently and avoid common pitfalls like accidentally caching the checkout page. In short, block-heavy pages need a speedy backend, or customers may encounter timeouts or stale data.
Keep WordPress and WooCommerce Updated
Always run the latest stable releases. WooCommerce block features are updated frequently, and newer versions may fix block bugs or unlock new options. The official docs stress updating WP and WooCommerce to leverage the latest features. In practice, this means if a block isn’t behaving (for example, showing limited “Advanced” options in the sidebar), try updating and retesting. An up-to-date stack helps blocks remain stable and compatible with each other.
Test Changes in a Staging Environment
Before pushing large block changes live, test on a staging site. Many WooCommerce hosts (including Voxfor) offer one-click staging. In staging, you can safely add or remove blocks, update plugins, and preview new layouts without affecting your live store. This way, you can catch conflicts early. As one host puts it: “Test and preview changes in a secure staging environment…before pushing them live”. Use that to ensure performance and layout are solid.
Review Plugins and Block Choices
Finally, audit any plugins or custom code when using blocks. Some plugins (especially page builders or outdated extensions) may not support block editing fully. If you notice errors after adding a block, disable plugins one by one to find conflicts. Also, avoid overly complex layouts: too many nested columns or heavy blocks on one page can slow down the editor. Sometimes, splitting content into multiple pages is better. Stick to core WooCommerce blocks and trusted block plugins. In summary, good performance and stability come from fast hosting, updated software, testing, and sensible block use.
Troubleshooting Common Issues with WooCommerce Blocks
Block Doesn’t Appear on the Frontend
If a block is visible in the editor but not on your live site, first check its settings. Make sure any required fields in the block sidebar are filled in (e.g., a Featured Product block needs you to select a product). Next, ensure your theme supports block editing. Some older themes aren’t fully compatible with WooCommerce’s newer blocks. As the guide, try switching to a fully block-compatible theme (like Storefront or Astra) if needed. Lastly, verify you’re on the latest WP/WooCommerce versions. In many cases, updating resolves display issues.
Layout Breaks or Looks Off
If your page layout becomes jagged or misaligned, it usually means blocks were placed incorrectly or styled inconsistently. For example, you may have put a block inside another block by mistake, or your columns got mismatched. Use the List View in the editor to inspect the block hierarchy and drag items to the correct parent. Also, check for CSS conflicts: try disabling other plugins (or the theme temporarily) to see if a style is causing the issue. Sometimes, simply re-inserting a problematic block fixes weird spacing. Group related blocks and apply uniform spacing or alignment settings to keep things tidy. In short, clean up block structure via List View and eliminate conflicting styles to fix broken layouts.
Cart or Checkout Totals Don’t Update
If customers report that the cart or checkout won’t update (e.g., subtotal stays the same), the culprit is often caching. WooCommerce dynamic pages require live data; if your server or a plugin caches them, blocks can break. As noted in a troubleshooting guide, this usually points to a caching or server issue. Make sure any full-page caching excludes your Cart/Checkout pages. If using a host like Voxfor, these pages are auto-excluded from cache by default. Otherwise, clear your cache and test again. If problems persist, check server error logs or switch to a local environment to pinpoint the issue. Often, disabling a caching plugin for a moment will immediately restore correct totals.
Switching Back to Classic WooCommerce Templates (If Needed)
Transform Cart and Checkout Blocks
If you encounter a compatibility issue (for example, a payment gateway that needs the old layout), you can revert the Cart and Checkout blocks to their shortcode versions. To do this, edit the Cart or Checkout page, select the Cart/Checkout block, and click the Transform icon in the block toolbar. Then choose Classic (Shortcode). This converts the block into a placeholder for the legacy shortcode. After saving, the cart or checkout will display using the classic templates again. This is an easy one-click swap built into the editor.
Revert Other Templates via Site Editor
For other WooCommerce templates (like the product or category pages), WooCommerce includes a “Revert to Classic Template” option. In the WordPress Site Editor (Appearance > Editor), navigate to the template you want to revert (e.g., Single Product, Shop, Product Search Results). In the sidebar under the Template tab, look for the Revert to Classic Template button. Clicking this will replace the block-based template with the old classic version for that template. WooCommerce docs show this for product catalog, single product, order confirmation, and search result templates.
Replace Blocks with Shortcode Manually
As a fallback, you can manually restore the old layout using shortcodes. On any page (Cart, Checkout, or even Product pages), delete the WooCommerce block and insert a Shortcode block instead. Then enter the classic shortcode:
- For Cart pages: [woocommerce_cart]
- For Checkout pages: [woocommerce_checkout].
- After saving, that page will show the legacy layout. This manual method works anywhere (including pages outside the Site Editor) and ensures full compatibility with older plugins or custom templates.
Launching High-Performance WooCommerce Stores
Test Everything on Staging First
Before making a WooCommerce store live, double-check all block-based pages in a staging environment. Ensure product blocks display correctly (all products, categories, filters), and that adding to cart and checkout work smoothly. Testing on staging helps catch issues without affecting customers. Many hosts make this easy – for example, the Voxfor platform offers a staging area so you can “test and preview changes in a secure environment”. Use that to validate block layouts and troubleshoot potential problems ahead of launch.
Use Scalable Hosting and Caching
Select a web hosting plan with the capacity to increase with the traffic. WooCommerce sites often experience spikes (sales, promotions), and you need resources ready. A host with automatic scaling or a high-performance stack (PHP 8.x, fast MySQL, etc.) will keep pages fast. Also, enable a caching solution that’s compatible with WooCommerce (like LiteSpeed + LSCache, or a managed Redis setup). Voxfor, for example, uses LiteSpeed technology to “boost performance by reducing load times, improving caching”. Proper caching of static content (CSS, JS, images) while excluding dynamic WooCommerce endpoints ensures your block-powered pages load quickly, even under load.
Final Launch Checklist
Before going live, review these key points: All block content is published (no draft blocks), your custom shop page is assigned in WooCommerce settings (see above), and you’ve backed up your site. Make sure your SSL certificate is active (checkout needs HTTPS), and run speed tests on your pages. Check SEO basics: each block (images, headings, text) should be optimized since block content is indexable. Once live, monitor your Core Web Vitals and customer feedback. If any page is slow, revisit hosting optimizations or simplify the block layout. This checklist will help you check your launch of a high-performance WooCommerce.
Expert-Level Techniques for WooCommerce Block Users
Create and Reuse Block Patterns
When you build a complex section (like a featured product grid or custom call-to-action) that you want to use on multiple pages, save it as a block pattern. In the editor, select the blocks you’ve arranged, click the options menu (⋮) and choose Create Pattern. Please give it a name and save it. Now this group of blocks appears under Patterns, and you can insert it on any page with one click. Block patterns are perfect for repeating sections consistently across your store (e.g., an email signup footer, or a hero with product cards). They save time and ensure uniform design.
Lock Critical Blocks
To protect important layouts from accidental edits, use the Lock feature. Click a block (or group), then open the “More Options” menu and select Lock. You can disable moving the block or deleting it (or both). Locked blocks can still have their inner content edited, but they can’t be removed or shifted. This is useful on pages managed by multiple people: for example, lock the main Shop page layout or key header blocks so that site editors can only change text but not break the structure.
Extend WooCommerce Blocks (Advanced)
For developers or advanced users, the WooCommerce block system can be extended with custom code. You can register your block variations or create entirely new blocks using React (via the Block API). For example, some developers build blocks that integrate custom product galleries, dynamic pricing tables, or special checkout fields. This goes beyond the default WooCommerce plugin. If you need more flexibility than the built-in blocks, consider hiring a developer or using third-party block plugins. The WooCommerce developer resources provide guides on building custom blocks if you want to dive in.
Summary and Final Thoughts
WooCommerce Blocks transform store customization into a visual, intuitive process. In this guide, we covered everything from inserting product grids and filters to customizing the cart and checkout pages using blocks. The key is that almost every part of your store can now be edited with drag-and-drop blocks – no template hacking needed. As you’ve seen, you can design conversion-friendly pages (featuring products, categories, search, and calls-to-action) all within the editor. Remember to keep your WordPress and WooCommerce updated, test on a staging site, and ensure your hosting is optimized for WooCommerce dynamic pages.
Advanced features like saving block patterns and locking layouts help streamline complex stores. Blocks may change how you build sites, but they give you more flexibility and control over the shopper experience. By following the steps above and using powerful hosting, you can create a WooCommerce store that looks professional and runs smoothly. For example, specialized WooCommerce hosting (like Voxfor WooCommerce plans) includes performance enhancements, such as LiteSpeed caching and staging environments, that keep block-built stores fast and reliable.
Frequently Asked Questions (FAQ)
WooCommerce blocks are Gutenberg blocks for building store pages. You insert them in the WordPress editor (post/page or site editor) to display products, categories, carts, checkout forms, etc. Each block has settings in the sidebar. For example, the All Products block can show your product catalog in a grid. To use them, just add a block and configure its options – no coding required.
No extra plugin is needed if you’re on WooCommerce 7+. Blocks are built into WooCommerce now. You can use any theme, but for full-site editing, WooCommerce recommends a block-based theme. With a block theme, you can edit shop and product templates directly. With a classic theme, you can still add WooCommerce blocks on individual pages, but you won’t edit templates in the site editor. (If you need to switch back, WooCommerce provides revert options.)
To show products, use blocks like All Products (Product Grid) or Featured Product. These let you display multiple items or spotlight one item. To allow customers to narrow results, use the Product Filters block. Place it on your shop page, and it will list filters (price range, attributes like color/size, stock) based on your product data. If filters are missing, just create those attributes in Products > Attributes and assign them to products. The Filter block will automatically pick them up.
Yes. WooCommerce provides dedicated Cart and Checkout blocks. To use them, edit the Cart or Checkout page, delete any old [woocommerce_cart] shortcode, and insert the corresponding block. These blocks come with sections (product list, coupon field, billing form, order summary, etc.) that you can move, remove or style. For instance, the Cart block includes quantity controls and a coupon field, which you can edit or reposition as needed. This lets you fully redesign the checkout experience without code.
WooCommerce allows fallbacks if blocks cause issues. For Cart/Checkout, select the block and use the Transform menu to change it into the classic shortcode version. For other templates (Shop, Product, etc.), the Site Editor has a “Revert to Classic Template” button in the settings sidebar. As a manual option, you can delete a block and insert a Shortcode block with [woocommerce_cart] or [woocommerce_checkout] to restore the legacy layout. This ensures compatibility with any extensions that require the old templates.
Conclusion
WooCommerce Blocks gives you powerful, code-free tools to design your store. By following this tutorial, you can confidently build product pages, add advanced filters, and customize cart/checkout layouts using only the WordPress editor. Experiment with different blocks and configurations, and use the troubleshooting tips above to solve any issues. Remember to update your software regularly and test changes in staging. Blocks, combined with a reliable WooCommerce host, enable you to create an attractive, high-converting store without complex development.
About the writer

Hassan Tahir wrote this article, drawing on his experience to clarify WordPress concepts and enhance developer understanding. Through his work, he aims to help both beginners and professionals refine their skills and tackle WordPress projects with greater confidence.