1140.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Testing notes and ZIP for release 11.4.0

Zip file for testing: woocommerce-gutenberg-products-block.zip

WooCommerce Core

Enhancements

Store Customization > Update the "Large Footer" pattern 11381

1. Create a new page or post.
2. Insert the Large Footer pattern.
3. Check that it looks like the design.

Before	After

[Store Customization] Update the Footer with 3 Menus pattern 11356

1. Create a new page or post.
2. Insert the Footer with 3 Menus pattern.
3. Check the space between menu items is smaller than before.

Before	After

[Store Customization] Update the Social pattern 11355

1. Create a new page or post.
2. Add the Social: Follow us on social media pattern.
3. Save and check that the social icons align to the left on a mobile screen size.

Before	After

[Store Customization] Re-enable the Product Hero 2 Column 2 Row pattern 11346

1. Create a new page or post.
2. Insert the Product Hero 2 Column 2 Row pattern.
3. Check it has images and it renders correctly in the editor and the front end.

Product Collection - shrink columns to fit 11320

1. Go to Editor
2. Add Product Collection block
3. "Shrink columns to fit" is disabled by default. Enable it
4. Label of columns control should change from "Columns" to "Max Columns"
5. Play with the "Max Columns" control and make sure it's respected in the Editor
6. Narrow down the screen width and make sure the number of columns decreases as the screen gets narrower
7. Save the Editor with couple of different "Max Columns" settings and go to frontend
8. Narrow down the screen width and make sure the number of columns decreases as the screen gets narrower
9. Verify frontend on major browsers

Before	After
before	after

[Store Customization] Adjust margins and paddings for the Featured Category Triple 11319

1. Create a new page or post.
2. Add the Featured Category Triple pattern.
3. Check the margin and padding are right in the editor and the front end (check screenshots below).

Before	After

Move Spinner to components package 11317

1. Ensure you have two or more shipping zones set up on your site and each zone contains at least one method.
2. Add an item to your cart and go to the Checkout block.
3. Change country and observe the shipping options list.
4. Ensure the spinner shows while the shipping methods update.
5. Fill in your details and place the order.
6. On the "Place order" button ensure a spinner shows while it processes.

[Store Customization] Fix "Discount Banner" pattern 11315

1. Create a new page or post.
2. Add the Discount Banner pattern.
3. Check that is centered on the page (like the "after" banner in the screenshot 👇).
4. Check it works well on mobile as well.

Move RadioControland RadioControlAccordion components to components package 11312

1. Install Multiple Packages for WooCommerce and go to WooCommerce > Settings > Multiple Packages. Set the "Group by" option to Product (individual).
2. Create at least 2 pickup locations (WooCommerce > Settings > Shipping > Local Pickup)
3. Add multiple products to your cart. Ensure you add one product more than once (so you have 2+ of a single item in the cart)
4. Visit the checkout
5. In the shipping options section, switch between different options and make sure the right option is selected and they are greyed out while the http request is in progress.
6. In the shipping method section, switch to Local Pickup
7. Select one of the other pickup locations and make sure the right option is selected.
8. Scroll down to the Payment Options section.
9. Change the payment method and make sure the right option is selected.
10. Fill in all the other details, place the order and make sure it goes through ok.

[Store Customization] Fix pattern spacing in homepage template 3 11279

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly 80px between all of them.

[Store Customization] Fix pattern spacing in homepage template 2 11278

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly 80px between all of them.

[Store Customization] Fix pattern spacing in homepage template 1 11268

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly 80px between all of them.

Add: menu-order orderby option for Product Attribute Terms route 11232

1. Edit or create a new page contain Attribute Filter block.
2. See the attribute terms list sorted by custom order in the Editor.
3. Check the page on the front end, confirm the terms are also sorted by custom ordering.

Move FormattedMonetaryAmount to the components package 11230

1. Set a product to be on sale in your store.
2. Install Multiple Packages for WooCommerce and go to WooCommerce > Settings > Multiple Packages. Set the "Group by" option to Product (individual).
3. Set up local pickup (WooCommerce -> Settings -> Shipping -> Local Pickup) and add a couple of locations. Add a price to this.
4. Set up a couple of shipping options with a price.
5. Add the Filter by Price and Products (Beta) blocks to a page on your site.
6. Go to the page and ensure the Filter by Price block is displaying the correct range of product prices.
7. Check the product that you set to be on sale, it should be showing the correct sale price, and all other products should be showing the correct price too.
8. Add 2 products to your cart.
9. Go to the Cart block. Ensure all products listed in the order summary sidebar show the correct prices.
10. Ensure the shipping options shown in the Cart block show the correct prices.
11. Ensure all totals in the Cart block are show the correct price.
12. Go to the Checkout block.
13. Ensure the Local Pickup/Shipping selector shows the correct "From" price in the buttons

14. Select Shipping and scroll down to the shipping section. Ensure all shipping options show the correct price.
15. Change to Local Pickup and ensure the correct price is shown alongside the pickup location's name.
16. Ensure the totals are correct in the checkout sidebar.
17. Repeat steps 5, 6, 7 but with the All Products block.

Cart and Checkout block transforms for classic shortcodes 11228

Prerequisite: Ensure you're already using cart and checkout blocks and you have an incompatible extension installed. You can use WooCommerce Checkout Field Editor as an example.

1. Go to WooCommece > Home. There should be a task list item "Review your shopper's checkout experience". Click it. You should be taken to the page editor.
2. Edit the cart page
   1. Edit the cart page
   2. Focus on the parent cart block and click its icon. You should be able to transform to "classic cart"
   3. Refresh the editor
   4. Focus on the cart block. See the incompatibility notice in the sidebar. Click the "switch to classic cart" button.
   5. Modal should open. Click switch. Block should be replaced.
   6. In the snackbar bottom left, click "undo". Should revert back to blocks.
3. Repeat above tests for checkout block. Pay attention to wording and ensure any references to "cart" are updated with "checkout" during the process.

Move Chip and RemovableChip to components package 11223

1. Create a coupon
2. Add the Active Filters block to a page, add the Filter by Attribute block, the Filter by Stock block, and the Products (Beta) block too.
3. Visit the page, apply some filters, ensure the chips show up correctly in the Active Filters block. Remove the filters by pressing the x on the chip.

4. Visit the Cart block. Apply the coupon you created in step 1. Ensure the coupon shows correctly:

5. Remove the coupon.
6. Proceed to the Checkout block and re-apply the coupon, ensure it shows correctly and ensure it can be removed.

Move CheckboxList and create new blocksComponents package 11214

1. Add the Filter by Rating, Filter by Attribute, Filter by Stock, and Products (Beta) blocks to a page.
2. View the page and ensure all the checkboxes work correctly on each of the filter blocks.
3. View the Cart and then Checkout blocks. Ensure they render correctly.
4. Check out and ensure the Checkout form works correctly (Should not be affected by this PR but run this test anyway to make sure we didn't miss anything)

[Store Customization MVP] Add fallbacks to all the pattern titles, descriptions and buttons 11208

1. Create a new page or post.
2. Insert all the patterns in the dictionary.json file.
3. Make sure they work as expected both on the editor side and on the front end.
4. Check your PHP error log and confirm you don't see any errors related to any pattern.

Make patterns full width and fix margin 11206

Test the individual patterns

1. Create a new page or post.
2. Insert the blocks mentioned on the PR description.
3. Make sure they are Full width and look good on the editor and the front end.

Test the homepage templates Compare the 3 templates show below to the designs: Mrk6SERPZ4KrFHSjM0a8TK-fi-5716_46688

Homepage 1	Homepage 2	Homepage 3

Product Collection 5 Columns pattern - Update title and price to be rows instead of columns 11205

1. Create post or page.
2. Insert the Product Collection 5 Columns pattern and check that the title and price are stacked rather than side-by-side.
3. Ensure the spacing between the title and price is consistent with other Product Collection patterns. You can check by searching Product Collection under the patterns tab to find others.

Before	After

Product Collection: Featured Products 5 Columns - Remove no results block. 11198

1. Create new page or post
2. add Product Collection: Featured Products 5 Columns pattern
3. Ensure the wp:query-no-results block isn't rendered and that the text Add text or blocks that will display when a query returns no results. isn't present.

Before	After

Bug Fixes

Remove hardcoded queryIds from patterns that include Product Collection 11290

1. Go to Editor
2. Add patterns:
   • Product Collection Full Grid
   • Product Collection Grid
   • Product Collection Rows
   • Product Collection Simple Grid
   • Product Gallery
3. Save and go to frontend
4. Change the pages of each Product Collection
5. Expected: Each Product Collection changes pages independently and layout of Product Collection doesn't change

Fix: Mini-Cart block shows wrong total if theres multiple installs on the same domain 11257

1. Setup Site B on domain.com/test and use USD as the currency
2. See the Site B Mini Cart works as expected.
3. Setup Site A on domain.com, lets use EUR as the currency
4. Add something to the cart on Site A
5. Go to Site B and don't see its mini-cart affected by site A.

Fix inconsistent border focus styles 11203

1. Create a test page and add the Checkout block to it.
2. Go to the frontend and add a product to the cart.
3. Go to the checkout and select these fields: Text input, Textarea, Radio input, and Checkbox input.
4. Verify that the border focus styles of the Text input and Textarea are identical.
5. Verify that the border focus styles of the Radio input and Checkbox input are identical.

Important Only the border focus styles of the Radio input and Textarea were adjusted in this PR, as the Text input and Checkbox input focus styles were already correct.

Radio input

Before:

After:

Textarea

Before:

After:

Product Gallery pattern: Use the Product Collection block 11194

1. Create a page and add the woocommerce-blocks/product-query-product-gallery pattern.
2. Ensure that Add "remove more" link text doesn't appear in the editor above the price.
3. Ensure that it looks accurate on the frontend based on what you see in the editor.

Increase number of visible products when cart is empty 11182

1. Create a testing site using WordPress 6.4 Beta 2.
2. Ensure that you are using the Twenty Twenty-Four theme.
3. Ensure that you have at least four products of which at least one of the most recent ones has a discounted price.
4. Create a test page and add the Cart block to it.
5. Switch the view from Filled Cart to Empty Cart.
6. Verify that four products are visible and that the sales badge is shown within the product image.
7. Go to the frontend.
8. Do not add a product to the cart and go directly to the test page with the cart block.
9. Verify that four products are visible and that the sales badge is shown within the product image.

Before:

After:

Note Depending on the screen size, the sales badge might overlap or be visible next to the product image.

Copy shipping phone to billing phone if sync is checked 10603

1. In Checkout, make sure the "use shipping as billing" is filled.
2. Fill out the phone number.
3. Uncheck the checkbox, the value should be copied.
4. Update shipping, it shouldn't keep syncing.

Always show the Enable the shipping calculator on the cart page option in WC Admin 11421

1. Go to WooCommerce -> Settings -> Advanced - set the Cart page to one containing the Cart Block. Save.
2. Go to WooCommerce -> Settings -> Shipping -> Shipping Options - confirm the Enable the shipping calculator on the cart page option is displayed.
3. Check the Enable the shipping calculator on the cart page option and save.
4. Add a product to the cart and go to the Cart page. Confirm the shipping calculator is displayed
5. Go to WooCommerce -> Settings -> Shipping -> Shipping Options - Uncheck the Enable the shipping calculator on the cart page option and save.
6. Go to the Cart page on the front-end. Confirm the shipping calculator is hidden.

Before	After

Add a safe guard that the variable is set before accessing it 11424

1. Go to Editor
2. Add Product Collection block
3. Enter Code Editor mode
4. Find and remove "shrinkColumns":false" - it will mimic the case it's undefined

5. Save the page/template and go to frontend
6. Make sure there's no warning and Product Collection is rendered in non-responsive mode (when you narrow down the screen it will preserve the number of columns and finally collapse to single one for mobile view)

Documentation

Add order and checkout order endpoint documentation 11157

1. Check that the docs look complete

Should be tested by the development team exclusively

Use the main tag in Cart and Checkout templates 11224

1. Install and activate a blocks theme eg TT3/TT4
2. Go to Appearance > Editor > Templates > Manage All Templates
3. Ensure Page: Cart and Page: Checkout do not have customizations (or delete them if so), and enter edition mode for each one
4. On List View select Group after the Header (Checkout Header on Page: Checkout template), open Block > Advanced pane and ensure HTML ELEMENT is set to <main>
5. Do a test purchase, and on the cart and checkout pages verify the content is wrapped under a <main> tag

Update wording on checkout error message to try to prevent retries 10888

1. Add a new snippet to your site:

add_filter( 'wp_mail', function( $args ) {
  exit;
} );

2. Add an item to your cart and go to the Checkout block.
3. Place your order and verify the error shows with the correct wording.

Before	After