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
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.
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.
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
Buy with
,Donate with
, orBook with
, the text will removed.Designs
https://developer.woo.com/docs/user-experience-guidelines-payment-button-size-and-anatomy/