Shop pages and the checkout blocks

Module 2: Installing and setting up · Reading time: 9 minutes

Learning objective: After this lesson you can recognise the WooCommerce shop pages and link them correctly, and you make a deliberate choice between the blocks and the shortcodes for the basket and checkout.

Key concepts: shop page, basket, checkout, My account, terms page, page setup, blocks, shortcodes, block theme, classic theme, extension compatibility, noindex

Four pages with a special role

A WordPress site consists of pages and posts (WordPress course, lesson 4.2). WooCommerce adds products as a separate post type, and gives a few ordinary pages a special role. In the list under Pages, these look like any other page, but WooCommerce knows which page has which task. That is stored in the settings, not in the name or address of the page.

Because the link lives in the settings, you can give the pages a different title and a different address. Theehuis Example calls its basket "Mandje" at /mandje/, and that works, as long as that page is set as the basket under Page setup.

If the link goes wrong, you notice it in odd places. A few common examples:

• Someone deletes the Basket page because "it was there twice". After that, a visitor who clicks Add to basket lands on an error page, and some themes no longer show the basket in the header.
• After a migration or import, a different page is linked to Checkout than the page with the checkout block. The visitor sees an empty page and cannot order.
• A second page "Checkout-2" appears after running the wizard a second time. One page is linked, the other is in the menu.

So after every major change (theme, migration, import), check under Page setup which page is linked, and click through to that page.

Blocks or shortcodes

There are two ways the basket and checkout end up on the page.

Shortcodes are the old way: the page contains a short code in square brackets, such as [woocommerce_cart] and [woocommerce_checkout]. When the page is displayed, WooCommerce replaces it with the form. The styling comes from the theme, and a great many extensions were built for this form for years.

Blocks are the new way: the page contains the Basket or Checkout block, built from smaller blocks (address, shipping, payment method, summary, the order button). You see and edit them in the block editor (WordPress course, lesson 4.1). The blocks talk to the server through the Store API (lesson 2.4): the form works directly in the browser, without reloading the page each time.

Since WooCommerce 8.3 (November 2023), a new installation gets the blocks. An existing shop that updates keeps what it had. The shortcodes remain available.

Which do you choose? A few questions help:

• Do your extensions work with the blocks? This is the most important question. An extension that adds a field to the checkout (a delivery date, a VAT number, a gift message) must have been adapted separately for the blocks. The extension's page usually says whether it is "compatible with the checkout block". In the checkout block editor, WooCommerce can show a notice about active extensions that are not marked as compatible.
• Which theme do you have? The blocks fit best with a block theme (WordPress course, lesson 5.1). They also work with a classic theme, but the styling then matches less naturally.
• Do you need to change the order button? With the blocks, you set the button text in the editor. That is handy for the rules that apply to it (lesson 5.4).
• Are you happy for the Store API to be public? With blocks it must be reachable; a security plugin that closes off the REST API breaks the checkout.

Theehuis Example uses no extensions that add fields and has a block theme. It keeps the blocks. Another shop with a delivery date plugin that only works with the shortcode chooses the shortcode for now, and checks again with every major update of that plugin.

If you switch from one form to the other, do it in your test shop and then test a complete order (lesson 4.5). Under WooCommerce > Status > Tools, WooCommerce has a tool to recreate missing shop pages; it creates new pages, it does not convert existing ones.

Why the basket and checkout do not belong in search engines

A basket is different for every visitor, and always empty for a search engine. An empty basket in the search results helps nobody. That is why WooCommerce itself puts a noindex on the basket, checkout and My account pages: the search engine may visit the page, but does not include it in the search results. You see it in the source code as:

<meta name='robots' content='noindex, follow' />

An SEO plugin or theme can override that line. That is rarely intended. In this lesson's exercise you check whether it is there.

Those same three pages must also stay out of the page cache. WooCommerce sends headers with them that tell caches not to store the page. How to check that your cache respects this is covered in lesson 6.4.

What a visitor with an empty basket sees

If you open the checkout page with nothing in your basket, something different happens than with items in it:

• With the blocks, the checkout page usually shows a notice that the basket is empty, with a button back to the shop.
• With the shortcode, WooCommerce often redirects you to the basket.

Both are normal. The check in this lesson takes this into account: the program never puts anything in your basket and only looks at what a visitor with an empty basket gets to see.

In practice: this is how it looks in WooCommerce

It works similarly with other themes and hosting providers; only the styling differs.

1. Go to WooCommerce > Settings > Advanced (Advanced) and open Page setup (Page setup). Note which page is set for Basket, Checkout, My account and Terms and conditions.
2. Under Pages, click on each of those pages and check that the block (or the shortcode) is on it.
3. Open the checkout page in the editor. Click the Checkout block and look at the parts in the list view: contact information, shipping address, shipping options, payment options, note, terms, the button.
4. Check in the checkout block editor (and with the extensions themselves) whether there is a notice about extensions that are not compatible with the blocks.
5. Open the basket in a private window and view the source code (Ctrl+U): search for noindex.

Summary

• WooCommerce gives four pages a role (shop, basket, checkout, My account) plus the terms page; the link is stored in the settings, not in the name.
• After a migration, import or theme change, check the links under Page setup.
• Since WooCommerce 8.3, new shops get the blocks; the shortcodes still exist. Choose based on your extensions and theme.
• The blocks need the Store API; do not close off the REST API.
• WooCommerce gives the basket, checkout and My account a noindex, and they do not belong in the cache.

Quiz

Exercise

Exercise A2.2: Your shop pages. Enter the address of your (test) shop and the addresses of your basket, checkout page and My account (a path, such as /winkelwagen/, or the full URL on the same host). The program requests each page once, without cookies and without putting anything in the basket.

Each page is good if:

• the page responds over https with status 200;
• the HTML contains a WooCommerce marker: for the basket the block wp-block-woocommerce-cart or the body class woocommerce-cart, for the checkout wp-block-woocommerce-checkout or woocommerce-checkout, for My account woocommerce-account or a WooCommerce sign-in form;
• there is a noindex (meta robots or the X-Robots-Tag header).

If the checkout page with an empty basket redirects to the basket you entered, that is also good.

Orange: no noindex (check whether an SEO plugin or your theme removes it); the page uses the shortcode instead of the block (not an error, but it raises the question of whether that is a deliberate choice). Red: an error status such as 404, a page without a WooCommerce marker (link the right page under Page setup), a redirect to a different host, or http without https.

Afterwards, write down for yourself which form (blocks or shortcode) you use and why.

Further reading

• Free WordPress course 5.1: Themes: block themes and classic themes
• Free WordPress course 4.2: Pages, Posts, Categories and Tags
• Free WordPress course 4.1: The block editor
• WooCommerce 8.3: blocks by default for new shops (developer.woocommerce.com): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• The Store API (developer.woocommerce.com): https://developer.woocommerce.com/docs/apis/store-api/