Remove tooltip on the upgrade badge

[richtabor]

It's not possible to click on "Personal" anyhow to see what this means—let's just remove the tooltip and instead rely on the single theme's existing call to action of "Upgrade to activate." It's a much more meaningful place to call action to and removing this is one less distraction.

Also relevant, when themes are sorted via free/premium (#95516) it'll set the expectation anyhow.

Requirements

• Remove the "This plan is included in the..." tooltip for the premium badge.

Visual

[fditrapani]

I ran some tracks to see if people engage with that link. It currently is only active when you visit the theme showcase from within your site. The usage is very low given the amount of traffic that goes to themes page. In the last 30 days, we only had 1,328 clicks and 46 purchases. This information would be much better served on the Theme info page. Given that this info is only presented on rollover, we can remove the tool tip and update the theme info screen in a separate issue. What do you think @richtabor?

[fditrapani]

I worked on some explorations for how we can show the upgrade messaging on the theme detail page. While exploring, I took some liberties to align our onboarding design with what's in the showcase so don't mind those details. Starting from the listing, I've been using the term Paid but I think upgrade is more appropriate. Including the star so that it aligns with its usage throughout our product:

Then on the details page, we'd show the price under the name including for Free:

Switching over to the marketplace, here's one that requires an upgrade:

And then another for our partner theme that requires an upgrade plus an extra subscription:

I generally found the subscription language a bit cumbersome so you'll notice I only use the term upgrade.

[fditrapani]

I've had some time to sit with this for a little longer and have some updated mockups. This approach relies on removing the style variations as pointed out here: #93931, as well as some of the Partner and WooCommerce badges.

Proposal

Use 2 types of badges for the themes:

1. A light blue Free and Included with plan badge. These will show on Free themes and if you're a logged in with a paid plan, you'll see the "Included with plan" badge for themes you have access to with your plan.
2. An upgrade badge that shows Available on {plan name} for any themes available on higher plans. For partner themes, we'll show Available on Business unless you're on the Business or Commerce plans, in which case, we'll just show the price:

Theme details

These badges will further be reinforced on the theme details page both on the design picker:

and the theme showcase:

cc @rcrdortiz

[getdave]

Taking a look at this

[getdave]

Worth noting that we have other tooltips as well. Are we sure we want to remove all of these?

[fditrapani]

Thanks for picking this up @getdave. As part of removing these tooltips, we'll want to also improve the messaging around the plans/pricing as documented in my comment above: #95471 (comment)

We just made these updates to the design picker in onboarding so you can get a sense of how they look and work there.

[mikachan]

Just noting that I'm working on these wording and badge changes now and will open a PR soon.

[mikachan]

@fditrapani I've noticed that the proposed Available on {plan name} badge already exists but it's behind a isUpdatedBadgeDesign flag. Should we remove this flag so that all badges follow this design, or should we keep this logic? If we still want to use the non-updated badge design, should we also update this wording?

This is the non-updated badge design:

(Thank you for all the help and quick replies 🙇)

[fditrapani]

No problem. I'm not sure why we have the flag or under what conditions but I think we're safe to apply this treatment to all our customers now that we have it in onboarding as well.

[jeryj]

@fditrapani - Some themes offer the default style on a lower tier and the style variations at a higher tier. I don't see anything in the proposed design copy that explains this. Do we still need to explain this, or are we getting rid of the designation between a default theme style and its upgrade variations?

[fditrapani]

Thanks for checking @jeryj! In that case, you'd see something like this where the theme itself is free but the style variations require an upgrade:

That's a screenshot from onboarding but the same approach can be applied in the showcase.

[abotic]

Hi @fditrapani @mikachan @jeryj 👋

I believe we might be tackling the same issue here so just wanted to give you a heads up.

I've opened a PR that addresses most of the issues discussed here:

• Updated labels on both grid and theme details views
• Removed style variations
• Implemented overall changes based on the other issue and the P2 post discussions

Just noticed today that there was an ongoing discussion/work here about the tooltip and things that I might have already implemented.

Here's a preview of the current implementation:

after.mov

You can find the complete implementation details in the PR:

• Update theme tier badges in Theme Details and Theme Showcase (LiTS & LoTS) #98451

Can we sync and decide how to proceed from here? Would love to collaborate and align our efforts on this! 🙌

cc @rcrdortiz @dsas

[mikachan]

👋 @abotic It sounds like you've already implemented many of the changes we've been working on in #98435. Thanks for letting us know; I'm happy to help review #98451 instead.

[fditrapani]

Nice work @abotic!