In recent years we saw the introduction of Full Site Editing (FSE) in the WordPress ecosystem, giving users more control over their website’s design and layout. Using FSE with WooCommerce gives online store owners access to additional tools for crafting an appealing and functional shopping experience, without the need for complex coding or third-party tools.
In this article, we’ll take you through the process of setting up a WooCommerce online store with Full Site Editing. Whether you’re launching a new online store or seeking to revamp an existing one, this guide will help you harness the power of Full Site Editing to take your WooCommerce site to the next level.
Understanding Full Site Editing
Full Site Editing (FSE) is a recent feature introduced in the WordPress content management system that allows website owners and developers to have more control over the design and layout of their entire website, including headers, footers, sidebars, and, content. Traditional WordPress themes focused on controlling the design of posts and pages, leaving the structural elements of the site relatively unchanged. However, FSE enables you to customize every aspect of your site using a visual, block-based editor.
In FSE, your website is divided into blocks and templates. Blocks are individual components like headings, paragraphs, images, buttons, and more, while templates represent the layout and structure of your site. Full Site Editing allows you to modify, customize, and rearrange these elements easily, providing an intuitive way to craft websites, including WooCommerce sites, without the need for coding.
WooCommerce works with Full Site Editing through specific WooCommerce Blocks allowing you to design and customize your product pages, product listings, checkout pages, and other e-commerce elements.
Let’s take a look at some of the available WooCommerce Blocks!
WooCommerce FSE Blocks
All Products
This block will showcase all of your store’s products on any given page. Filter blocks can work in combination with the All Products block to allow your users to easily browse through your store, filtering products by attributes or price, for example.
Banner Blocks
Banner Blocks act as customizable sections that you can use to display various types of content, including product images, text, and promotional elements. They are ideal for showcasing specific products, promoting discounts, advertising sales, or featuring entire product collections. Their flexibility enables you to use them to grab the spotlight for special deals, spotlight new arrivals, or present curated collections.
Template Blocks
Template Blocks act as pluggable modules, or pieces of content that you can insert into WooCommerce templates. When several template blocks are used together, you can also create broader, more elaborate layouts.
Template blocks can include text, images, links, buttons, and other media. As a result, they are excellent tools to display, organize, and manage all kinds of content in a way that can be easily reused throughout your site, to maintain design consistency throughout all pages.
With pre-designed blocks, that you can easily customize for diverse use cases, you’ll maintain a professional look and also save time during the content creation process.
Template blocks include:
- Product Meta – Displays the product SKU and product categories in a single product template.
- Product Image Gallery – Adds an extra image gallery to your single product template.
- Product Details – Adds product descriptions, information, and reviews to your single product template.
- Related Products – Display the products related to the product of your choice.
- Product Reviews – Displays the reviews and the review form for a given product.
Cart and Checkout Blocks
When working with WooCommerce Full Site Edting, you’ll have access to checkout specific blocks, helping you improve design elements for eCommerce specific pages.
- Mini Cart block- Allows customers to check the contents of their cart from any page of the store.
- Add to Cart Form Block- Allows you to add the block version of the add to cart form in a single product template.
- Cross Sell Block – Allows you to display additional product recommendations according to the products added to the cart.
WooCommerce Template Parts
Finally we have WooCommerce block template parts, which are groups of blocks that can be reused, as a whole, throughout the theme or templates. Using template parts ensures that standardized content, such as headers and footers, stays the same across your entire website.
Setting Up WooCommerce with Full Site Editing
When setting up WooCommerce with Full Site Editing, the first crucial step is selecting a theme that is FSE-ready. This entails thorough research to find a WordPress theme that not only supports Full Site Editing but also aligns with your brand and WooCommerce needs.
With your FSE-ready theme in place, the next phase involves customizing your site using the available FSE tools. These tools include the Site Editor, Template Editor, and Block Editor. The Site Editor is a central component of Full Site Editing, allowing you to make global changes to your site’s layout, fonts, colors, and more. You’ll have the power to customize the overall structure and design of your online store.
The Template Editor allows you to create unique page templates for various sections of your site. Whether it’s product pages, blog posts, or landing pages, the Template Editor empowers you to create and modify templates to match your requirements.
The Block Editor, on the other hand, provides you with fine-grained control over the content within your templates. Here, you can add, arrange, and customize content blocks, ensuring visually appealing product descriptions, blog posts, and landing pages that captivate your audience.
As we have discussed above, there are also several WooCommerce-specific blocks that come with Full Site Editing. These elements seamlessly integrate product listings, product pages, and checkout pages into your site, guaranteeing a consistent and attractive shopping experience for your customers.
Finally, the finishing touches involve customizing your store’s header and footer. Your store’s header aids in navigation and branding, and by enhancing it, you can feature key elements that guide your customers. Likewise, the footer displays informative section with essential links.
Cons of WooCommerce Full Site Editing
When using WooCommerce with Full Site Editing, you should keep in mind that blocks don’t always display correctly with translation plugins. This is due to lack of support from the translation plugin in translating JavaScript strings in WordPress, or due to the requirement of additional steps by users to translate these strings with their selected plugins.
WooCommerce With Full Site Editing
In a nutshell, setting up your WooCommerce store with Full Site Editing is about creating a captivating shopping experience from start to finish. With the right theme, FSE tools, WooCommerce blocks, and well-crafted templates, you can build an online store that leaves a lasting impression and drives sales.
If you need help building, configuring or improving your online store, don’t hesitate to reach out to our expert WooCommerce developers. From building your store from scratch to redesigning your product pages, we can help you in all parts of your eCommerce journey.
