Cart/Checkout: Adjust styling of product attributes so that they are visually distinct. #52607

samueljseay · 2024-11-06T08:45:58Z

Changes proposed in this Pull Request:

Closes #42022

Adds a small amount of margin to each product description item.
Always apply bold styling to the name element.

How to test the changes in this Pull Request:

This is a visual change and also impacts cart, so check that it hasn't introduced any visual regressions or issues in either cart or checkout.

Add a product with some variations to your store, ideally more than one so you can see the list displayed.
As a shopper add some of the variable products to your cart
Examine the styling of the list of product attributes in cart and checkout

Before:

Mobile:

Desktop:

After:

Mobile:

Desktop:

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Cart/Checkout: Adjust styling of product attributes so that they are visually distinct.

Changelog Entry Comment

Comment

…uct details.

github-actions · 2024-11-06T08:46:33Z

Hi @senadir,

Apart from reviewing the code changes, please make sure to review the testing instructions and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

…mmerce-blocks

github-actions · 2024-11-06T08:52:48Z

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

github-actions · 2024-11-06T08:53:25Z

Size Change: +17.2 kB (+0.34%)

Total Size: 5.07 MB

Filename	Size	Change
`./packages/js/data/build/payment-settings/actions.js`	1.1 kB	+314 B (+39.95%)	🚨
`./plugins/woocommerce/client/admin/build/app/index.js`	196 kB	+249 B (+0.13%)
`./plugins/woocommerce/client/admin/build/chunks/8534.style.css`	1.56 kB	+171 B (+12.33%)	⚠️
`./plugins/woocommerce/client/admin/build/chunks/settings-payments-offline.js`	1.93 kB	+708 B (+57.89%)	🆘
`./plugins/woocommerce/client/admin/build/data/index.js`	40.7 kB	+157 B (+0.39%)
`./packages/js/data/build/payment-settings/utils.js`	253 B	+253 B (new file)	🆕
`./plugins/woocommerce/client/admin/build/chunks/4521.js`	15 kB	+15 kB (new file)	🆕

_{compressed-size-action}

samueljseay · 2024-11-11T04:10:31Z

@wavvves bump on this if you're around today 🙇🏻

senadir · 2024-11-18T16:34:22Z

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-details/style.scss

@@ -18,7 +19,7 @@
 	display: inline-block;
 }

-.is-large:not(.wc-block-checkout) {


Seems this was on purpose, any idea why it was set that way?

Good idea to test subscriptions. The checkout and cart styles have departed a lot since then so I didn't think too much of it not being needed anymore.

Subscriptions is an extension though right, shouldn't any CSS fix for that specific case belong in that plugin?

senadir

Original PR (woocommerce/woocommerce-blocks#3665) does mention WCSubs, I will test against that tomorrow

…eta-42022

samueljseay · 2024-11-21T04:21:04Z

@elizaan36 When you have a chance would you mind having another look? I've matched the design spacing and font sizes as best I can (our em based font sizes are 0.3px smaller than the design).

We don't have the new badge design so still the spacing between product image and description are different. I'll see if I can pick that up in a cooldown sometime, because the badge really cleans up the look of the area too.

Anyway here's how a product with attributes looks:

elizaan36 · 2024-11-22T16:42:17Z

Really nice @samueljseay thanks! I still think we need to capitalize the first letter of the attribute category if possible.

pierorocca · 2024-11-23T00:03:34Z

@pmcpinto for visibility.

The order summary section ends up being a long list of bolded, important elements drawing attention from the main CTA, placing the order.

There's already a lot of divergence between WooPay and Blocks pdpOw2-4Df-p2 that Nikki was attempting to converge and to address mobile optimization. Can we regroup before progressing any further?

Shopify Benchmark - note the lack of even needing attribute labels.

Shopify Guest Checkout

ShopPay Checkout (Yes it's identical to the store guest checkout order summary AND the order summary in the TY page).

samueljseay · 2024-11-25T02:56:44Z

@pierorocca I agree it would be good to overall optimize the design, especially I like the shopify concept of removing the attrtibute labels

pierorocca · 2024-11-25T06:03:41Z

@pierorocca I agree it would be good to overall optimize the design, especially I like the shopify concept of removing the attrtibute labels

It makes sense right? If the word shown is "Green", the label "Color" is redundant. I appreciate how mobile optimized and to the point their summary is. Before Nikki left we were discussing a mobile first approach which led to the size comparisons in the linked P2.

pmcpinto · 2024-11-29T13:43:15Z

Woo’s case differs slightly from Shopify, as our users have more flexibility to create attributes and variations, unlocking more bespoke and niche situations. Still, I think having the attribute label can be redundant in most situations.

Cc @elizaan36 in case you have some suggestions on displaying the attribute value without the label.

PS: it will be interesting to see if Shopify’s expansion of their product model with more complex attributes and higher number of variations will impact their order summary.

pierorocca · 2024-11-29T16:48:17Z

Different ways to approach this. Certainly needs a full exploration, which is what I'm advocating for here before we make changes to a very important component.

samueljseay · 2024-12-03T02:21:10Z

Certainly needs a full exploration, which is what I'm advocating for here before we make changes to a very important component.

@pmcpinto seems the advocation here is to put a hold on these changes, so I'd just be keen to know what you think are best steps forward here, I don't have strong feelings either way. 🙇

pierorocca · 2024-12-03T20:50:25Z

@samueljseay TT5 design is in flight which I see already has some changes to the order summary sections, there's a new checkout designer that started yesterday, and there are changes coming to how we approach the checkout design in general so I'd recommend holding off.

pmcpinto · 2024-12-04T06:19:43Z

I agree that putting this work on hold is the best option. Thanks.

samueljseay · 2024-12-04T10:55:17Z

Thanks folks! Closing this for now 🙇

elizaan36 · 2024-12-05T18:57:18Z

Thanks y'all. I'm going to put this on the list of first projects for Yoann to take a look at.

Add some spacing and univerally apply bold style to 'labels' for prod…

1531bef

…uct details.

woocommercebot requested review from a team and mikejolley and removed request for a team November 6, 2024 08:46

samueljseay added team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Nov 6, 2024

samueljseay removed the request for review from mikejolley November 6, 2024 08:46

Add changefile(s) from automation for the following project(s): wooco…

837c27f

…mmerce-blocks

samueljseay closed this Nov 6, 2024

samueljseay reopened this Nov 6, 2024

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Nov 6, 2024

samueljseay requested review from a team and wavvves and removed request for a team November 6, 2024 11:16

Merge branch 'trunk' into dev/separate-order-meta-42022

c628cbb

samueljseay mentioned this pull request Nov 7, 2024

Improve UI for order meta on the Block Checkout page #42022

Open

Merge branch 'trunk' into dev/separate-order-meta-42022

de73bad

samueljseay requested review from a team and senadir and removed request for wavvves and a team November 12, 2024 03:29

Merge branch 'trunk' into dev/separate-order-meta-42022

5f8732c

senadir reviewed Nov 18, 2024

View reviewed changes

Merge remote-tracking branch 'origin/trunk' into dev/separate-order-m…

d63421f

…eta-42022

Tigten up spacing and fix font sizes to better match the latest designs.

2ea8b69

elizaan36 mentioned this pull request Nov 22, 2024

Applying V2 card styles to V1 element: Card brand icons on radio button (shortcode) Automattic/woocommerce-payments#9488

Open

samueljseay added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Nov 29, 2024

samueljseay closed this Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cart/Checkout: Adjust styling of product attributes so that they are visually distinct. #52607

Cart/Checkout: Adjust styling of product attributes so that they are visually distinct. #52607

samueljseay commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

samueljseay commented Nov 11, 2024

senadir Nov 18, 2024

samueljseay Nov 19, 2024

senadir left a comment

samueljseay commented Nov 21, 2024

elizaan36 commented Nov 22, 2024

pierorocca commented Nov 23, 2024 •

edited

Loading

samueljseay commented Nov 25, 2024

pierorocca commented Nov 25, 2024 •

edited

Loading

pmcpinto commented Nov 29, 2024

pierorocca commented Nov 29, 2024

samueljseay commented Dec 3, 2024

pierorocca commented Dec 3, 2024

pmcpinto commented Dec 4, 2024

samueljseay commented Dec 4, 2024

elizaan36 commented Dec 5, 2024

Cart/Checkout: Adjust styling of product attributes so that they are visually distinct. #52607

Cart/Checkout: Adjust styling of product attributes so that they are visually distinct. #52607

Conversation

samueljseay commented Nov 6, 2024 • edited Loading

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Before:

Mobile:

Desktop:

After:

Mobile:

Desktop:

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Nov 6, 2024 • edited Loading

github-actions bot commented Nov 6, 2024 • edited Loading

Test using WordPress Playground

github-actions bot commented Nov 6, 2024 • edited Loading

samueljseay commented Nov 11, 2024

senadir Nov 18, 2024

Choose a reason for hiding this comment

samueljseay Nov 19, 2024

Choose a reason for hiding this comment

senadir left a comment

Choose a reason for hiding this comment

samueljseay commented Nov 21, 2024

elizaan36 commented Nov 22, 2024

pierorocca commented Nov 23, 2024 • edited Loading

samueljseay commented Nov 25, 2024

pierorocca commented Nov 25, 2024 • edited Loading

pmcpinto commented Nov 29, 2024

pierorocca commented Nov 29, 2024

samueljseay commented Dec 3, 2024

pierorocca commented Dec 3, 2024

pmcpinto commented Dec 4, 2024

samueljseay commented Dec 4, 2024

elizaan36 commented Dec 5, 2024

samueljseay commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

pierorocca commented Nov 23, 2024 •

edited

Loading

pierorocca commented Nov 25, 2024 •

edited

Loading