[](https://git-todo.netlify.app/create)
Zip file: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/5090607/woocommerce-gutenberg-products-block.zip)
## Cart & Checkout <!-- heading -->
### Order note <!-- heading -->
- [ ] Go to the Checkout block and check the 'Add a note to your order' checkbox.
- [ ] Introduce some text in the text area that appeared.
- [ ] Place the order and go to the admin, WooCommerce > Orders and verify the order has the note under Customer provided note.
### Autocapitalize address form fields <!-- heading -->
- [ ] Visit the Checkout page with a handheld device with Chrome for Android or iOS Safari.
- [ ] Navigate through the input fields in the address form.
- [ ] Verify when a field is focused, the keyboard shows capital letters by default according to the settings.
- [ ] Add the Cart block and switch to the Empty Cart edit mode.
- [ ] Replace the Newest products block with the All Products block. Feel free to add other JS-rendered blocks like a filter or a Reviews block.
- [ ] View the page in the frontend.
- [ ] Verify all blocks render correctly when the cart is empty.
- [ ] Try adding a product to the cart (so it switches to the Full Cart view) and removing it (so it switches back to the Empty Cart view).
- [ ] Verify the blocks still render correctly.
### Don't show sale badge if saving are negative <!-- heading -->
You will need Product Add-ons extension to test this. <!-- heading -->
- [ ] Add a product with a priced add on.
- [ ] Add the product to your cart, with the add on enabled.
- [ ] See that the price is shown without a negative discount value.
### Respect payment gateways order set by merchant <!-- heading -->
- [ ] Set up a few different payment methods.
- [ ] Reorder your payment methods how you like in WooCommerce > Settings > Payments, then click Save changes to persist.
- [ ] On front end, add stuff to cart and proceed to checkout.
- [ ] Payment methods should display using the order you chose.
- [ ] Complete a few test purchases to confirm that payment methods are still working and there are no regressions in checkout.
- [ ] Also test payment methods that may be hidden based on checkout state, e.g. make COD only available with specific shipping methods.
### Show Checkout block in Editor when 'guest checkout' is disabled <!-- heading -->
- [ ] Go to WooCommerce > Settings > Accounts & Privacy and uncheck Allow customers to place orders without an account.
- [ ] Edit a page with the Checkout block.
- [ ] Verify the whole Checkout block is rendered in the editor, instead of only showing the `You must be logged in to checkout. Click here to log in`. message.
### Dark mode support for fields and controls <!-- heading -->
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea of Cart and Checkout, they should have light colors and text should be readable.
- [ ] Switch the colors of your theme to a dark variation, you can do that in the customizer for storefront or dark mode for TwentyTwenty or TwentySeventeen.
- [ ] Switch the blocks to use dark colors in the blocks settings.
- [ ] Test inputs, select, radio, checkbox, quantity selectors, and textarea again, make sure nothing is broken and everything is visible.
### Use real previews for Cart and Checkout <!-- heading -->
- [ ] Preview the cart and checkout blocks inside the block inserter.
- [ ] You should see the actual block, not a white placeholder.
- [ ] Make sure the block is not very long and overflowing.
- [ ] Make sure the changes didn't leak to the actual block or the editor block, the block should not be cut.
## All Products <!-- heading -->
### Broken link for "No Products" placeholder
- [ ] In a store with no products (move them to trash).
- [ ] Create a new page and add the All Products block.
- [ ] Click on the Add new product link and verify it works.
### PHP Error notices
- [ ] Make sure you have WP_DEBUG set to true.
- [ ] Load a page that already contains a product data, so single product or All Products, either in the editor or frontend.
- [ ] Make sure no notices are printed to the page, you can check the source code or at the top of the page.
## Product Search <!-- heading -->
### Updated styling in Editor
- [ ] In the editor, confirm that Product Search input has borders.
- [ ] the input should be functional.
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/internal-developers/testing/releases/320.md)
