393 lines
22 KiB
Markdown
393 lines
22 KiB
Markdown
# Testing notes and ZIP for release 11.4.0
|
|
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13127290/woocommerce-gutenberg-products-block.zip)
|
|
|
|
## WooCommerce Core
|
|
|
|
### Enhancements
|
|
|
|
#### Store Customization > Update the "Large Footer" pattern [11381](https://github.com/woocommerce/woocommerce-blocks/pull/11381)
|
|
|
|
1. Create a new page or post.
|
|
2. Insert the `Large Footer` pattern.
|
|
3. Check that it looks like the design.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="1327" alt="Screenshot 2023-10-20 at 13 12 39" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/f5b3ed9c-3f42-4104-aab4-8b5a6de7fc96"> | <img width="1329" alt="Screenshot 2023-10-20 at 13 12 07" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/eb2da305-88c4-434d-8ef9-69166ddb3425"> |
|
|
|
|
#### [Store Customization] Update the Footer with 3 Menus pattern [11356](https://github.com/woocommerce/woocommerce-blocks/pull/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 |
|
|
| ------ | ----- |
|
|
|<img width="1305" alt="Screenshot 2023-10-19 at 15 57 55" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/e911897d-764c-491a-8dae-8bd746342378">|<img width="1292" alt="Screenshot 2023-10-19 at 15 57 13" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/c4023cc8-9ee9-4cf8-a947-6358e0346bc6"> |
|
|
|
|
#### [Store Customization] Update the Social pattern [11355](https://github.com/woocommerce/woocommerce-blocks/pull/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 |
|
|
| ------ | ----- |
|
|
| <img width="367" alt="Screenshot 2023-10-19 at 15 43 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/871bc990-30a7-4710-8f8e-93dc539b15a6"> | <img width="378" alt="Screenshot 2023-10-19 at 15 42 34" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/59966839-9fa5-4c89-a97a-6e431e60e9a8"> |
|
|
|
|
#### [Store Customization] Re-enable the Product Hero 2 Column 2 Row pattern [11346](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/ae3e12e0-b894-46b8-9027-614da9a5fb51)|[after](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/ecc7e75c-c787-486c-a000-8f951c52416e)|
|
|
|
|
#### [Store Customization] Adjust margins and paddings for the Featured Category Triple [11319](https://github.com/woocommerce/woocommerce-blocks/pull/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 |
|
|
| ------ | ----- |
|
|
| <img width="1177" alt="Screenshot 2023-10-18 at 15 55 33" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/7092f04e-268e-4341-b87d-8577506c4c52"> | <img width="1214" alt="Screenshot 2023-10-18 at 15 51 15" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/90e78844-ad5b-4777-aa6c-91c5b95589cb"> |
|
|
|
|
#### Move Spinner to components package [11317](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/11312)
|
|
|
|
1. Install [Multiple Packages for WooCommerce](https://wordpress.org/plugins/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/11230)
|
|
|
|
1. Set a product to be on sale in your store.
|
|
2. Install [Multiple Packages for WooCommerce](https://wordpress.org/plugins/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
|
|
<img width="764" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/39906db8-9833-4a83-8275-11875a479ca1">
|
|
|
|
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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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.
|
|
<img width="344" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/37a83029-e111-4115-b68e-8810e5ac2d57">
|
|
|
|
4. Visit the Cart block. Apply the coupon you created in step 1. Ensure the coupon shows correctly:
|
|
<img width="248" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/30638e26-b0ed-48e0-b8ed-21ff3e880b54">
|
|
|
|
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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/11257)
|
|
|
|
1. Setup _Site B_ on domain.com/test and use USD as the currency
|
|
5. See the Site B Mini Cart works as expected.
|
|
1. Setup _Site A_ on domain.com, lets use EUR as the currency
|
|
3. Add something to the cart on _Site A_
|
|
4. Go to _Site B_ and **don't see** its mini-cart affected by site A.
|
|
|
|
#### Fix inconsistent border focus styles [11203](https://github.com/woocommerce/woocommerce-blocks/pull/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`
|
|
|
|
<table>
|
|
<tr>
|
|
<td>Before:
|
|
<br><br>
|
|
<img width="808" alt="Screenshot 2023-10-11 at 15 58 06" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/11cdc9bc-e0b0-4934-ac3a-f52ee914ca8b">
|
|
</td>
|
|
<td>After:
|
|
<br><br>
|
|
<img width="823" alt="Screenshot 2023-10-11 at 15 54 25" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/536876ad-265e-40a4-bd29-301f3ece2936">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
##### `Textarea`
|
|
|
|
<table>
|
|
<tr>
|
|
<td>Before:
|
|
<br><br>
|
|
<img width="822" alt="Screenshot 2023-10-11 at 15 58 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/adf47ee7-1bc7-4516-8f05-e6034c327c6d">
|
|
</td>
|
|
<td>After:
|
|
<br><br>
|
|
<img width="826" alt="Screenshot 2023-10-11 at 15 54 43" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/08cf8a34-95fb-4235-8a29-27b74655164f">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
#### Product Gallery pattern: Use the Product Collection block [11194](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/11182)
|
|
|
|
1. Create a testing site using [WordPress 6.4 Beta 2](https://wordpress.org/news/2023/10/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.
|
|
|
|
<table>
|
|
<tr>
|
|
<td>Before:
|
|
<br><br>
|
|
|
|
<img width="1279" alt="Screenshot 2023-10-09 at 20 05 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/1c633575-b2ea-4389-9e87-fc98b014407a">
|
|
|
|
</td>
|
|
<td>After:
|
|
<br><br>
|
|
|
|
<img width="1280" alt="Screenshot 2023-10-09 at 20 00 50" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/58178674-6cfa-49e3-8172-95566bb192cc">
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
> **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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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 |
|
|
| ------ | ----- |
|
|
| <img width="839" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/678f8311-d242-4b7c-a140-370db44a24a0"> | <img width="686" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/b05b6ccc-6fc1-4909-8229-b777f289e2f9"> |
|
|
|
|
#### Add a safe guard that the variable is set before accessing it [11424](https://github.com/woocommerce/woocommerce-blocks/pull/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
|
|
|
|
<img width="1050" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/d7d7af04-fd50-4d9d-abb7-d07e106d82af">
|
|
|
|
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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/10888)
|
|
|
|
1. Add a new snippet to your site:
|
|
|
|
```php
|
|
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 |
|
|
| ------ | ----- |
|
|
| <img width="774" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/3912039c-7453-4308-8cce-065db02c8b09"> | <img width="756" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/f4ebf72b-eb0e-47f7-9b36-c3706099ab73"> |
|