Add a Yoast WooCommerce SEO upsell card to the product editor metabox

[JorPV]

Context

In the product editor, Yoast SEO Free currently upsells Yoast WooCommerce SEO with a small text-and-button block inside the Search appearance section. As part of the AI product image alt text project, the design moves this to a dedicated card at the top of the Yoast SEO meta box that lists what the add-on brings: product schema, GTIN and SKU assessments, image alt text assessments, and bulk AI-generated alt text. The card only shows for product posts when WooCommerce is active and Yoast WooCommerce SEO is not. Since the new card supersedes it, the Search appearance upsell is removed.

Summary

This PR can be summarized in the following changelog entry:

• Adds a Yoast WooCommerce SEO upsell card to the top of the Yoast SEO meta box in the product editor, when WooCommerce is active without Yoast WooCommerce SEO.
• Removes the Yoast WooCommerce SEO upsell from the Search appearance section in the product editor.

Relevant technical choices

• Meta box only. The WooCommerce product editor has no Yoast sidebar, so the card is rendered only from MetaboxFill, inside the editor intro.
• Gated on getIsWooSeoUpsell plus getIsProduct. Reuses the existing upsell selector, narrowed to product posts so product categories and tags do not get the card.

Test instructions

Test instructions for the acceptance test before the PR gets merged

1. Activate WooCommerce and make sure Yoast WooCommerce SEO is deactivated.
2. Edit a product, or add a new one.
3. In the Yoast SEO meta box, confirm a card titled Yoast WooCommerce SEO with a cart icon sits directly below Optimize your content for discovery., matching the design.
4. Confirm the card lists four benefits with green check icons: Product schema for price, reviews, and availability, GTIN and SKU assessments, Image alt text assessments and Bulk AI-generated alt text for product images.
5. Click the yellow Get Yoast WooCommerce SEO button; confirm it opens yoa.st/woo-seo-product-editor-upsell in a new tab.
6. Expand Search appearance and confirm the Want an enhanced Google preview of how your WooCommerce products look in the search results? text and its Unlock with Yoast WooCommerce SEO button are gone; the Google preview now follows Determine how your post should look in the search results. directly.
7. Go to Products > Categories, edit a category and confirm the card does not appear in its Yoast SEO meta box; confirm the Search appearance section there has no Yoast WooCommerce SEO upsell either.
   7a. [ ] Go to Products > Tags, edit a tag and confirm the card does not appear in its Yoast SEO meta box.
8. Edit a regular post and confirm the card does not appear.
9. Activate Yoast WooCommerce SEO, reload the product editor and confirm the card is gone.
10. Run cd packages/js && yarn jest tests/components/WooSeoProductUpsellAd.test.js; expect 4 passing tests.

Style checks

Compare against the design with the browser inspector open on the card (#woo-seo-product-upsell-ad).

11. Confirm the card has a white background, a 1px solid border in rgba(0, 117, 179, 0.3) (Woo blue at 30%), an 8px corner radius, 16px padding on all sides and a soft drop shadow; confirm it spans the full width of the meta box content, the same width as the Optimize your content for discovery. line above it.
12. Confirm the Yoast WooCommerce SEO heading is an h4 in #0075B3 (rgb(0, 117, 179)) at 16px, font weight 500, with 8px of space below it; confirm the cart icon next to it is 16px wide, faces left and has the same blue.
13. Confirm the description and the four benefit lines are 13px text in #475569 (rgb(71, 85, 105)), with 8px between the description and the list and 4px between the benefit lines.
14. Confirm each check icon is 18px × 18px in #22C55E (rgb(34, 197, 94)) with an 8px gap to its text, and that long benefit lines wrap under the text, not under the icon.
15. Confirm the Get Yoast WooCommerce SEO button is the small upsell button: 28px tall, background #FCD34D (rgb(252, 211, 77)), text #78350F (rgb(120, 53, 15)) at 12px font weight 500, 6px corner radius, 6px vertical and 10px horizontal padding, a 16px lock icon with 6px to the label, and 16px of space between the benefit list and the button.
16. Hover the button and confirm the background darkens to #FBBF24 (rgb(251, 191, 36)); Tab to it and confirm a visible focus ring; resize the window to about 1024px wide and confirm the text wraps inside the card without overflowing.

Relevant test scenarios

• Changes should be tested with the browser console open — confirm no errors while the meta box loads.
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies — the card must appear on products only, not on product categories, product tags, posts or pages.
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

• The Yoast SEO meta box in the WooCommerce product editor (editor intro and Search appearance section).
• The Yoast WooCommerce SEO upsells shown to Free and Premium users without the add-on.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
• This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.
• I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/1402

[Copilot]

🟡 Changes recommended

The old upsell is unintentionally removed from product taxonomy screens, and the new card skips a heading level.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a product-editor metabox card promoting Yoast WooCommerce SEO and replaces the previous Search appearance upsell.

Changes:

• Adds a gated WooCommerce SEO upsell card.
• Adds component tests for visibility, content, and CTA behavior.
• Removes the existing Search appearance upsell.

File summaries

File	Description
packages/js/src/components/WooSeoProductUpsellAd.js	Implements the new upsell card.
packages/js/src/components/fills/MetaboxFill.js	Adds the card to the metabox introduction.
packages/js/src/containers/SnippetEditor.js	Removes the previous inline upsell.
packages/js/tests/components/WooSeoProductUpsellAd.test.js	Tests card rendering and gating.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[coveralls-official]

Coverage Report for CI Build 0

Coverage increased (+0.009%) to 56.724%

Details

• Coverage increased (+0.009%) from the base build.
• Patch coverage: 12 of 12 lines across 1 file are fully covered (100%).
• 2 coverage regressions across 1 file.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

2 previously-covered lines in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
packages/js/src/components/WooCommerceUpsell.js	2	0.0%

---

Coverage Stats

Relevant Lines:	73009
Covered Lines:	41330
Line Coverage:	56.61%
Relevant Branches:	19304
Covered Branches:	11034
Branch Coverage:	57.16%
Branches in Coverage %:	Yes
Coverage Strength:	41225.32 hits per line

---

💛 - Coveralls