A plugin for adding input fields to the WooCommerce Checkout Block.

SilkyPress

<p><strong>Basically, it is a checkout field editor plugin, but for the WooCommerce block checkout</strong></p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/kHiKNGsyYCQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>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 <strong>SilkyPress Input Field Block</strong> plugin lets you add inner blocks with a custom input field to the checkout block.</p>
<p>The plugin creates a block, called <code>Input Field</code>, which can be added to an inner block of the <code>Checkout Block</code>. 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 <code>Checkout Block</code> and can be inserted more than one time within the same inserter place of the <code>Checkout Block</code>.</p>
<h3>Input Field block <strong>settings</strong></h3>
<p>After adding an <code>Input Field</code> inner block to the checkout block, you can change its settings in the <code>Block Inpector</code> on the right side of the editor. Within the settings <code>General</code> tab you can set its:<br />
– Field type (<code>Text</code>, <code>Select</code>, <code>Checkbox</code>, <code>Radio</code> or <code>Textarea</code>)<br />
– Label<br />
– Id<br />
– Default value<br />
– Help text</p>
<h3>Input Field <strong>validation</strong> on the frontend</h3>
<p>In the <code>Validation</code> 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 <strong>Place Order</strong> button, the <code>Please fill this field</code> error message will be shown.</p>
<h3><strong>Storing the value</strong> of the Input Field</h3>
<p>After clicking the <strong>Place Order</strong> button, the value of the <code>Input Field</code> will be saved to the database as a custom field associated with the order.</p>
<p>In the <code>Presentation</code> tab of the <code>Input Field</code> block’s settings you can enable:<br />
– the <code>Show on Order page</code> option so that the field’s value will show up on the <code>Edit Order</code> page in the admin<br />
– the <code>Show on Order Confirmation</code> option so that the field’s value will show up on the customer’s <code>Order Confirmation</code> page (formally known as <code>Thank You</code> page)<br />
– the <code>Show on Order Email</code> option so that the field’s value will show up in the email the customer receives after placing the order.</p>


Alternatives to SilkyPress Input Field Block

Top alternatives