WooCommerce & FSE

WooCommerce & FSE

The WooCommerce post type as of 10/3/23 is still not fully integrated with the block editor and by default still uses the “classic” editor.

While it is possible to activate the block editor for any post type, Woo Products use the data from many fields beyond just the_content(); doing so wouldn’t be particularly valuable for individual posts especially since the main content field in the product post type is buried in a tab in the Product Details display.

It would be natural to assume that the traditional process of customizing Woo php templates in a “woocommerce” folder in your theme would still apply, but that is incorrect! Woo templates are part of the block based approach if you are using a FSE theme.

Because a FSE theme contains a relatively empty index.php file WordPress is triggered to activate the file found at: /wp-includes/template-canvas.php for ALL templates.

<?php
/**
 * Template canvas file to render the current 'wp_template'.
 *
 * @package WordPress
 */

/*
 * Get the template HTML.
 * This needs to run before <head> so that blocks can add scripts and styles in wp_head().
 */
$template_html = get_the_block_template_html();
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<?php echo $template_html; // phpcs:ignore WordPress.Security.EscapeOutput ?>

<?php wp_footer(); ?>
</body>
</html>

in essence this file tells WordPress to look for HTML files in the “/templates” folder of the theme and if the template in question is not there, then it looks for replacement files somewhere else … in this case the source of these default files come from the WooCommerce plugin …

If you navigate to => appearance => editor => templates you will see that there are templates for:

  • Product Catalog
  • Product Search Results
  • Products by Attributes
  • Products by Catalog
  • Products by Tag
  • Single Product
  • Checkout
  • Order Confirmation
  • Cart

… and you will see confirmation of the source

Like any other FSE template, these can be modified and edited, and those changes will be kept in the database – changes can be quickly undone via the “clear customizations” function.

There are quite a few Woo related blocks to use in these templates by default.

In the “Theme” Panel

  • Products
  • Mini-Cart
  • Product Title
  • Product Summary
  • Product Categories
  • Product Tags

In the WooCommerce Panel

  • Product Search
  • All Products
  • All Reviews
  • Store Breadcrumbs
  • Catalog Sorting
  • Customer Account
  • Featured Category
  • Featured Product
  • Active Filters
  • Filter by Price
  • Filter by Stock
  • Filter by Attribute
  • Filter by Rating
  • Hand Picked Products
  • Mini Cart
  • Best Selling Products
  • Products Category List
  • Products by Category
  • Newest Products
  • On Sale Products
  • Products Results Count
  • Products by tag
  • Top Rated Products
  • Products by Attribute
  • Reviews by Category
  • Reviews by Product
  • Single Product
  • Cart
  • Checkout
  • WooCommerce Single Product Block
  • Add to Cart with Options
  • Product Details
  • Product Reviews
  • Related Products
  • Product Meta
  • Product Price
  • Product Rating

You can save any of these templates to your theme directly under the templates folder – no nested folder required.

It should be noted that at least two of these blocks are actually drawing in several pieces of information at once:

Add to Cart with Options – add to cart button, compare function, wishlist function
– none of these elements have separate blocks

Product Details – long description, additional information, reviews – all showed in tabs
– only reviews has a separate block

Just as with php based WooCommerce theming if you want to break up the tabbed interface in the Product Details section there is little attempt to make this easy..

This plugin includes three of those detail blocks – but includes quite a bit of other functionality that seems unnecessary if you understand the FSE principles.

Admittedly this is quite a bit of weight just to get these three blocks:

  • Product Add to Cart
  • Product Additional Information
  • Product Description

But if you don’t want the Product Description or Additional Information buried in tabs this seems the best option right now.

Final comment: FSE does not provide navigation to the customizer, although some of those controls are useful – or even necessary in terms of Woo. This snippet will make it easier to get there…

access-customizerDownload

UPDATE:

source: https://fullsiteediting.com/lessons/woocommerce-and-full-site-editing/

Compared to classic, PHP based themes, you do not need to create a custom woocommerce folder to override the plugin templates. Instead, you place all your HTML templates in your theme’s templates folder.

These are the template file names that are known so far (in WooCommerce 8.6.1) that you can use to override the plugin templates:

TemplateBlock theme file
Product Search Resultsproduct-search-results.html
Products by Categorytaxonomy-product_cat.html or archive-product.html
Products by Attributetaxonomy-product_attribute.html or archive-product.html
Product Catalog (shop page)archive-product.html
Products by Tagtaxonomy-product_tag.html or archive-product.html
Single Productsingle-product.html
Checkoutcheckout.html
Cartcart.html
Order Confirmationorder-confirmation.html

Note that using the file names page-checkout.html and page-cart.html will no longer replace the default templates.

Besides the templates, you may also want to edit the Mini cart template part. The file name is mini-cart.html and you place it in the parts folder.