Release Testing Instructions WooCommerce 7.1

WooCommerce 7.1 includes:

• WooCommerce Blocks Updates
• WooCommerce Core Updates

---

WooCommerce Blocks Updates #35040

Slack Workflow: WooCommerce Product Blocks

Blocks 8.6.0 Testing instructions

Blocks 8.7.0 Testing instructions

Blocks 8.7.1 Testing instructions

Blocks 8.7.3 Testing instructions

Blocks 8.7.4 Testing instructions

Blocks 8.7.5 Testing instructions

WooCommerce Core Updates

Add Tiktok to OBW grow list #34953

Slack Workflow: WooCommerce Core

1. In a new site, disable "Display suggestions within WooCommerce " in Settings > Advanced > WooCommerce.com.
2. Go through the Onboarding Wizard, select 'United States' as your location
3. Navigate to the Free Features section in the Onboarding Wizard.
4. See that TikTok is listed.
5. Select TikTok and complete the Onboarding Wizard.
6. On the WordPress Plugins page, confirm that TikTok for WooCommerce plugin is installed.

Add new shipping class modal to a shipping class section in product page #34937

Slack Workflow: WooCommerce Core

1. Go to Add new product page.
2. Under Shipping Class section click on the Shipping class dropdown, an Add new shipping class option should be shown as the second option of the list.
3. When click Add new shipping class option a modal to add a new shipping class should be shown.
4. If the product does not have a category then the fields Name and Slug on the modal should be filled with New shipping class and new-shipping-class values respectively.

Video: https://user-images.githubusercontent.com/13334210/193664226-e1a83c33-8129-4d20-b2c7-2f7e06fd2bf0.mov

5. If the product contains a valid category different than Uncategorized then that value should be used to fill the fields Name and Slug on the modal.

Video: https://user-images.githubusercontent.com/13334210/193664590-cfc4f1ed-453a-499a-9f98-fdc3e2783d2e.mov

6. After adding the new shipping class the dropdown behind the modal should be updated with the new option added.

Fix onboarding wizard popover padding #34896

Slack Workflow: WooCommerce Core

1. Use a site with WP 6.1 (you can use the WordPress Beta Tester plugin for this)
2. Go to OBW.
3. Go to Product types step.
4. Click on an info icon (i).
5. Observe that, Info icon (i) popover content show with padding.

Add "aria-disabled" prop to truly disable OBW continue buttons #34895

Slack Workflow: WooCommerce Core

1. Go to the Onboarding Wizard (OBW)
2. Click "Continue" and confirm that it's disabled completely.
3. Select a Country and go to the next step
4. Click "Continue" and confirm that it's disabled completely.
5. Select an industry and go to the next step
6. Uncheck Physical products option
7. Click "Continue" and confirm that it's disabled completely.
8. Select a products type and go to the next step
9. Click "Continue" and confirm that it's disabled completely.

Videos:

• Before: https://user-images.githubusercontent.com/94531721/181192036-a3074b29-82c5-439c-a6c1-0f0d8e1f1f58.mp4

• After: https://user-images.githubusercontent.com/4344253/192672052-be097f80-1746-486b-9cf1-7a3eb685aba0.mov

Deploy spotlight product tour #34859

Slack Workflow: WooCommerce Core

1. Use a fresh site
2. Navigate to Tools > WCA Test Helper > Experiments
3. Set woocommerce_products_task_layout_card_v3 and woocommerce_products_task_layout_stacked_v3 to control
4. Go to Products > All products
5. Click on "Create Product" button
6. Observer that spotlight product tour is shown.
7. Go to WooCommerce > Home > Add products
8. Click on "Start with a template" and choose a template
9. Confirm that spotlight product tour is shown.
10. Repeat 5~7 steps with different templates
11. Repeat 5 step and choose "Add manually" option.
12. Confirm that spotlight product tour is shown.

Add shipping dimensions image #34857

Slack Workflow: WooCommerce Core

1. Go to new Product page.
2. In Shipping Dimensions section a package image should be shown on the right side of the dimensions fields.
3. If you focus the fields (A, B, C) a particular side of the package image should be highlighted.

Video: https://user-images.githubusercontent.com/13334210/192798656-9a5bacc3-bc3a-42ef-a450-2ffda8553258.mov

Load size units to show them as a suffix of shipping dimensions fields #34856

Slack Workflow: WooCommerce Core

1. Go to the new Product page
2. A Shipping Dimensions section should be shown with the dimensions and weight units loaded as suffixes of each input field according the WooCommerce > Settings > Products configuration.

Fix industry options not populate after reloading page #34847

Slack Workflow: WooCommerce Core

1. Go to the Onboarding Wizard (OBW)
2. Fill store details and click on "continue" button.
3. On "Industry" tab select one or more option and click on "continue" button.
4. Click on previous "Industry" tab.
5. Reload the page
6. Observe that selected "Industry" options are shown in the Industry step after reloading the page for OBW.

Fix enable guided mode button not trigger when its text is translated #34843

Slack Workflow: WooCommerce Core

1. Navigate to Tools > WCA Test Helper > Experiments
2. Setwoocommerce_products_task_layout_card_v3 and woocommerce_products_task_layout_stacked_v3 to control
3. Set woocommerce_products_tour to treatment
4. Change your site language to Español on Setting page
5. Go to Escritorio > Actualizaciones (/wp-admin/update-core.php)
6. Click on Actualizar las traducciones button to download woocommerce transalation
7. Go to WooCommerce > Home > "Añadir products" (Add products) task
8. Select Empieza con una plantilla > Producto físico (Physical product) and click "go"
9. Dismiss product spotlight tour
10. Click on Activar el modo guiado button
11. Observe that the product spotlight tour is shown again.

Add initial attributes section for empty state #34751

Slack Workflow: WooCommerce Core

1. Enable the new-product-management-experience feature flag by using the WCA Test Helper (Tools > WCA Test Helper > Features) and refresh the page.
2. Click the Products > Add New (MVP) button and notice the new attributes section
3. It should look the same as the design here: 5sAIeTRd9Yp7nSCT33BAWz-fi-6823%3A312388 the only difference is that the add new button is disabled.
4. Check that the link in the Section description links to this documentation page in a new tab.
5. Save this Product and add some attributes using the old UI
6. Refresh the page, the attributes empty state section should now be gone ( as this will be done as part of https://github.com/woocommerce/woocommerce/issues/34333 )

Add/34000 attribute select control #34744

Slack Workflow: WooCommerce Core

1. Add several products and attributes.
2. Either edit an existing product or create a new one and select the Attributes tab
3. Assume you still have attributes less then 20, the normal dropdown should show.
4. Add the color attribute and add some terms. Notice how the terms are loaded on the fly and filtered as you type.
5. Now either add more than 20 different attributes (would probably have to be done manually)
6. It should now show a Add custom attribute button and a typeahead dropdown in the Attributes tab.
7. Test out the Add custom attribute button, it should add the custom item.
8. Now search for existing attributes and upon selection it should add the attribute to the product
9. Try searching for your previously selected item, it should be disabled now.
10. Now remove the attribute, the dropdown should not show it as disabled anymore.
11. Saving the attributes and persisting by refreshing the page should work the same as usual.

Only show the product image upload tip once, and on all product edit pages #34739

Slack Workflow: WooCommerce Core

0. Add the following code to a plugin/mu-plugin. It will trigger the issue:

function test_create_product_objects() {
	$product1 = new WC_Product_Simple();
	$product2 = new WC_Product_Simple();
}

add_action( 'admin_init', 'test_create_product_objects' );

1. Go to Products > Add New
2. Observe the tip in the bottom of the product image metabox.
3. Click the new link and ensure it works as expected.
4. Go to Posts > Add New
5. Verify that the tip does not appear in the bottom of the featured image metabox.

Remove typecasting to prevent fatal when $screen_id is null. #34734

Slack Workflow: WooCommerce Core

1. Start with a WooCommerce site with PHP 8.1.
2. Install a plugin that adds a new screen in admin, such as SEOPress
3. Start the configuration wizard for the plugin. Without this PR you will see a fatal like so: Uncaught TypeError: WC_Admin_Assets::is_order_meta_box_screen(): Argum. With this PR, it should be resolved and setup screen with load as usual.

Enhance "Add store details" task onboarding experience #34697

Slack Workflow: WooCommerce Core

1. Setup a new WooCommerce store.
2. Skip the Setup Wizard.
3. Click the "Add store details" task item in the setup list.
4. Click the Got it button in the aid modal.
5. Refresh the page without entering your store's location, or go back to the Task List and click the Add store details task.
6. The focusing aid should show up.

Add shipping class section and dropdown #34684

Slack Workflow: WooCommerce Core

1. Make sure you have at least one shipping class added. If not, go to WooCommerce > Settings > Shipping > Shipping classes add it.
2. Go to Add New (MVP) product page
3. A Shipping section should be shown:

4. A Shipping class dropdown should list No shipping class, Add new shipping class options and the other shipping classes you added in point 1.

5. When click on helper text global settings below the dropdown you should be redirected to WooCommerce > Settings > Shipping > Shipping classes page in a new tab

6. Add a Spinner during shipping classes resolution

Video: https://user-images.githubusercontent.com/13334210/191804320-d3049593-b6e9-43ce-8ca0-a998b0792465.mov

Disable action buttons when product form is invalid #34658

Slack Workflow: WooCommerce Core

1. Visit the Add product (MVP) page

2. All action buttons should be disabled

3. If at least one field is invalid all action buttons should become disabled

4. When form fields are valid, action buttons disable behavior should remain in accordance with other requirements

5. When editing a product if the form is invalid then Move to trash action button should be enabled

6. When adding a new product Move to trash action button should not be shown

7. Move to trash is only visible when editing the product

8. When editing a product if the name field has any error then the product link is not shown but the error message does

9. Publish options menu should be disabled if all menu items are disabled

fix: handle error loading and error states for magic link button #35068

Slack Workflow: WooCommerce Core

(Skip to 4 if you have set up the mobile app magic link feature previously)

1. Install WooCommerce, skip OBW and do not install Jetpack
2. Click on the "Get the WooCommerce Mobile App" additional task list item
3. Go through with connection process
4. When you click on the "Send Magic Link" button you should see a spinner. Use devtools throttling if its too fast for you 😁
5. Go back by clicking on send magic link again
6. Block the URL in your devtools network panel (see screenshot)
7. You should see the error notice at the bottom of the screen

Improve the "Dismiss" button visibility #35060

Slack Workflow: WooCommerce Core

(Skip to 4 if you have set up the mobile app magic link feature previously)

1. Go to the Home screen and verify the Dismiss button in the inbox notifications is always visible.
2. Try the buttons and verify that they work correctly.

Fix: mismatching jetpack user should not see mobile app task list item #35052

Slack Workflow: WooCommerce Core

1. Create a new WooCommerce store that can have Jetpack installed and connected
2. Skip OBW, do not install Jetpack in OBW
3. Observe that as the admin user you can see the 'Get the free WooCommerce mobile app' additional task list item
4. Click on it and go through with the entire flow
5. Create a second admin user
6. Observe that the second admin user cannot see the task
7. Non-admins should also not be able to see the task

Change copy of the payments welcome modal #35031

Slack Workflow: WooCommerce Core

1. Visit wp-admin/admin.php?page=wc-admin&path=%2Fwc-pay-welcome-page
2. Click "No, thanks" and observe the modal is shown.
3. Check that the new copy is correct.

Before:

After:

Change copy of the payments welcome modal #35031

Slack Workflow: WooCommerce Core

1. Visit wp-admin/admin.php?page=wc-admin&path=%2Fwc-pay-welcome-page
2. Click "No, thanks" and observe the modal is shown.
3. Check that the new copy is correct.

Only show five inbox messages and add "Show more" button #35003

Slack Workflow: WooCommerce Core

1. Ensure you have more than 15 inbox notes in your store (use WCA Test Helper to create more if need be)
2. Go to Homescreen.
3. You should only see 5 notes, with the "Show older" button at the bottom.
4. Click the button, and it should load 10 more.
5. The button should still remain at the bottom (if you have enough notes) and it should now read "Show more."
6. Dismiss any note, and it should disappear, loading one more at the end of the list.
7. Hit the "undo" button after dismissing a note, and it should reappear.
8. The button and Footer section should disappear after all notes have been loaded.

Add product page inventory quantity management #34984

Slack Workflow: WooCommerce Core

1. Toggle site wide stock management at wp-admin/admin.php?page=wc-settings&tab=products&section=inventory
2. Check on the add new product page experience wp-admin/admin.php?page=wc-admin&path=%2Fadd-product that the inventory manage stock is shown or hidden based on your above selection.
3. Make sure that toggling Track quantity for this product opens the quantity management
4. Add negative values to fields to check that form validation errors appear
5. Check that the placeholder value for EMAIL ME WHEN QUANTITY REACHES matches the "Low stock threshold" quantity in wp-admin/admin.php?page=wc-settings&tab=products&section=inventory
6. Make sure settings persist upon save

Add product management SKU #34978

Slack Workflow: WooCommerce Core

1. Visit the new product page Products -> Add new (MVP)
2. Type in a product name and blur the input
3. Note the SKU has been added in slug format to the SKU field
4. Try to add/update the SKU value
5. Check the new SKU value is persisted

Images Product management MVP 1.0 #34769

Slack Workflow: WooCommerce Core

1. Grab one (or more) image from your computer and drop it in the Drag images here or click to upload area.
2. Verify that the image has been uploaded correctly and is now being shown on the screen.
3. Verify that the Drag images here or click to upload area is smaller when there is at least one image loaded.
4. Upload another image and change the order of the images.
5. Then save the product. Verify that the new order for the images is saved correctly.
6. Press Choose images and select an image that has been uploaded before.
7. Verify that the selected image is added to the image gallery component.
8. Grab an image from the gallery and verify that the area Drop here to remove is now visible.
9. Drop the image in that area and verify that the image is removed from the gallery.

Gif:

Add handling for plugin-feature incompatibilities #34879

Slack Workflow: WooCommerce Core

You need to test that the features page (WooCommerce - Settings - Advanced - Features) and the plugins page work as expected by trying various combinations of enabling/disabling features and activating/deactivation plugins. Thinks to look for:

• Features can't be enabled from the settings page if there's at least one active plugin that isn't compatible (but they can be disabled if they are already enabled).
• Plugins can't be activated from the plugins page if there's at least one enabled feature that isn't compatible.
• The "Manage incompatible plugins" link redirects to a special view in the plugins page with only two views, "All" and "Incompatible with..."
• The special plugins view displays all the plugins that are incompatible with the feature, not only the active ones.
• The warning text for plugins only mentions/counts enabled features, and the warning text for features only mentions/counts active plugins.
• The text of the incompatibility warnings for both features and plugins renders appropriately for the cases of one, two and tthree or more incompatible items ("incompatible with X", "incompatible with X and Y", "incompatible with X, Y and N more")
• The plugin information rows render nicely with all of these combinations:
  • Compatible and incompatible plugins
  • With and without compatibility warning notice
  • With and without plugin update available notice

TT3 compatibility #35306

Slack Workflow: WooCommerce Core

1. Install WP 6.1 RC and TT3
2. Install WC and activate this branch
3. Explore all the important screens:

• Shop,
• Single product for simple product
• Single product for variable products
• Examine gallery when having multiple images, photoswipe fullscreen image
• Check the Sale! badge looks reasonable in Shop and in single product page
• Check the tabs: Additional info/Details/Reviews
• Make sure the reviews are visible, rating looks reasonable
• Cart (try with or without shipping options set up), adding coupon
• Checkout
• Thank you page after submitting the order
• Log in to My account, with or without registration
• My account page
• Check out My Account submenus
• Test store notices (Added to cart on single product page, Error on the checkout page, Add coupon on the checkout page, Log in on the -checkout page)
• Test store-wide "demo store" notice
• Check this in different viewport sizes
• Check all of this with different browsers
• Check all of this with each style in TT3 (Appearance > Editor > Click on Styles (half moon icon to the top right) and switch to another one)