Product creation experience: add more context about product data #33755

octaedro · 2022-07-06T15:01:57Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds a tooltip to provide more context to the Product data area, during product creation.

Closes #33539.

// cc @jarekmorawski @pmcpinto

How to test the changes in this Pull Request:

Checkout this branch.
Go to Products > Add New.
Verify an interrogation sign (?) icon is visible next to the product type selector, in the Product data area.
Verify that the text in the tooltip looks correct.

Product tye	Text
`simple`	Simple – covers the vast majority of any products you may sell. Simple products are shipped and have no options. For example, a book.
`grouped`	Grouped – a collection of related products that can be purchased individually and only consist of simple products. For example, a set of six drinking glasses.
`external`	External or Affiliate – one that you list and describe on your website but is sold elsewhere.
`variable`	Variable – a product with variations, each of which may have a different SKU, price, stock option, etc. For example, a t-shirt available in different colors and/or sizes.

Install this plugin (it will include a product type to the selector).
Verify that the product type My product has been added.
Select it and verify the tooltip shows the text Product types define available product details and attributes, such as downloadable files and variations. They're also used for analytics and inventory management.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

louwie17

This tested well @octaedro, I just noticed one spelling mistake in the class name.

But as @jarekmorawski mentioned in the last comment in the original issue, the tooltip text does feel a little odd, pointing users to click on it instead, and not something we have done before.
I like the idea that Jarek proposed, or maybe we want to add a link within the tooltip that users can click? (although a recent change I made doesn't allow users to hover over the tooltip content, so that would make clicking a link within a bit difficult, I could update that though).

louwie17 · 2022-07-08T12:44:51Z

plugins/woocommerce/client/legacy/css/admin.scss

@@ -4770,6 +4770,13 @@ img.help_tip {
 			line-height: 24px;
 		}

+		.tips_prodcut_types {


Spelling mistake, have to switch the c and u in prodcut

Nice catch! I fixed it in commit 0188d18

louwie17 · 2022-07-08T12:45:17Z

plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-panel.php

@@ -21,6 +21,7 @@
 				<?php endforeach; ?>
 				</optgroup>
 			</select>
+			<a href="https://woocommerce.com/document/managing-products/#product-types" class="tips_prodcut_types" target="_blank"><?php echo wc_help_tip( __( 'Click in the icon to learn more about each product type', 'woocommerce' ) ); ?></a>


Same spelling issue as here as above in the class name.

github-actions · 2022-07-13T13:36:31Z

Test Results Summary

Commit SHA: d4266a3

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	115	0	0	2	0	117	0m 54s
E2E Tests	185	0	0	1	0	186	16m 47s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

octaedro · 2022-07-15T17:08:12Z

Hey @louwie17,

Could you take another look at this PR?

I added the fix to the typo you mentioned, the changes that Jarek suggested, and updated the testing instructions as well.

louwie17

Thanks for the updates @octaedro, nice work on getting the tooltip content to update when the dropdown changes 👍
I just left one minor suggestion for a styling change to keep in sync with how the other tooltips look. Suggestion in in-line comment.

louwie17 · 2022-07-18T19:35:50Z

plugins/woocommerce/client/legacy/css/admin.scss

+				display: inline-block;
+			}
+			.woocommerce-product-type-tip {
+				margin-left: 1em;


We might want to better reflect how the tip icon looks compared to the other icons:

They have this css:

font-size: 1.4em; margin-left: 9px;

Good eyes @louwie17! I fixed the icon's style in the commit d4266a3

louwie17

Thanks for sticking with the several changes and iterations of this issue @octaedro, this tested well and code looks good as well, this is ready to ship 💯

github-actions · 2022-07-20T16:36:48Z

Hi @octaedro, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

) * Add product types tooltip * Add target `_blank` * Add changelog * Fix typo * Add onChange method * Fixed product type tooltip * Fix icon style Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

Fernando Marichal added 2 commits July 5, 2022 14:43

Add product types tooltip

a39984b

Add target _blank

ec83fca

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jul 6, 2022

Add changelog

417450f

octaedro marked this pull request as ready for review July 6, 2022 17:50

octaedro requested a review from a team July 6, 2022 17:51

louwie17 self-requested a review July 8, 2022 12:42

louwie17 reviewed Jul 8, 2022

View reviewed changes

Fix typo

0188d18

Fernando Marichal added 2 commits July 13, 2022 12:49

Add onChange method

eb9a4a4

Fixed product type tooltip

e7eb0fd

octaedro requested a review from louwie17 July 18, 2022 16:54

louwie17 requested changes Jul 18, 2022

View reviewed changes

Fix icon style

d4266a3

octaedro requested a review from louwie17 July 19, 2022 20:43

louwie17 approved these changes Jul 20, 2022

View reviewed changes

octaedro merged commit 8b9ec81 into trunk Jul 20, 2022

octaedro deleted the add/33539_more_context_about_product_data branch July 20, 2022 16:36

github-actions bot added this to the 6.9.0 milestone Jul 20, 2022

github-actions bot mentioned this pull request Sep 14, 2022

Test WooCommerce 6.9 UVLabs/location-picker-at-checkout-for-woocommerce#50

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product creation experience: add more context about product data #33755

Product creation experience: add more context about product data #33755

octaedro commented Jul 6, 2022 •

edited

Loading

louwie17 left a comment

louwie17 Jul 8, 2022

octaedro Jul 15, 2022

louwie17 Jul 8, 2022

github-actions bot commented Jul 13, 2022 •

edited

Loading

octaedro commented Jul 15, 2022

louwie17 left a comment

louwie17 Jul 18, 2022

octaedro Jul 18, 2022

louwie17 left a comment

github-actions bot commented Jul 20, 2022

Product creation experience: add more context about product data #33755

Product creation experience: add more context about product data #33755

Conversation

octaedro commented Jul 6, 2022 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

louwie17 left a comment

Choose a reason for hiding this comment

louwie17 Jul 8, 2022

Choose a reason for hiding this comment

octaedro Jul 15, 2022

Choose a reason for hiding this comment

louwie17 Jul 8, 2022

Choose a reason for hiding this comment

github-actions bot commented Jul 13, 2022 • edited Loading

Test Results Summary

octaedro commented Jul 15, 2022

louwie17 left a comment

Choose a reason for hiding this comment

louwie17 Jul 18, 2022

Choose a reason for hiding this comment

octaedro Jul 18, 2022

Choose a reason for hiding this comment

louwie17 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 20, 2022

octaedro commented Jul 6, 2022 •

edited

Loading

github-actions bot commented Jul 13, 2022 •

edited

Loading