# Testing notes and ZIP for release 10.4.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11681289/woocommerce-gutenberg-products-block.zip)
## WooCommerce Core
### Product Rating: fix the filter woocommerce_product_get_rating_html is removed [#9719](https://github.com/woocommerce/woocommerce-blocks/pull/9719)
1. Ensure that you have the Blockified Single Product Template.
2. Visit a product.
3. Add some comments and rate the product.
4. Be sure that the ratings in the comments don't show the average rating
### Product rating: improve preview style when the product doesn't have rating [#9684](https://github.com/woocommerce/woocommerce-blocks/pull/9684)
1. Edit the Single Product Template (migrate to the blockified template if it isn't).
2. Add the Product Rating block.
3. Confirm `No reviews` is displayed under product title when there are no reviews.
4. Ensure that it looks like the below image.
| Before | After |
| ------ | ----- |
|||
### Combine country asset data to reduce the amount of data consumed by the cart and checkout blocks [#9552](https://github.com/woocommerce/woocommerce-blocks/pull/9552)
1. Go to the block based cart
2. Open the shipping calculator and enter your address, confirming state + country fields are working
3. Go to the block based checkout
4. Fill out the shipping and address forms separately,, confirming the country and state fields populate correctly. Ensure an address with states, such as the US, is used at least once.
5. In WooCommerce > Settings and change "Shipping location(s)" to specific locations. Limit to a few countries
6. Go back to checkout and confirm the limitations are in place in the shipping address form
### Add to Cart with Options Block: Remove global variable overwrite. [#9457](https://github.com/woocommerce/woocommerce-blocks/pull/9457)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
5. Select the Single Product template to customize it and click on edit.
6. Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
7. On the frontend, ensure the button works as expected and the product can be added to the cart.
### Product Image Gallery: Reintroduce filters and override-restore the global product variable. [#9630](https://github.com/woocommerce/woocommerce-blocks/pull/9630)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
4. Make sure the Product Image Gallery block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
5. On the frontend, ensure the gallery works as expected, and the thumbnails can be selected.
### Blockified Single Product Template: add product-classes via `wc_get_product_class` [#9697](https://github.com/woocommerce/woocommerce-blocks/pull/9697)
1. Ensure that you are using the Blockified Single Product Template.
2. Visit a product page.
3. Check the body and ensure that the product classes are added
### Add to Cart with Options block: Restore the global variable to its original value after being overriden [#9581](https://github.com/woocommerce/woocommerce-blocks/pull/9581)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
4. Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
5. On the frontend, ensure the button works as expected, and the product can be added to the cart.
6. Access the single template for all available product types, including simple, variable, grouped, and external and make sure you can add all of them to the cart.
#### Testing with Jetpack
1. Install and enable the Jetpack plugin on a live site (such as Jurassic Ninja).
3. Access `wp-admin/admin.php?page=jetpack_modules` to confirm the WooCommerce Analytics module is enabled.
4. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. Add the single product block on the single product template and save.
4. Visit the product page on the front end when logged out and make sure everything works as expected (no fatal errors should be observed).
### Enable Single Product block [#9714](https://github.com/woocommerce/woocommerce-blocks/pull/9714)
1. Add the Single Product block in a post/page.
2. Visit the created post/page.
3. Click the `add to cart` button .
4. Ensure that the product is added to the cart and any notice isn't visible.
5. Edit the Single Product Template.
6. Add the Single Product block.
7. Repeat 3-4 steps.
### Product Image Gallery block: Fix magnifying glass appearing outside the block content area [#9594](https://github.com/woocommerce/woocommerce-blocks/pull/9594)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Inside the Site editor, click on the List View button, usually found at the top left of the editing space, to see the list of blocks added to the editor area.
8. In the list of blocks, move the Product Image Gallery block to be above the Breadcrumbs block;
9. Once the Product Image Gallery block is displayed on top of the Breadcrumbs block in the Editor area, on the top-right side click on the Save button;
10. Visit the product page and make sure that the magnifying glass is correctly displayed on the top right corner of the image
### Make Mini-Cart block work well with caching plugins [#9493](https://github.com/woocommerce/woocommerce-blocks/pull/9493)
**With your admin user:**
1. Install _[WP-Optimize - Clean, Compress, Cache](https://wordpress.org/plugins/wp-optimize/)_ or a similar caching plugin.
2. Go to WP-Optimize > Settings > Cache and enable page caching.
**In a private/incognito window without being logged in:**
3. In the frontend visit any page. This will cache the page without products in the cart.
**With your admin user:**
4. Add some products to your cart.
5. Visit the same page from step 3.
6. Notice the Mini Cart totals do include the products you added in step 4, even though it's serving the cached version of step 3.
### Product Price: remove underline on sale price [#9702](https://github.com/woocommerce/woocommerce-blocks/pull/9702)
1. Ensure you are using the Blockified Single Product Template and Product Catalog Template.
2. Visit a product with a sale price.
3. Ensure that the sale price isn't underlined.
4. Visit the `/shop` page.
5. Ensure that the sale price isn't underlined
### Blockified Single Product Template: avoid to add another group block on the editor side when the user creates a template for a specific product [#9699](https://github.com/woocommerce/woocommerce-blocks/pull/9699)
1. Open the Site Editor.
2. Be sure that the Single Product template is blockified.
3. Click `Manage All Templates` button.
4. Click `Add New`.
5. Select Product.
6. Select a product.
7. Open the list view.
8. Ensure that the template is wrapped by just one group block.
9. Visit the product.
10. Ensure that there is a div with the class `woocommerce` that wraps the entire template.
11. Visit another product.
12. Ensure that there is a div with the class `woocommerce` that wraps the entire template.
### Blockified Single Product Template: use h1 for the Product Title [#9698](https://github.com/woocommerce/woocommerce-blocks/pull/9698)
1. Ensure that the Single Product Template doesn't have any customization.
2. Edit it.
3. Focus on the Product Title.
4. Ensure that `h1` is set.
### Ensure aria-label is showing correct value based on setting [#9672](https://github.com/woocommerce/woocommerce-blocks/pull/9672)
1. Add the Mini-Cart block to a post or page and set the Display total price attribute to false.
2. Go to the frontend and with your browser devtools (F12). Inspect element and look for the`.wc-block-mini-cart__button` on the `mini cart block`. Find the `aria-label`.
3. Notice it says `X item(s) in cart`, with the price. Hover over the `mini cart` icon and click on. Inspect the element again to ensure it is still displaying `X item(s) in cart`.
4. Go back to the `mini cart` settings and switch it to show `Display total price`.
5. The `aria-label` should now show "X item(s) in cart, total price of Y".
6. BONUS: Add another instance of the `mini cart` in the header and perform the same tests and ensure each instance of the `mini cart` shows their own `aria-label` value depending on the `Display total price` settings.
### Product Categories List: Add show child categories only toggle [#9550](https://github.com/woocommerce/woocommerce-blocks/pull/9550)
1. Set up product categories with children and grandchildren, making sure they have products.
2. Add the Product Categories List block to a page, and also to the Products by Category template.
3. Check that the toggle only appears when the block is used in the Site Editor (e.g. on a template)
4. Ensure that when the toggle is enabled and you're visiting a category with children, only the children are shown.
5. Make sure that if when you have the _show children only_ toggle enabled, and you click the last child then it renders the current category instead of rendering nothing at all.
6. Ensure no regressions when using this block on posts/pages
7. Enable Classic theme such as Storefront
8. Usage the block in the widget area and check that the feature is available and works as expected and described above.
### Stack cart and checkout buttons on smaller screens [#9603](https://github.com/woocommerce/woocommerce-blocks/pull/9603)
1. In a post/page add the `Mini Cart` block.
2. In the frontend, click on the mini cart button to reveal the drawer.
3. Ensure the `View my cart` and `Checkout` buttons are visible and side by side.
4. Using the developer tools, switch to a mobile view.
5. Ensure now the `View my cart` and `Checkout` buttons are visible and now stacked top and bottom.
### Remove `setFullAddressPushed` to prevent address continually pushing [#9606](https://github.com/woocommerce/woocommerce-blocks/pull/9606)
1. Ensure you have shipping rates set up for UK.
2. Add an item to your cart, go to the Checkout block.
3. Enter a full address using United Kingdom as the country, enter `L1 0BP` as the Postcode. Wait for shipping rates to load.
4. Change country to Portugal. Do not change anything else.
5. Ensure the shipping rates don't continually load.
### Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible [#9648](https://github.com/woocommerce/woocommerce-blocks/pull/9648)
1. Set up your browser so scrollbars are visible (that might depend on the browser/OS you use).
2. Add the Mini-Cart block to the header of your store.
3. In the frontend, open the Mini-Cart drawer and verify there is no horizontal shift of the contents.
Before | After
--- | ---
[before](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/dedaa44b-2a07-4fd5-9ea2-c3d1b9e13080) | [after](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/9bc56a48-88df-4e0a-af9e-98843433ca7a)
### Product Rating block: Add the block to the Single Product template by default [#9510](https://github.com/woocommerce/woocommerce-blocks/pull/9510)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Make sure the Product Rating block appears below the Product Title block;
8. On the top right side, click on Save;
9. Visit a product page and make sure the Product Rating block appears below the Product Title.
### Ensure inner content is not truncated on different widths [#9640](https://github.com/woocommerce/woocommerce-blocks/pull/9640)
1. Create a new post & add the WooCommerce Just Arrived Full Hero pattern.
2. Adjust the alignment on the Cover Block from Full width (the pattern's default) to either Wide width or None.
3. Note that the text (Heading, Paragraph, and Buttons blocks) are not squished or truncated to the right and that they show as expected aligning towards the right side of the block.
### Fix invisible Mini-Cart badge in themes without background [#9601](https://github.com/woocommerce/woocommerce-blocks/pull/9601)
1. With any block theme, go to Appearance > Editor > edit any template > Styles > Additional CSS and add these styles:
```CSS
body {
background: transparent !important;
}
```
2. Add the Mini-Cart block to the header of your site or to a post or page.
3. In the frontend, add some products to your cart.
4. Verify the Mini-Cart badge is visible.
Before | After
--- | ---
 | 
### Product Rating block: Add Single Product template support to the block [#9499](https://github.com/woocommerce/woocommerce-blocks/pull/9499)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
8. Click on the 'Product Rating' block to add it to the template.
11. Once the block is added to the template, make sure the rating stars appears, and, on the top-right side, click on the Save button;
12. Visit a product that contains at least one review and check if the Product Rating block is displayed.
13. Visit a product that does not contain reviews and check if the Product Rating block is hidden.
### Blockified Single Product Template: Show upsells. [#9636](https://github.com/woocommerce/woocommerce-blocks/pull/9636)
1. Edit a product.
2. Add upsells.
3. Open the Site Editor.
4. Edit the Single Product Template.
5. Migrate to the blockified template.
6. Visit the product.
7. Be sure that upsells are visible
### Mini-Cart: Make error notifications non-dismissable [#9578](https://github.com/woocommerce/woocommerce-blocks/pull/9578)
1. In the frontend, add a product to your cart.
2. In `wp-admin`, edit that product and set it out of stock.
3. Open a page with the Mini Cart, select to open the drawer.
4. Ensure the error notice appears: "[Product name] is out of stock and cannot be purchased. Please remove it from your cart." and is non-dismissable.
### Fix Cambodian postcode validation [#9597](https://github.com/woocommerce/woocommerce-blocks/pull/9597)
1. Add a product to the cart and go to the checkout page.
2. Select Cambodia country as country.
3. Enter a 5-digit postcode.
4. Verify that the postcode fails the validation.
5. Enter a 6-digit postcode.
6. Verify that the postcode passes the validation.
7. Select United Kingdom (UK) as country.
8. Verify that the postcode `AA9A 9AA` passes the validation.
9. Verify that the postcode `9999 999` fails the validation.
10. Verify that it's not possible to have spaces before the postcode, .e.g. ` AA9A 9AA`.
11. Verify that lowercase letters, e.g. `aa9A 9aa`, are automatically converted to uppercase letters, e.g. `AA9A 9AA`.
### Product Rating block: Hide rating when the product has no reviews [#9556](https://github.com/woocommerce/woocommerce-blocks/pull/9556)
#### Product Rating block inside Single Product Block with a selected product that contains reviews
On Editor:
| Before | After |
|--------|--------|
| 
| |
On Frontend:
| Before | After |
|--------|--------|
| 
| |
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
10. Within the content area of the Single Product block, click on the '+' button to add a new block.
11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
12. Once the block is added to the template, make sure the rating stars and reviews count appears for the selected product.
13. On the top-right side, click on the Save button.
14. Visit a product and check if the Product Rating block is displayed with the rating stars and reviews count.
#### Product Rating block inside Single Product Block with a selected product that has NO reviews
On Editor:
| Before | After |
|--------|--------|
| 
| 
|
On Frontend:
| Before | After |
|--------|--------|
| 
| 
|
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
10. Within the content area of the Single Product block, click on the '+' button to add a new block.
11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
12. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for the selected product.
13. On the top-right side, click on the Save button.
14. Visit a product and check if the Product Rating block is hidden.
#### Product Rating block inside Related Products Block
On Editor:
| Before | After |
| ------ | ----- |
| 
| 
|
On Frontend:
| Before | After |
|--------|--------|
| 
| 
|
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Related Products' block. You can do this by typing 'Related Products' into the search bar at the top of the block library.
8. Click on the 'Related Products' block to add it to the template.
9. Within the content area of the Related Products block, click on the '+' button to add a new block.
10. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
11. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for products that has no reviews, but the stars appears filled with the rating for products that contains reviews.
12. On the top-right side, click on the Save button.
13. Visit a product and check if the Product Rating block is hidden for products with no reviews, and is displayed for products with reviews.
### Fix total shipping display info when no shipping method is available [#8819](https://github.com/woocommerce/woocommerce-blocks/pull/8819)
The order of the test cases is important!
### Case 1 (Local pickup enabled and no shipping options available)
1. Enable local pickup with pickup price. For that, go to `WooCommerce -> Settings -> Shipping -> Local pickup`, under `General` Check `Enable local pickup` and `Add a price for customers who choose local pickup`, and save. Then add a price under the `Cost` input.
2. Remove the shipping methods from the WC settings (WooCommerce -> Settings -> Shipping -> Shipping zones)
3. Go to the store and add an item to the cart
4. Go to the Checkout block and select the `Local Pickup` option under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct local pickup option)
5. Select `Shipping` under the `Shipping Method` section. Ensure `No shipping options available` is displayed under `shipping` in the `Order Summary` Block
### Case 2 (Local pickup enabled and shipping option(s) available)
1. Add a shipping method in `WooCommerce -> Settings -> Shipping -> Shipping zones`. Ensure the shopper's address is within the shipping zone created.
2. Go to the Checkout block and select the `Local Pickup` option under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct local pickup option)
3. Select `Shipping` under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct shipping option)
### Case 3 (Local pickup disabled and no default shipping rates)
1. Disable local pickup. For that, go to `WooCommerce -> Settings -> Shipping -> Local pickup`, under `General` uncheck `Enable local pickup` and save.
2. Go to `WooCommerce -> Settings -> General`. Select `No location by default` under `Default customer location`
3. Remove any default(fallback) shipping rates in `WooCommerce -> Settings -> Shipping -> Shipping zones -> Locations not covered by your other zones`
4. Open your site in a private session(incognito mode).
5. Add an item to the cart
6. Go to the cart page, and confirm the "Add an address for shipping rates" link is present in the shipping calculator.
7. Click on the link, and confirm it is working as expected.
8. Open your site in a regular session where you're already logged in and have placed an order before.
9. Add an item to the Cart
10. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
11. Click on the link, and confirm it is working as expected.
### Case 4 (With default shipping rates)
1. Add a default(fallback) shipping rate in `WooCommerce -> Settings -> Shipping -> Shipping zones -> Locations not covered by your other zones`
2. Follow steps 4 and 5 from the previous case (i.e., `Case 3`)
3. Go to the cart page, and confirm the shipping calculator is hidden and default shipping rates are visible
4. Follow steps 8 to 11 from the previous case (i.e., `Case 3`)
### Case 5 (Error Notice)
1. Follow steps 3 to 6 from `Case 3`
2. Click on the link, and change the address to a location where shipping rates are unavailable.
3. Confirm that `There are no shipping options available. Please check your shipping address.` error is visible in the text form.
4. Proceed to the Checkout block page, and confirm the `There are no shipping options available. Please check your shipping address` error is visible in the text form under the `Shipping options` section.
Note: Notice will appear for a few seconds until we receive the server's response, even with the valid shipping address, when we change the shipping method.
### Classic Product Template block visible in the inserter [#9573](https://github.com/woocommerce/woocommerce-blocks/pull/9573)
1. Open the Site Editor.
2. Edit the `Single Product` template.
3. Be sure that the `Classic Product Template` is visible.
4. Click on `transform into blocks` button.
5. Open the inserter and search for: `WooCommerce Single Product Block` (for other templates, check the table below).
6. Repeat those steps for: `Product Catalog`, `Products by Attribute`, `Products by Category`, `Products by Tag` and `Products Search Results` templates.
| Template | Block Name |
|------------------------|------------------------------------------|
| Single Product | WooCommerce Single Product Block |
| Product Catalog | WooCommerce Product Grid Block |
| Product Search Results | WooCommerce Product Search Results Block |
| Products by Attribute | WooCommerce Product Attribute Block |
| Products by Category | WooCommerce Product Taxonomy Block |
| Products By Tag | WooCommerce Product Tag Block |
### Add to Cart with Options block: Prevent page redirection when clicking on Add to Cart button [#9691](https://github.com/woocommerce/woocommerce-blocks/pull/9691)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the 'Single Product' template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
8. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
9. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
10. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
11. On the top-right side, click on the Save button.
12. Visit a product and click on the Add To Cart button of the Single Product block that you just added.
13. Make sure the page is not redirect to another URL and that the Cart is updated with the clicked product.
### Render the single product title as an h1 when transforming from classic template [#9748](https://github.com/woocommerce/woocommerce-blocks/pull/9748)
1. Ensure that the Single Product Template doesn't have any customization.
2. Edit it.
3. Transform it to the blockified version.
4. Focus on the Product Title.
5. Ensure that it renders as an h1.
## Feature plugin
### Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block [#9507](https://github.com/woocommerce/woocommerce-blocks/pull/9507)
1. Add the Mini-Cart block to the header of your store.
2. Go to Appearance > Editor > Template parts > Mini-Cart.
3. Select the Mini-Cart Contents block and change its border to something excessively thick (ie: a 30px border).
4. Go to the frontend and open the Mini-Cart drawer.
5. Verify the close button is inside the Mini-Cart drawer area, instead of being on top of the border.
Before | After
--- | ---
 | 