WooCommerce Store Editing

Store Editing enables you to edit parts of your store without the need to code. It is a collection of features/elements that include:

• Blocks – content elements that you add to your store.
• Templates – designs for pages and posts.
• Block Themes – themes with templates entirely composed of blocks.
• The Block Editor – the platform you use to customize the pages of your store.
• Styles – appearance customizations for the whole store.

You can find more information on each of these features and elements below.

Requirements

↑ Back to top

We recommend updating WordPress and WooCommerce to the newest stable version. The minimum requirements are:

• WordPress 6.4+
• WooCommerce 8.3+
• A site using a block theme.

Blocks

↑ Back to top

What are Blocks 

Blocks are content elements that you add to your store. Each item you add to a post or page is a block. You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more.

You can drag and drop blocks to your pages or templates via the Editor.

Anatomy of a Block

↑ Back to top

Each block consists of a Block Toolbar, a Block Settings Sidebar, and the Block Content. Depending on the block’s purpose, the buttons of the Block Toolbar will change and so will be settings items in the Block settings sidebar.

WooCommerce Blocks

↑ Back to top

There are several WooCommerce blocks you can use to showcase your products in different ways, wherever you’re using the Editor. Some of the available WooCommerce Blocks are:

• Products by Tag
• Featured Product 
• Hand-picked Products
• Best Selling Products
• Products by Category
• Newest Products
• On Sale Products
• Products by Attribute
• Top Rated Products

As the block names suggest, you can create grids of products based on tags, featured products, attributes, and more.

Block Patterns

↑ Back to top

A block pattern is a group of blocks that you combine to create reusable layout elements. You can reuse block patterns and place them anywhere in the content or a block theme.

To explore block patterns:

1. Navigate to WP Admin Dashboard  > Appearance > Editor.
2. Click on the + icon located at the top toolbar of your screen.
3. Click on the Patterns tab.

You can use the dropdown menu that is located next to the Explore button, to view block patterns specifically related to headers, footers, buttons, etc.

You can move block patterns around or remove them just like you would do with any block.

Templates

↑ Back to top

What are templates

↑ Back to top

Templates are groups of blocks combined to create a design for a page. 

You can create custom templates or use templates provided by the theme or a plugin. When you make changes to a template, the editor updates the blocks on all pages/posts that use the template. 

More information about the Template Editor can be found here.

Viewing all available templates

↑ Back to top

To view all available templates:

1. Navigate to WP Admin Dashboard  > Appearance > Editor.
2. Click on the W icon located at the top left of your screen.
3. Click on Templates.

Alternatively, you can:

1. Navigate to WP Admin Dashboard > Appearance > Editor.
2. Click on the arrow next to Page.

Click on Browse all templates.

Template parts

↑ Back to top

Block template parts are essentially groups of blocks that are meant to be reused throughout the theme, within various block templates. Using template parts ensures that standardized content, such as headers and footers, stays the same across templates.

To add a template part to a block template, you can follow the same process as when adding a block. Use the aptly named Template Part block to choose an existing block template part, or create a new one. More information on the Template Part block can be found here.

To view all available template parts:

1. Navigate to WP Admin Dashboard  > Appearance > Editor.
2. Click on the W icon located at the top left of your screen.
3. Click on Template Parts.

WooCommerce templates

↑ Back to top

WooCommerce currently provides the following customizable templates out of the box:

• Single Product
• Product Catalog
• Products by Category
• Products by Tag

If your theme comes with any of the above templates, they will automatically override the WooCommerce default ones.

Parts of a WooCommerce template may be represented by a placeholder block indicating where your content will appear. For example, the Products by Category template features a WooCommerce Products by Category Template.

Customizing WooCommerce templates

↑ Back to top

WooCommerce templates are customizable. You can move placeholders around and add further blocks around them to extend and customize the template. 

It is recommended that you do not delete placeholders blocks from your templates, to avoid unintended effects on your store. 

If you delete a placeholder block while customizing a WooCommerce template, and wish to add it back, it is necessary to first clear all your customizations.

Clearing template customizations

↑ Back to top

To clear all the customizations you have made to a template:

1. Navigate to WP Admin Dashboard  > Appearance > Editor.
2. Click on the W icon located at the top left of your screen.
3. Click on Templates.
4. Locate the template with the customizations you want to clear.
5. Click on the three-dot icon.
6. Click “Clear customizations”.

Alternatively, you can:

1. Open the Editor.
2. Select/Open the template with the customizations you want to clear.
3. Click on the down arrow next to the template name.
4. Click “Clear customizations”.

Block Themes

↑ Back to top

What is a block theme

↑ Back to top

A block theme is a theme with templates entirely composed of blocks. This means that not only the post or page content is made of blocks but all areas of the site are made from blocks, including headers, footers, sidebars, and other elements. 

How do I find a block theme

↑ Back to top

To explore available block themes:

1. Navigate to WP Admin Dashboard > Appearance > Themes. 
2. Click on “Add New” next to Themes.
3. Click the “Feature Filter” option.
4. Select “Full Site Editing”.
5. Click “Apply Filters”.

All of the themes shown listed with the filter are block themes. 

Block themes cannot be previewed before they are selected because the Site Editor only works with the currently activated block theme. This means that the Live Preview button is not displayed for inactive block themes.

To customize a block-based theme, you need to activate it first. If you’re concerned about doing so, it’s recommended that you set up a test site first to explore the theme.

The Editor

↑ Back to top

What is the Editor

↑ Back to top

The Editor is where you can make changes to your store. It’s a cohesive experience that allows you to directly edit and update content on your store’s pages and see what your site will look like.

Accessing the Editor

↑ Back to top

After activating a Block theme on your site, you will see the options under your Appearance menu change to show the option “Editor (beta)”.

Anatomy of the Editor

↑ Back to top

The Editor consists of three major areas:

• The Block Inserter area
• The Content area
• The Settings Sidebar area

Adding Blocks in the Editor

↑ Back to top

There are multiple ways to insert blocks throughout pages. 

• At the top left of the page, you’ll notice a toolbar with a + icon. This is the Block Inserter. If you click it, it will allow you to search for blocks and insert them. Also shows additional information per block and a small preview.
• In the editor field, you will see a block inserter option, also with a + icon when you click above, in between, or below blocks that you already have in the editor.

Pro tip: A shorthand trick for adding a new block is to type “/” and the block name that you want to insert. This is called the Slash command.

Searching for Blocks

↑ Back to top

You can search for blocks using:

• The block inserter – type the beginning of a block name or keyword, for example, “image” or “heading”, in the inserter’s search field.
• The Slash Command – start typing the beginning of a block name or keyword and auto-suggested search results will appear.

Deleting Blocks

↑ Back to top

To remove a block:

1. Select the block.
2. Click on the three-dot icon.
3. Select Remove.

Another way to delete a block is to select the block and click the Backspace button on your keyboard.

Some templates may include placeholder blocks that indicate where the actual content of your store will appear once you publish your changes. 
It is recommended that you do not delete placeholders blocks from your templates, to avoid unintended effects on your store.

Redoing or Undoing actions in the Editor

↑ Back to top

On the top left of the page, next to the block inserter, you have the ability to undo and redo actions on your page.

The List View

↑ Back to top

The block outline is a helpful option for navigating documents with many blocks so you don’t have to scroll endlessly. 

To open the block outline and see a list view of all the blocks that make up your post or page, click on the icon made up of three lines that look like a bulleted list. By clicking on a given block, you’ll be led to that block within the editor field.

More information about List View can be found here.

Exiting the Editor

↑ Back to top

To return to your store’s admin area:

1. Click on the W icon located at the top left of your screen.
2. Click on Dashboard.

Styles

↑ Back to top

The theme you choose for your store defines many aspects of your store’s design, such as background color and typography settings like font family and font size. 

With Styles, you can customize these elements as much as you’d like. You can set default colors for blocks, and create your own custom color palette. More information about Styles can be found here.

To customize your store’s Styles:

1. Navigate to WP Admin Dashboard > Appearance > Editor. 
2. Click on the ​​Styles button in the top right corner of the editor.
3. Select Typography, Colors, Layout or Blocks and customize their options.

Typography

↑ Back to top

Use the Typography settings to manage the appearance of the text used throughout your site. You can adjust settings separately for regular text and for links. 

Colors

↑ Back to top

Use the Colors settings to manage the color palettes for the global elements of your store.

You can adjust the theme’s default colors to your liking or add new ones to your store’s color palette.

Layout

↑ Back to top

Use the Layout settings to add padding to your entire site’s structure.

Blocks

↑ Back to top

Use the Blocks style settings to customize the appearance of blocks across your entire store.

Here, you will see a list of all the blocks you can customize at a site-wide level. Choose a block to see the available options for that block. For example, you can add a border radius to every image block on your site, as shown below.

The changes you make to blocks using Styles will affect every block of that type that you have added to your store, unless you have customized a block individually.

Frequently Asked Questions

↑ Back to top

I accidentally removed a placeholder template block and cannot add it back.

↑ Back to top

At the moment it is not possible to add a placeholder template block back in the template via the inserter if you have customized the template. 

To be able to add a placeholder template block back to a template you first need to clear all your customizations from that template. 

Is it possible to edit all WooCommerce archive templates at once?

↑ Back to top

It is not currently possible to edit all archive templates at once. If you wish to edit your WooCommerce archive templates (Product Catalog, Products by Category, Products by Tag templates) it is necessary to edit each one individually.

If I customize the appearance of an individual block will it affect all other blocks of that type on my store?

↑ Back to top

Only the changes you make to blocks using Styles will affect every block of that type that you have added to your store. If you customize a block individually it will not affect other blocks of that type.

Moreover, customizing the style of a block will not override the customizations you have previously made to a specific block of the same type. 

For example, let’s say you add a Buttons block to your Contact page and set it to have a yellow background color. You then use Styles to customize the appearance of button blocks on your store. The customizations you make using Styles won’t override that yellow color. Only the Button blocks with the default styles will be affected by the change in Styles.

Questions and Support

↑ Back to top

Do you still have questions and need assistance? 

• If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the Woo Marketplace.
• Need ongoing advanced support, or a customization built for WooCommerce? Hire a WooExpert agency.
• Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know! 🙏