Add datepicker to order preview for payment date

Hello @petermorlion,

Thank you for reaching out!

Is it possible to add a form element to the order preview popup in the admin section? I would like to add a datepicker so admins can set the payment date when they set the order to completed.

This will depend on the payment gateway you’re using. By default, WooCommerce will create and store the payment date as order meta _date_paid (Unix timestamp) and _paid_date (human-readable) when your payment gateways deem the order is paid, so that’s one less step you don’t need to take care of. :?)

Is this even possible? I think the only way would be to filter out the completed button in the “woocommerce_admin_order_preview_actions” filter and add my own elements in the “woocommerce_admin_order_preview_end” action. Is my thinking correct?

That’s certainly one way to do it. You can more options discussed in this guide: https://www.cloudways.com/blog/add-woocommerce-orders-list-column/

Important note: if you enabled HPOS hooks like manage_shop_order_posts_columns won’t work. This is because, with HPOS, orders are no longer a post type. To address this, replace them shop_order_posts with woocommerce_page_wc-orders. For a more detailed explanation, please check: https://developer.woo.com/2022/10/11/hpos-upgrade-faqs/

If you require the assistance of a developer, consider checking one of the vetted WooExpert agencies here as custom requests are not something we can provide support for per our support policy.

Let us know if you have any other questions. :?)

Hi Saif,

Thanks for answering. I may not have made myself clear enough. I was referring to the preview you get when you go to the list of orders in the admin section and click the “eye” icon in the list. Instead of clicking through to the details of the order, you get a dialog with some details.

I may not have made myself clear enough. I was referring to the preview you get when you go to the list of orders in the admin section and click the “eye” icon in the list.

I was just trying to present different options. :?)

If you prefer to have it within the order preview box, then you’d want to go with the woocommerce_admin_order_preview_actions hook, as you’ve already noted.

Here’s a StackOverflow question that you may find helpful: https://stackoverflow.com/questions/52634023/additional-action-buttons-to-admin-order-list-on-preview-lightbox-in-woocommerce

Let us know if there’s anything else we can assist with.

In the end, I added it with the code below. Basically, it adds a datepicker to the preview template with the woocommerce_admin_order_preview_end hook. To set the value, I must also add the value to the array of data that will be used in the template. For that, I hook into the woocommerce_admin_order_preview_get_order_details filter. Because the datepicker needs to be initialized when the modal popup appears, I use the load-edit.php to add some custom JavaScript to react to the modal showing. Finally, I added AJAX functionality with wp_ajax_woocommerce_farm_manager_update_date_paid so that I can send an AJAX request to the server when the value in the datepicker changes.

add_filter('woocommerce_admin_order_preview_end', array(__CLASS__, 'add_date_paid_datepicker_to_preview_template'), 10);

add_filter('woocommerce_admin_order_preview_get_order_details', array(__CLASS__, 'order_preview_get_order_details'), 10, 2);

add_action('load-edit.php', array(__CLASS__, 'on_load_edit'), 10);

add_action('wp_ajax_woocommerce_farm_manager_update_date_paid', array(__CLASS__, 'update_date_paid_ajax'));

...

/**
 * Add a formatted date to the array that will be used in the order preview template.
 */
public static function order_preview_get_order_details($result, $order)
{
    $date_paid = get_post_meta($order->get_id(), '_date_paid', true); //timestamp
    $formatted_date_paid = $date_paid ? date('Y-m-d', intval($date_paid + (get_option('gmt_offset') * 3600))) : '';
    $result['formatted_date_paid'] = $formatted_date_paid;
    return $result;
}

/**
    * Add date paid datepicker to order preview template.
    */
public static function add_date_paid_datepicker_to_preview_template()
{
    echo '
        <div class="order-preview-date-paid-wrapper">
            <table class="order-preview-date-paid-table">
                <tr>
                    <td>';
    woocommerce_wp_text_input(
        array(
            'id' => '_date_paid',
            'label' => __('Date paid:', 'myplugin),
            'placeholder' => 'YYYY-MM-DD',
            'wrapper_class' => 'form-field-wide',
            'class' => 'date-picker',
            'style'    => 'width: 100%',
            'value' => '{{ data.formatted_date_paid }}',
            'custom_attributes' => array(
                'data-order-id' => '{{ data.data.id }}'
            )
        )
    );
    echo '          </td>
                    <td>
                        <img src="' .  MYPLUGIN_BASE_URL . 'assets/wpspin-2x.gif" class="date-paid-spinner" style="width: 16px; margin-top: 26px; display: none;"/>
                    </td>
                </tr>
            </table>
        </div>
    ';
}

/**
    * Add script to retrigger datepicker initialization when modal is shown.
    * This is necessary because our datepicker is inside a template.
    */
public static function on_load_edit()
{
    add_filter('views_edit-shop_order', function () {
        $post_type = get_current_screen()->post_type;
        if ($post_type !== 'shop_order') {
            return;
        }

        $nonce = wp_create_nonce('myplugin-order-preview-date-paid-nonce');
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(document.body).on('wc_backbone_modal_loaded', function() {
                    $(document.body)
                        .trigger('wc-init-datepickers');

                    $('.order-preview-date-paid-table #_date_paid').on('change', function() {
                        var datePaid = $(this).val();
                        var orderId = $(this).data('orderId');
                        $('.date-paid-spinner').show();
                        $.post('<?php echo admin_url('admin-ajax.php') ?>', {
                            action: 'woocommerce_farm_manager_update_date_paid',
                            date_paid: datePaid,
                            _ajax_nonce: '<?php echo $nonce; ?>',
                            order_id: orderId
                        }, function(response) {
                            $('.date-paid-spinner').hide();
                            if (!response.success) {
                                alert('<?php _e('There was a technical error. You can try again, but we will also investigate and fix this issue.', 'myplugin') ?>');
                            }
                        });
                    });
                });
            });
        </script>
<?php
    });
}

/**
 * AJAX endpoint to update date paid from the order preview modal.
 */
public static function update_date_paid_ajax()
{
    try {
        check_ajax_referer('myplugin-order-preview-date-paid-nonce');

        $order_id = intval($_POST['order_id']);
        $date_paid = sanitize_text_field($_POST['date_paid']);

        $order = wc_get_order($order_id);
        if (!$order) {
            wp_send_json_error();
        }

        $order->set_date_paid($date_paid);
        $order->save();

        wp_send_json_success();
    } catch (Exception $e) {
        error_log($e->getMessage());
        wc_get_logger()->error("UpdateDatePaid :: An exception was raised: " . $e->getMessage(), array('source' => 'wfm'));
        wp_send_json_error(
            array(
                "error" => $e
            )
        );
    }
}

• This reply was modified 1 year, 3 months ago by petermorlion.