Support is closed now. We shall check all on 20th May 2024.

Premium add-on for Bricks Builder

How do you create the custom fields in the checkout form with the BricksUltimate’s checkout builder?

BricksUltimate released the Checkout Builder feature for the WooCommerce checkout page. With this feature, you can directly make custom fields. In this tutorial, We show how to create the delivery date picker field.

Step 1: Create a shipping field. So we select the Shipping Fields element in the canvas.
Step 2: Select the “Custom Field” option from the Field dropdown
Step 3: Field Type would be “Text”
Step 4: Enter the field name like “shipping_delivery”
Step 5: Enter the field label under the Label section
Step 6: You can also adjust other options
Step 7: Last we save the checkout template

Enqueue JS Code

Open the functions.php file of the bricks child theme and add the following code

 * Register/enqueue custom scripts and styles
add_action( 'wp_enqueue_scripts', function() {
	if( is_checkout() ) {
		wp_enqueue_script( 'jquery-ui-datepicker' );
		wp_enqueue_style( 'jquery-ui-style', WC()->plugin_url() . '/assets/css/jquery-ui/jquery-ui.min.css', array(), '1.0' );
} );

Sync Datepicker with Custom Field

Now we shall sync the datepicker with our custom field. You can use the snippet plugin or bricks code element. Here is the JS code:

  jQuery(document).ready(function($) {
  // Initialize datepicker
  	minDate: 3, // Disable past dates and set the first selectable date to today + 3 days
  	beforeShowDay: function(date) {
  		var day = date.getDay();
  		// Disable weekends (Saturday = 6, Sunday = 0)
  		return [(day != 0 && day != 6)];
  	dateFormat: '' // Date format


Leave the first comment

Search Tutorials

Request TutorialsFeatures Request