SPIKE: Explore moving the BNPL payments method messaging element from below the payments wrapper to below the product price

[pierorocca]

Description

BNPL is an important payment method that allows shoppers to spread payments over a longer time period. As a new category of online payment, consumer adoption and awareness continues to be in a growth phase. Thus, how this category of payment method is presented to shoppers is important to adoption and perception.

In the initial deployment of BNPL, the Stripe payments method messaging component was placed below the payment request buttons on the Product Page. Additionally, if another gateway such as PayPal is activated and is ordered below WooPayments, it pushes the BNPL messaging below that gateway's buttons.

Combined there are several issues with this placement:

1. The "4 payments of $20.00" message is visually far removed from the product price, impacting discoverability and lessens the impact of the perceived price reduction.
2. In single gateway stores, the close proximity to the PRB buttons can create an association that the financing option is offered by the express checkout provider. Additionally, we have found that it is difficult to inject elements near the PRB wrapper and have it styled properly without merchant intervention.
3. In multi-gateway stores, the BNPL messaging can be pushed far down, completely disassociated with the important details on the page.
4. Product details such as the SKU, category tags, etc. get pushed down even further to the point they are no longer visually associated with the product details, and impacting the theme's design goals.

Shortcode Examples:

Blocks: Blocks presents with a better placement, though I'm unsure if this placement was intentional. The spacing between the price and the messaging is better if reduced.

Inspirational Examples: Looking at how retailers position BNPL options, there's a clear pattern. The BNPL messaging is in close proximity to the price either on the same line or on the next line.

Acceptance criteria

• The existing BNPL payments method messaging component is placed immediately below the price

Open questions:

1. Can this be done reliably across a selection of Shortcode templates? Is there a filter located after price on most themes that we can utilize consistently and without impact other elements such as the quantity picker, add to cart button and the payments button wrapper?

2.In the current Blocks implementation, where was the messaging intended to be placed vs. where it's rendering?

cc @FangedParakeet @csmcneill @elizaan36

[pierorocca]

Love what Purple is doing in the cart to increase discoverability and usage.

[pierorocca]

Thanks @brettshumaker!

[zmaglica]

This issue impacts BNPL, so assigning to Heisenberg (based on team responsibilities Pc2DNy-3z-p2) @FangedParakeet . Assigning as part of Gamma Triage process PcreKM-yM-p2.

[pierorocca]

FYI as long as the right component is labeled, the issue will automatically get added to Heisenberg's project board, triaged, prioritized, and then picked up by an engineer. Is the assigning process still needed @zmaglica ?

[zmaglica]

It will be in the WooPayment Backlog and as a Gamma porter I have to triage it, assign it to the right team and ping the right people to avoid losing context.

[brettshumaker]

@pierorocca

Can this be done reliably across a selection of Shortcode templates? Is there a filter located after price on most themes that we can utilize consistently and without impacting other elements such as the quantity picker, add to cart button and the payments button wrapper?

Yes, we should be able to utilize the woocommerce_single_product_summary hook with a priority of 10. The priority doesn’t matter so much on block-based single product pages (reason noted below), but will ensure that it gets placed in the correct spot on non-block themes as well as when other plugins (or the theme) are also trying to place information in that same location based on the core WooCommerce hook priorities.

The trickiest thing will be getting the base styling correct. The core Woo product price block (and non-block version) will likely have a custom margin set for the top and bottom. We would likely have to try and get the bottom margin from the price element, remove or adjust it, and then apply it to our element so the theme’s spacing remains consistent. That method may not be foolproof as there are multiple html elements inside the .price element that a margin could be applied to by the theme.

---

In the current Blocks implementation, where was the messaging intended to be placed vs. where it's rendering?

I think this is accidental. I’m not 100% confident on this, but it looks like the blocks single product template essentially removes all of the core filters that add the various bits of product info to the product summary section. This means that whenever we hook into that section to add the BNPL text, nothing else is there and we get placed just above the post excerpt block in the product template. That just so happens to be directly underneath the product price block.

[FangedParakeet]

Please add your planning poker estimate with Zenhub @brettshumaker

[pierorocca]

Thanks for the deep detail @brettshumaker. Much appreciated.

Noting here that on a few other sites, I've seen 5 star product reviews located below the PRBs which is yet another potential for a collision with the existing implementation.

[pierorocca]

Nice work.