search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
171 stars 69 forks source link

Remove "Buy with" copy from PRB buttons that don't meet the minimum width requirements #8135

Open pierorocca opened 7 months ago

pierorocca commented 7 months ago

Description

Recently, the Woo Design team release UX guidelines for payment request buttons. The guidelines help instruct 3P gateway and theme developers on buttons size, styling, and placement.

Merchants may use the button without any text, or they can choose one of four options of which "Buy with" is set at the default. Currently on shortcode, the PRBs are sized to match the container's width. However on some themes, the container width can be rather small either by design or due to a 3 column layout. In those case, the button width could become so small that the button label either shrinks or clips and/or the label and logo shrink to a small, hard to read size.

Acceptance criteria

  1. If the width of the payment button (or more ideally the width of the container) falls below the minimum threshold per the design guidelines AND the button is set to display the text Buy with, Donate with, or Book with, the text will removed.

Designs

https://developer.woo.com/docs/user-experience-guidelines-payment-button-size-and-anatomy/

zmaglica commented 7 months ago

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