Checkout Fields for Blocks vs Bootstrap Blocks

Checkout Fields for Blocks is a plugin designed to customize the WooCommerce checkout form. The plugin allows adding new fields to the WooCommerce checkout page.  The plugin is a free WooCommerce checkout editor using visual blocks. It requires WooCommerce in version 8.3+ and a theme supporting blocks (block editor). ➡️➡️➡️ Download Checkout Fields for Blocks ⬅️⬅️⬅️ How does the plugin work? You may customize the WooCommerce new block-based checkout form with new fields. The plugin allows adding new fields to the WooCommerce checkout form. What’s more, it’s possible to use field general settings, options (for select), validation, display on, and advanced options (text input example). How to add a new field to the WooCommerce block checkout? Install and activate the plugin. Download Checkout Fields for Blocks Edit the checkout page (more about WooCommerce checkout block). Add a new field or fields to the form (field types below). Use the field settings for checkout customization (options below). Update the page. Plugin features ✅ Add new checkout fields You may add a paragraph, image, or separator (the default WooCommerce blocks). However, the plugin extends the number of available options (fields) for the checkout form. Adding a new field is integrated into the block search bar. The new checkout block fields are also available under the “Checkout Block Fields” category when browsing all blocks. ✅ Field types It’s possible to choose a new field with the search bar or from the list. Checkout Fields for Blocks allows the following new fields (field types) for the form. Text input Email Number Url Checkbox Select Textarea ➡️➡️➡️ Download Checkout Fields for Blocks ⬅️⬅️⬅️ ⚙️ Settings for checkout block fields General settings depend on the field type: For example, the textarea field comes with: – Field name – Meta name – Label – Placeholder – Help text ☑️ Field validation The plugin allows defining the validation for each field (text input example): Required (if the field is mandatory or optional) Phone Email URL Minimum length Maximum length Pattern 🎨 Display on settings for checkout block fields It’s also possible to choose where to show the new checkout fields in WooCommerce. Order confirmation Admin order My Account order Order e-mail ➡️➡️➡️ Download Checkout Fields for Blocks ⬅️⬅️⬅️ ⚙️ Advanced field settings Finally, the plugin allows defining the css classes for each field. 🆓 More free plugins Checkout Fields for Blocks is one of many free plugins from WP Desk. You may find more free plugins for WordPress and WooCommerce by clicking on the link below. ➡️➡️➡️ Free plugins for WordPress and WooCommerce ⬅️⬅️⬅️ Support We provide limited support for the free version in the plugin Support Forum. You may help us translate the plugin. Data use policy Learn about Use of Data Policy by WP Desk Plugins ⭐PRO Add-ons for Flexible Checkout Fields For Blocks PRO add-ons extend the functionality of the Flexible Checkout Fields For Blocks plugin for WooCommerce. They allow advanced checkout customization in the block-based checkout, improving usability, flexibility, and order value – without custom development. Conditional Checkout Fields Add-on Adds conditional logic to checkout fields in the WooCommerce block-based checkout. You can show, hide, or set fields as required based on conditions such as cart contents, selected shipping or payment method, user role, order value, other checkout fields, or date. This helps reduce unnecessary fields, streamline the checkout flow, and improve the customer experience. 👉 Discover the add-on! Checkout Fields For Blocks – Field Pricing Add-on Enables price adjustments based on checkout fields in the WooCommerce block-based checkout. You can apply fixed or percentage-based surcharges and discounts directly from checkout fields, making it easy to offer paid services such as installation, express shipping, or gift wrapping. The add-on is built specifically for WooCommerce Blocks, ensuring lightweight architecture and predictable behavior. 👉 Discover the add-on!

Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks. Features Supports Bootstrap v5 and v4 Support for CSS grid (experimental) Fully customizable with filters Configuration via option page or programmatically with constants Block templates can be overwritten in your theme The full documentation of this plugin can be found on GitHub: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme Available Blocks Container Options: Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport. Fluid Breakpoint: Used to enable responsive containers. This feature only works with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints. Margin After: Define a margin which should be added after the container. Row Options: Template: Choose from a predefined template for the inner column blocks. No Gutters: Disable gutters between columns. Alignment: Horizontal alignment of inner column blocks. Vertical Alignment: Vertical alignment of inner column blocks. Editor stack columns: Displays stacked columns in the editor to enhance readability of block content. Horizontal Gutters: Size of horizontal gutters. Vertical Gutters: Size of vertical gutters. CSS Grid Gutters: Size of gutters when CSS grid is used. Column Options: Sizes for all breakpoints (xxl, xl, lg, md, sm, xs): How much space the column should use for the given breakpoint. Equal width for all breakpoints (xxl, xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns. Background Color: Set background color to column. Content vertical alignment: Align content vertically in column. This option is only needed if a background color is set. Otherwise use the Alignment option of the outer row block. Padding: Define padding inside the column. Button Options: Style: Choose the styling of the button. Open in new tab: Choose if link should be opened in a new tab. Rel: Set rel attribute of the link. Alignment: Horizontal alignment of the button. Supported Bootstrap versions This plugin supports Bootstrap v4 and v5. The version can be selected in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION constant in the wp-config.php file: Bootstrap 4: define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' ); Bootstrap 5 (default): define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' ); Possible values right now are '4' or '5'. By default Bootstrap version 5 is selected. CSS Grid The CSS grid (supported with Bootstrap >= 5.1.0) can be enabled in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID constant in the wp-config.php file: eg. define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true ); When the CSS grid is enabled the row and the column blocks will use custom templates for the rendering process: Row: row-css.grid.php Column: column-css-grid.php The support is still experimental since it’s also marked as experimental in the Bootstarp library. Please read the official Bootstrap documentation to get more information on how to use it. Bootstrap library Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it. You’ll find an example how to include it in your theme’s functions.php in the documentation. Templates All blocks are implemented as dynamic blocks. This makes it possible to overwrite the template of a block in your theme. To overwrite a block template create a folder called wp-bootstrap-blocks/ in your theme directory. You can copy the original template from wp-bootstrap-blocks/src/templates/ .php as a starting point and adjust it to your needs. Requirements WordPress >= 5.0 PHP >= 5.6 Further Information Documentation: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme WordPress Plugin: https://wordpress.org/plugins/wp-bootstrap-blocks GitHub Repository: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin Changelog: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/releases Issue tracker: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/issues