How to Add a Button to Clear the Date/Time Fields Selection

If you want to add a button that would clear the selection of delivery fields at the checkout, you can do so with this guide.

Clicking the button would reset the selected date and timeslot and the associated delivery fee, like so:

You can use this code snippet to add the button. Add this code to the functions.php of your active child theme or to the Code Snippet plugin.

<?php
/**
 * Add the clear selection button.
 */
function iconic_add_add_clear_selection_btn() {
	?>
	<a href="#" class="iconic-wds-clear-selection-btn"><?php esc_html_e( 'Clear selection', 'jckwds' ); ?></a>
  <?php
}
add_action( 'iconic_wds_after_delivery_details_fields', 'iconic_add_add_clear_selection_btn' );

/**
 * Add JS code to the checkout page footer.
 */
function iconic_wds_add_custom_js() {
	if ( ! is_checkout() ) {
		return;
	}
	?>
	<script>
		jQuery( document ).on( 'click', '.iconic-wds-clear-selection-btn', function(e) {
			e.preventDefault();
			jQuery('#jckwds-delivery-date').datepicker('setDate', null);
			jQuery("#jckwds-delivery-time").val('0')

			jQuery(document.body).trigger( 'update_checkout' );
		} );
	</script>
	<?php
}
add_action( 'wp_footer', 'iconic_wds_add_custom_js' );

WooCommerce Delivery Slots

Choose a delivery date and time for each order. Add a limit to the number of allowed reservations, restrict time slots to specific delivery methods, and so much more.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.