Skip to content

Shani/tom how to checkout additional fields #58816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jun 16, 2025

Conversation

shaybanshee
Copy link
Contributor

@shaybanshee shaybanshee commented Jun 13, 2025

This PR adds to How-to guides written by @tjcafferkey to the Cart & Checkout blocks folder, it also removes the Product Editor blocks docs since the block has been entirely deprecated.

Summary by CodeRabbit

  • Documentation
    • Added new comprehensive guides on adding and conditionally displaying additional checkout fields in the WooCommerce Checkout Block, featuring detailed instructions, code examples, and customization options.
    • Removed multiple documents related to extending and customizing the WooCommerce product editor, including handbooks, tutorials, guidelines, lifecycle documentation, and how-to guides.

@shaybanshee shaybanshee requested a review from a team as a code owner June 13, 2025 18:50
Copy link
Contributor

coderabbitai bot commented Jun 13, 2025

Walkthrough

Two new documentation guides were added to the WooCommerce block development docs, focusing on adding and conditionally displaying additional checkout fields in the Checkout Block. Concurrently, multiple documentation files related to product editor development—including tutorials, guidelines, lifecycle explanations, and the main handbook—were removed from the repository.

Changes

File(s) Change Summary
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md Added a guide on registering and managing additional custom checkout fields in the Checkout Block.
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md Added a guide on conditionally displaying additional checkout fields using JSON Schema conditions.
docs/block-development/product-editor-development/README.md Deleted the product editor handbook and introductory documentation.
docs/block-development/product-editor-development/block-template-lifecycle.md Deleted documentation on the lifecycle of product editor block templates.
docs/block-development/product-editor-development/how-to-guides/README.md Deleted the how-to guides index for product editor extension.
docs/block-development/product-editor-development/how-to-guides/custom-field-tutorial.md Deleted the tutorial on adding custom fields to the product editor.
docs/block-development/product-editor-development/how-to-guides/generic-fields-tutorial.md Deleted the tutorial on using generic fields in the product editor.
docs/block-development/product-editor-development/product-editor-extensibility-guidelines.md Deleted the extensibility guidelines for the product editor.
docs/block-development/product-editor-development/product-editor.md Deleted the main product editor developer handbook.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant WooCommerce
    participant Checkout Block

    Developer->>WooCommerce: Register additional checkout field (via API)
    WooCommerce->>Checkout Block: Expose new field in appropriate section
    Checkout Block->>User: Display additional field during checkout
    User->>Checkout Block: Enter data in custom field
    Checkout Block->>WooCommerce: Validate & sanitize field data
    WooCommerce->>Order: Save custom field value
    Developer->>WooCommerce: Retrieve field value from order meta
Loading
sequenceDiagram
    participant Developer
    participant WooCommerce
    participant Checkout Block

    Developer->>WooCommerce: Register additional checkout field with conditions
    WooCommerce->>Checkout Block: Provide field with conditional visibility logic
    Checkout Block->>User: Evaluate conditions (e.g., shipping method, cart contents)
    alt Condition met
        Checkout Block->>User: Show additional field
    else Condition not met
        Checkout Block->>User: Hide additional field
    end
Loading

Possibly related PRs

Suggested reviewers

  • shaybanshee

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c286c78 and 4e83fc9.

📒 Files selected for processing (1)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the Documentation Issues and PRs related to improving documentation label Jun 13, 2025
Copy link
Contributor

github-actions bot commented Jun 13, 2025

Testing Guidelines

Hi @prettyboymp @bacoords ,

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.

@shaybanshee shaybanshee requested a review from bacoords June 13, 2025 18:51
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (2)

75-75: Ensure blank lines around fenced code blocks.

Add a blank line before and after each code fence to satisfy markdownlint MD031.

-Example:
```php
+Example:
+
+```php
...
-```
+```
+

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

75-75: Fenced code blocks should be surrounded by blank lines
null

(MD031, blanks-around-fences)

</details>
<details>
<summary>🪛 GitHub Actions: CI</summary>

[error] 75-75: markdownlint MD031/blanks-around-fences: Fenced code blocks should be surrounded by blank lines

</details>

</details>

---

`80-80`: **Refine preposition for clarity.**

Change “saved to both the customer and the order” to “saved for both the customer and the order” for grammatical correctness.


```diff
-These fields are saved to both the customer and the order
+These fields are saved for both the customer and the order
🧰 Tools
🪛 LanguageTool

[uncategorized] ~80-~80: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e6bc3f2 and 114a1db.

⛔ Files ignored due to path filters (3)
  • docs/_docu-tools/static/img/doc_images/additional-field-address.png is excluded by !**/*.png
  • docs/_docu-tools/static/img/doc_images/additional-field-contact.png is excluded by !**/*.png
  • docs/_docu-tools/static/img/doc_images/additional-field-order.png is excluded by !**/*.png
📒 Files selected for processing (9)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
  • docs/block-development/product-editor-development/README.md (0 hunks)
  • docs/block-development/product-editor-development/block-template-lifecycle.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/README.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/custom-field-tutorial.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/generic-fields-tutorial.md (0 hunks)
  • docs/block-development/product-editor-development/product-editor-extensibility-guidelines.md (0 hunks)
  • docs/block-development/product-editor-development/product-editor.md (0 hunks)
💤 Files with no reviewable changes (7)
  • docs/block-development/product-editor-development/how-to-guides/README.md
  • docs/block-development/product-editor-development/how-to-guides/generic-fields-tutorial.md
  • docs/block-development/product-editor-development/product-editor.md
  • docs/block-development/product-editor-development/block-template-lifecycle.md
  • docs/block-development/product-editor-development/product-editor-extensibility-guidelines.md
  • docs/block-development/product-editor-development/README.md
  • docs/block-development/product-editor-development/how-to-guides/custom-field-tutorial.md
🧰 Additional context used
🪛 LanguageTool
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[uncategorized] ~80-~80: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)

🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

19-19: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


20-20: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


21-21: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


24-24: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


25-25: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


26-26: Unordered list indentation
Expected: 4; Actual: 2

(MD007, ul-indent)


75-75: Fenced code blocks should be surrounded by blank lines
null

(MD031, blanks-around-fences)

🪛 GitHub Actions: CI
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[error] 19-26: markdownlint MD007/ul-indent: Unordered list indentation [Expected: 4; Actual: 2]


[error] 75-75: markdownlint MD031/blanks-around-fences: Fenced code blocks should be surrounded by blank lines

docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

[error] 17-21: markdownlint MD007/ul-indent: Unordered list indentation [Expected: 4; Actual: 2]

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1)

7-7: Fix the broken link to the additional fields guide
The URL has an extra slash and the slug is missing “checkout.” Update it to:

- If you've already learned how to [add additional fields to the WooCommerce Checkout Block](https://developer.woocommerce.com//docs/block-development/cart-and-checkout-blocks/how-to-add-additional-fields-guide),
+ If you've already learned how to [add additional fields to the WooCommerce Checkout Block](https://developer.woocommerce.com/docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide),
🧹 Nitpick comments (1)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1)

62-62: Replace “to” with “for” in the description
Change the preposition for better clarity and accuracy in “saved to both the customer and the order.”

- They’re saved to both the customer and the order, so returning customers won’t need to refill them.
+ They’re saved for both the customer and the order, so returning customers won’t need to refill them.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~62-~62: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 114a1db and 17df74e.

📒 Files selected for processing (2)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[uncategorized] ~62-~62: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)

🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

57-57: Fenced code blocks should be surrounded by blank lines
null

(MD031, blanks-around-fences)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: Evaluate Project Job Statuses

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (2)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (2)

78-79: Verify image path resolution.


97-98: Verify image path resolution.

🧹 Nitpick comments (4)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (4)

1-4: Align frontmatter title with page heading.
The post_title in the frontmatter ("How to Add Additional Fields") doesn’t match the H1 ("How to Add Additional Fields to the WooCommerce Checkout Block"). For consistency, update the frontmatter to reflect the full title.

-post_title: How to Add Additional Fields
+post_title: How to Add Additional Fields to the WooCommerce Checkout Block
-sidebar_label: How to add additional fields in checkout
+sidebar_label: How to Add Additional Fields in Checkout

8-12: Use consistent terminology in intro.
Replace "In this post" with "In this guide" to match the document scope, and consider refining "head to" to "refer to" for tone consistency:

-In this post, we’ll walk through the process of adding your own additional fields to your checkout form and show you practical examples you can implement right away.
+In this guide, we’ll walk through the process of adding your own additional fields to your checkout form and show you practical examples you can implement right away.

-For a deeper dive on the fields and helper methods referenced in this guide, please head to the [Additional Checkout Fields](https://developer.woocommerce.com/docs/block-development/cart-and-checkout-blocks/additional-checkout-fields) documentation.
+For a deeper dive on the fields and helper methods referenced in this guide, please refer to the [Additional Checkout Fields](https://developer.woocommerce.com/docs/block-development/cart-and-checkout-blocks/additional-checkout-fields) documentation.

61-64: Clarify and adjust grammar in Address description.
Consider updating to specify that fields are saved to the customer's account and to the order, and using "for" instead of "to":

-These fields appear in both the shipping and billing address forms. They’re saved to both the customer and the order, so returning customers won’t need to refill them.
+These fields appear in both the shipping and billing address forms. They’re saved for both the customer’s account and the order, so returning customers won’t need to refill them.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~63-~63: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)


191-193: Link to companion guide.
Since there's a "How to Make Additional Fields Conditional" guide in this PR, add a link for discoverability:

-Now that you've learned how to add additional fields to the WooCommerce Checkout Block, consider exploring more advanced features such as conditional field visibility, dynamic field values, and integrating with third-party services.
+Now that you've learned how to add additional fields to the WooCommerce Checkout Block, consider exploring more advanced features such as conditional field visibility (see [How to Make Additional Fields Conditional](./how-to-conditional-additional-fields.md)), dynamic field values, and integrating with third-party services.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 17df74e and 27adad0.

📒 Files selected for processing (1)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[uncategorized] ~63-~63: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: Validate markdown
🔇 Additional comments (15)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (15)

14-18: Section is clear as written.
Good explanation of woocommerce_register_additional_checkout_field() usage post woocommerce_init.


20-36: Code example formatting is correct.
The PHP snippet is well-indented and self-contained.


38-40: Heading is clear.
"Field Locations: Where Your Fields Appear" succinctly introduces the section.


42-45: Contact section description is accurate.
The explanation of data persistence to the customer's account is clear and accurate.


48-57: Contact field example is clear and valid.
The code snippet correctly demonstrates registering a checkbox in the 'contact' area.


59-59: Verify image path resolution.
Ensure the /img/doc_images/additional-field-contact.png path resolves correctly on the docs site.


66-76: Address field example is well-formed.
The snippet correctly shows a text field in the 'address' location.


80-83: Order Information section is clear.
Good description of order-only fields.


85-96: Order field example is correct.
The code correctly shows registering a text field in the 'order' block.


100-108: Supported Field Types section is straightforward.
Text Fields example is concise and accurate.


110-118: Select Dropdowns example is clear.
The options array is well-documented.


120-124: Checkbox example is correct.
Simple and accurate illustration of checkbox type.


126-144: Adding Field Attributes section is comprehensive.
Good demonstration of placeholder, default, and class attributes.


147-164: Validation and Sanitization examples are solid.
The filter and action hooks are correctly used with clear examples.


180-189: Accessing Field Values example is accurate.
get_meta usage is demonstrated correctly.

@shaybanshee shaybanshee requested a review from a team as a code owner June 16, 2025 16:11
@shaybanshee shaybanshee requested review from prettyboymp and removed request for a team June 16, 2025 16:11
@github-actions github-actions bot added focus: e2e tests Issues related to e2e tests focus: monorepo infrastructure Issues and PRs related to monorepo tooling. package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 16, 2025
@shaybanshee shaybanshee force-pushed the shani/tom-how-to-checkout-additional-fields branch from 75fc080 to 37b1bbd Compare June 16, 2025 16:12
Copy link
Contributor

Size Change: +819 B (+0.01%)

Total Size: 5.93 MB

Filename Size Change
./packages/js/components/build/select-control/index.js 3.74 kB +123 B (+3.4%)
./plugins/woocommerce/client/legacy/build/js/frontend/add-to-cart.js 2.47 kB +122 B (+5.19%) 🔍
./plugins/woocommerce/client/legacy/build/js/frontend/woocommerce.js 2.48 kB +225 B (+9.96%) ⚠️

compressed-size-action

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (1)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1)

9-9: Fix broken link to the additional fields guide
This URL has a double slash and the wrong slug—also noted in a previous review.

- If you've already learned how to [add additional fields to the WooCommerce Checkout Block](https://developer.woocommerce.com//docs/block-development/cart-and-checkout-blocks/how-to-add-additional-fields-guide),
+ If you've already learned how to [add additional fields to the WooCommerce Checkout Block](./how-to-additional-checkout-fields-guide.md),
🧹 Nitpick comments (4)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (3)

1-4: Allow fenced code blocks to satisfy linting without rewriting examples
CI is failing MD046 (code-block-style) for all fenced PHP examples. Rather than convert dozens of snippets, disable the rule for this file by adding a markdownlint directive after the frontmatter.

--- a/docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
+++ b/docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
@@
 ---
+<!-- markdownlint-disable MD046 -->

347-348: Insert blank line before heading
MD022 is reporting "Headings should be surrounded by blank lines" for "## Available data for conditions".

--- a/docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
+++ b/docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
@@
-## Available data for conditions
+ 
+## Available data for conditions

365-365: Remove extraneous trailing marker
The closing --- at the end of the file is not needed and may be confusing.

--- a/docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
- ---
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1)

171-171: Grammar: add missing article for clarity
Include "a" to improve the phrasing around user experience.

- You can enhance your fields with HTML attributes for better user experience:
+ You can enhance your fields with HTML attributes for a better user experience:
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27adad0 and 37b1bbd.

⛔ Files ignored due to path filters (4)
  • docs/_docu-tools/static/img/doc_images/additional-field-address.png is excluded by !**/*.png
  • docs/_docu-tools/static/img/doc_images/additional-field-contact.png is excluded by !**/*.png
  • docs/_docu-tools/static/img/doc_images/additional-field-order.png is excluded by !**/*.png
  • docs/_docu-tools/static/img/doc_images/woo-local-checkout.png is excluded by !**/*.png
📒 Files selected for processing (9)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
  • docs/block-development/product-editor-development/README.md (0 hunks)
  • docs/block-development/product-editor-development/block-template-lifecycle.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/README.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/custom-field-tutorial.md (0 hunks)
  • docs/block-development/product-editor-development/how-to-guides/generic-fields-tutorial.md (0 hunks)
  • docs/block-development/product-editor-development/product-editor-extensibility-guidelines.md (0 hunks)
  • docs/block-development/product-editor-development/product-editor.md (0 hunks)
💤 Files with no reviewable changes (7)
  • docs/block-development/product-editor-development/README.md
  • docs/block-development/product-editor-development/how-to-guides/generic-fields-tutorial.md
  • docs/block-development/product-editor-development/how-to-guides/README.md
  • docs/block-development/product-editor-development/product-editor.md
  • docs/block-development/product-editor-development/block-template-lifecycle.md
  • docs/block-development/product-editor-development/product-editor-extensibility-guidelines.md
  • docs/block-development/product-editor-development/how-to-guides/custom-field-tutorial.md
🧰 Additional context used
🪛 LanguageTool
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[uncategorized] ~67-~67: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)


[uncategorized] ~171-~171: You might be missing the article “a” here.
Context: ...ce your fields with HTML attributes for better user experience: Example: ```php wooco...

(AI_EN_LECTOR_MISSING_DETERMINER_A)

🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

29-29: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


44-44: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


77-77: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


103-103: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


131-131: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


174-174: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


233-233: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


348-348: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

🪛 GitHub Actions: CI
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

[error] 29-29: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 44-44: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 77-77: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 103-103: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 131-131: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 174-174: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 233-233: markdownlint MD046/code-block-style: Code block style [Expected: indented; Actual: fenced]


[error] 348-348: markdownlint MD022/blanks-around-headings: Headings should be surrounded by blank lines [Expected: 1; Actual: 0; Below] [Context: "## Available data for conditions"]

🔇 Additional comments (1)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1)

1-308: Comprehensive guide looks solid
Thorough coverage of the woocommerce_register_additional_checkout_field() API and its usage scenarios. No further issues detected.

Copy link
Contributor

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (2)

67-67: Suggest preposition adjustment
Change “saved to both the customer and the order” to “saved for both the customer and the order” for clearer phrasing.


171-171: Add missing article
Modify “for better user experience” to “for a better user experience” to include the necessary article.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 37b1bbd and 2b559cf.

📒 Files selected for processing (2)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md

[uncategorized] ~67-~67: The preposition “for” seems more likely in this position than the preposition “to”.
Context: ...nd billing address forms. They’re saved to both the customer and the order, so ret...

(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_TO_FOR)


[uncategorized] ~171-~171: You might be missing the article “a” here.
Context: ...ce your fields with HTML attributes for better user experience: Example: ```php wooco...

(AI_EN_LECTOR_MISSING_DETERMINER_A)

🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

29-29: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


44-44: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


77-77: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


103-103: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


131-131: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


174-174: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


233-233: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


348-348: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: Evaluate Project Job Statuses

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (1)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1)

15-19: Fix list indentation
The indented asterisks render as code blocks instead of list items. Remove leading spaces so they render correctly as a bulleted list.

🧹 Nitpick comments (5)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (5)

1-4: Align frontmatter title with page heading
The post_title (“How to Add Conditional Additional Checkout Fields”) and the H1 (“How to Make Your WooCommerce Additional Checkout Fields Conditionally Visible in the Checkout Block”) don’t match exactly. Consider unifying them for consistency.


1-9: Add cross-link to the basic additional fields guide
To help readers follow the progressive path, include a link at the top referencing the “How to Add Additional Checkout Fields” guide (e.g. a relative link to how-to-additional-checkout-fields-guide.md).


7-7: Use an info/admonition block for version requirement
Highlight the WooCommerce 9.9.0 requirement in an admonition (e.g., :::note) instead of plain text to improve visibility.


195-207: Correct array indentation and bracket alignment
The closing bracket for the 'required' block is misaligned, which makes the PHP example harder to read. Align the ], under the 'required' key for consistency.


346-346: Add blank line before heading
Ensure the “## Available data for conditions” heading has a blank line above it to comply with markdown style guidelines.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b559cf and c59fad9.

📒 Files selected for processing (2)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md (1 hunks)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • docs/block-development/cart-and-checkout-blocks/how-to-additional-checkout-fields-guide.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

27-27: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


42-42: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


75-75: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


101-101: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


129-129: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


172-172: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


231-231: Code block style
Expected: indented; Actual: fenced

(MD046, code-block-style)


346-346: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (2)

27-34: Correct the JSON Schema snippet comments.

The comment under the required key wrongly says “Define when to hide here” — it should clarify that this block defines when the field is required.

Apply this diff:

@@ 28,29c28,29
-    // Define when to hide here
+    // Define when the field is required
@@ 31,32c31,32
-    // Define when to hide here
+    // Define when the field is hidden

7-10: Add a cross-reference to the foundational guide.

This document builds on the “How to Add Additional Checkout Fields” guide but doesn’t link to it. Adding a relative link at the top helps readers follow the progression.

Example:

@@ 9,10c9,12
-Conditional visibility allows you to create smart, adaptive checkout forms that only show relevant fields when needed, reducing form clutter and improving the customer experience.
+If you haven’t yet registered additional checkout fields, see [How to Add Additional Checkout Fields](./how-to-additional-checkout-fields-guide.md) first.
+
+Conditional visibility allows you to create smart, adaptive checkout forms that only show relevant fields when needed, reducing form clutter and improving the customer experience.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c59fad9 and c286c78.

📒 Files selected for processing (1)
  • docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md (1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

346-346: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

🪛 GitHub Actions: CI
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md

[error] 346-346: markdownlint MD022: Headings should be surrounded by blank lines [Expected: 1; Actual: 0; Below] at line 346 near '## Available data for conditions'

Comment on lines +344 to +346
```

## Available data for conditions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix missing blank line before heading (MD022).

The CI lint failure indicates that “## Available data for conditions” needs a blank line above.

Apply this diff:

@@ 344,346
-```
-## Available data for conditions
+```
+
+## Available data for conditions
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

346-346: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

🪛 GitHub Actions: CI

[error] 346-346: markdownlint MD022: Headings should be surrounded by blank lines [Expected: 1; Actual: 0; Below] at line 346 near '## Available data for conditions'

🤖 Prompt for AI Agents
In
docs/block-development/cart-and-checkout-blocks/how-to-conditional-additional-fields.md
around lines 344 to 346, there is a missing blank line before the heading "##
Available data for conditions" causing a markdown lint error (MD022). Fix this
by adding a blank line above the heading to separate it properly from the
preceding content.

@shaybanshee shaybanshee requested a review from bacoords June 16, 2025 18:43
@github-actions github-actions bot removed focus: e2e tests Issues related to e2e tests plugin: woocommerce Issues related to the WooCommerce Core plugin. focus: monorepo infrastructure Issues and PRs related to monorepo tooling. package: @woocommerce/components issues related to @woocommerce/components labels Jun 16, 2025
@shaybanshee shaybanshee merged commit e92b575 into trunk Jun 16, 2025
16 checks passed
@shaybanshee shaybanshee deleted the shani/tom-how-to-checkout-additional-fields branch June 16, 2025 18:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Documentation Issues and PRs related to improving documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants