SilkyPress Input Field Block

설명

Basically, it is a checkout field editor plugin, but for the WooCommerce block checkout

The WooCommerce block checkout can be edited directly from the Gutenberg editor (open the “WP Admin -> Pages -> Checkout” for editing). By default WooCommerce allows adding only Paragraph/Image/Separator inner blocks to the checkout block. The SilkyPress Input Field Block plugin lets you add inner blocks with a custom input field to the checkout block.

The plugin creates a block, called Input Field, which can be added to an inner block of the Checkout Block. One instance of the block will add one custom field to the checkout form. The block can be added as many times as necessary to the Checkout Block and can be inserted more than one time within the same inserter place of the Checkout Block.

Input Field block settings

After adding an Input Field inner block to the checkout block, you can change its settings in the Block Inpector on the right side of the editor. Within the settings General tab you can set its:
– Field type (Text, Select, Checkbox, Radio or Textarea)
– Label
– Id
– Default value
– Help text

Input Field validation on the frontend

In the Validation tab you can toggle the input field as to be required or optional. On the frontend, if a required input field is left empty by the customer, then, upon clicking the Place Order button, the Please fill this field error message will be shown.

Storing the value of the Input Field

After clicking the Place Order button, the value of the Input Field will be saved to the database as a custom field associated with the order.

In the Presentation tab of the Input Field block’s settings you can enable:
– the Show on Order page option so that the field’s value will show up on the Edit Order page in the admin
– the Show on Order Confirmation option so that the field’s value will show up on the customer’s Order Confirmation page (formally known as Thank You page)
– the Show on Order Email option so that the field’s value will show up in the email the customer receives after placing the order.

스크린샷

후기

2024년 6월 20일
Brilliant no-code solution for adding custom checkout fields (WooCommerce) compatible with WordPress’ new native blocks (aka Gutenberg).
모든 2 평가 읽기

기여자 & 개발자

“SilkyPress Input Field Block”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

자국어로 “SilkyPress Input Field Block”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.

변경이력

1.7

  • 06/04/2025
  • Fix: if added directly to the “Checkout Fields” block, then move the input field to its position. With WC9.8+ wasn’t working correctly anymore.
  • Change: use the default ValidationInputError component from @woocommerce/blocks-checkout

1.6

  • 08/22/2024
  • Fix: the validation error for the Select and Textarea input fields was showing up at the bottom of the page

1.5

  • 08/05/2024
  • Change: inherit the colors, borders and margins set in the theme’s global styles

1.4

  • 05/24/2024
  • Fix: Input Field blocks were not shown if the Checkout block was preceded by an HTML block.

1.3

  • 05/09/2024
  • Fix: Validate the Id/Name setting.
  • Fix: Sanitize the select and radio options on the frontend.

1.2

  • 03/07/2024
  • Fix: Input Field blocks were not shown if the Checkout block was nested in other blocks.
  • Fix: The Additional Information section was showing twice when ordering as a logged in user.

1.1

  • 02/25/2024
  • Add description and screenshots
  • Declare compatibility WooCommerce 8.6

1.0

  • 02/02/2024
  • Initial commit