Skip to content

Make checkout item quantity inherit theme colours and round if single-digit#63007

Merged
senadir merged 2 commits intotrunkfrom
wooprd-1447-update-item-count-in-checkout
Mar 3, 2026
Merged

Make checkout item quantity inherit theme colours and round if single-digit#63007
senadir merged 2 commits intotrunkfrom
wooprd-1447-update-item-count-in-checkout

Conversation

@opr
Copy link
Copy Markdown
Contributor

@opr opr commented Jan 28, 2026

Changes proposed in this Pull Request:

Updates the item quantity in the Checkout order summary to inherit theme colours and be rounded if single-digit, and stretch into a pill-shape if more than one digit.

Closes WOOPRD-1447

Screenshots or screen recordings:

Dark block theme before Dark block theme after
image image
Light block theme before Light block theme after
image image
Classic theme before Classic theme after
image image

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Add several items to your cart, one with a single-digit quantity, one with a double-digit quantity, and one with 3+ digit quantity (1, 10, 100, for example)
  2. View the Mini-cart and Cart blocks, make sure the line items and order summary look normal (no changes here)
  3. Go to the Checkout block, ensure the quantity of each item in the order summary shows in a small black circle or pill, and changes with the theme colours and background.
  4. Edit your theme to modify background, text colour, to a few different settings and make sure it displays well.
  5. Try using a classic theme and ensure that it displays sensibly when using a light and dark theme.

Testing that has already taken place:

Milestone

Note: Check the box above to have the milestone automatically assigned when merged.
Alternatively (e.g. for point releases), manually assign the appropriate milestone.

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

Changelog Entry Comment

Comment

@woocommercebot woocommercebot requested a review from a team January 28, 2026 14:54
@github-actions github-actions Bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jan 28, 2026
@woocommercebot woocommercebot requested review from straku and removed request for a team January 28, 2026 14:54
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 28, 2026 •
edited
Loading

Testing Guidelines

Hi @senadir @straku ,

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

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 28, 2026

📝 Walkthrough

Walkthrough

This PR updates the checkout item quantity styling in WooCommerce blocks. The order summary component's SCSS is refactored to apply rounded styling with currentColor background and nested span padding. A changelog entry documents the update.

Changes

Cohort / File(s) Change Summary
Changelog Metadata
plugins/woocommerce/changelog/wooprd-1447-update-item-count-in-checkout		 Added changelog entry documenting minor update: "Make checkout item quantity round and inherit theme colours."
Order Summary Styling
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/style.scss		 Refactored .wc-block-components-order-summary-item__quantity styling: replaced solid white background with currentColor, added 20px border-radius, removed container padding, and introduced nested span selector with 0 0.4em horizontal padding and background color text styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: updating the checkout item quantity styling to inherit theme colors and display as rounded for single digits.
Description check ✅ Passed The description is directly related to the changeset, explaining the proposed updates to the item quantity in checkout order summary and providing relevant screenshots and testing instructions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 28, 2026

Size Change: +27 B (0%)

Total Size: 5.95 MB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 28, 2026

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.

@opr opr requested a review from senadir February 3, 2026 10:49
@senadir
Copy link
Copy Markdown
Member

senadir commented Mar 3, 2026 •
edited
Loading

Looking good

@senadir senadir merged commit f5c21ce into trunk Mar 3, 2026
119 of 126 checks passed
@senadir senadir deleted the wooprd-1447-update-item-count-in-checkout branch March 3, 2026 17:10
@github-actions github-actions Bot added this to the 10.7.0 milestone Mar 3, 2026
samnajian pushed a commit that referenced this pull request Mar 11, 2026
@opr @samnajian
Make checkout item quantity inherit theme colours and round if single…
04f187c 
…-digit (#63007)

* Make checkout item quantity round and inherit theme colours

* Add changelog
jamesckemp pushed a commit that referenced this pull request Mar 11, 2026
@opr @jamesckemp
Make checkout item quantity inherit theme colours and round if single…
d626c8b 
…-digit (#63007)

* Make checkout item quantity round and inherit theme colours

* Add changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@senadir senadir senadir approved these changes

@straku straku Awaiting requested review from straku straku was automatically assigned from woocommerce/rubik

Assignees

No one assigned

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

10.7.0

Development

Successfully merging this pull request may close these issues.

2 participants

@opr @senadir