WooCommerce Customer Order Details at BS Modal

Question

On the WordPress website where WooCommerce is running, a user can log in to their (by default) personal area and display information, for example:

• Order history
• Download
• Address
• Change information
• Exit

On the orders tab, a table is displayed by default showing a list of all orders, with a View button that redirects to the full details page of this order.

What I'm trying to do is show this table view in a modal window.

I have no problem showing the modal file with the destination URL loaded into it. The real problem is that the destination URL is a full page that displays as in an <iframe> , and that is not what I want.

I think there is a short code that allows you to load only this table, or maybe some woocommerce function, for example load_order_content_by_id($id) ?

Can someone point me in the right direction?

thanks

=== solvable ===

Thanks to Raunak Gupta for pointing me to the correct function. I redefined the orders.php template, added the Modal window html and edited the $actions :

 'view' => array( 'url' => 'javascript:;', 'data' => [ 'order-number' => $order->get_order_number() ], 'name' => __( 'View', 'woocommerce' ) ), 

and in the same file:

 foreach ( $actions as $key => $action ) { echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '"'; if(isset($action['data']) && is_array($action['data'])){ foreach($action['data'] AS $data_attr=>$data_value){ echo 'data-' . sanitize_html_class($data_attr) .'="' .esc_html($data_value) . '" '; } } echo '>' . esc_html( $action['name'] ) . '</a>'; } 

Little js

 $('.woocommerce-MyAccount-orders .button.view').on('click', function(e){ e.preventDefault(); var data = {}; data.action = 'modal_order'; data.order_number = $(this).data('order-number'); $.get( ajax_script.ajax_url, data, function(response) { $('#modalOrderDetail').modal('show').find('.modal-body').html(response); }); }); 

and caught on wordpress function.php

 function modal_order() { if(is_user_logged_in()) { $order_number = $_GET['order_number']; woocommerce_order_details_table($order_number); } } add_action('wp_ajax_modal_order', 'modal_order'); add_action('wp_ajax_nopriv_modal_order', 'modal_order'); 

Answer 1

woocommerce_order_details_table ($ order_id)

This WooCommerce function returns full order data in HTML format $order_id

Answer 2

Here is the complete code for displaying current customer orders in a modal window . It is based on the classic request for receiving current user orders and on the template my-account/orders.php (slightly configured) ...

 <?php if(is_user_logged_in()): // The query $args = array( // WC orders post type 'post_type' => 'shop_order', 'numberposts' => -1, // for current user id 'meta_key' => '_customer_user', 'meta_value' => get_current_user_id(), // get orders statuses 'post_status' => array_keys(wc_get_order_statuses()), ); // Get all customer orders $customer_orders = get_posts( $args ); $count_ord = 0; if (!empty($customer_orders)) foreach ( $customer_orders as $custo_order ) $count_ord++; if ( $count_ord > 0 ) $has_orders = true; else $has_orders = false; // the template my-account/orders.php ?> <?php do_action( 'woocommerce_before_account_orders', $has_orders ); ?> <?php if ( $has_orders ) : ?> <table class="woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table"> <thead> <tr> <?php foreach ( wc_get_account_orders_columns() as $column_id => $column_name ) : ?> <th class="<?php echo esc_attr( $column_id ); ?>"><span class="nobr"><?php echo esc_html( $column_name ); ?></span></th> <?php endforeach; ?> </tr> </thead> <tbody> <?php foreach ( $customer_orders as $customer_order ) : $order = wc_get_order( $customer_order ); $item_count = $order->get_item_count(); ?> <tr class="order"> <?php foreach ( wc_get_account_orders_columns() as $column_id => $column_name ) : ?> <td class="<?php echo esc_attr( $column_id ); ?>" data-title="<?php echo esc_attr( $column_name ); ?>"> <?php if ( has_action( 'woocommerce_my_account_my_orders_column_' . $column_id ) ) : ?> <?php do_action( 'woocommerce_my_account_my_orders_column_' . $column_id, $order ); ?> <?php elseif ( 'order-number' === $column_id ) : ?> <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>"> <?php echo _x( '#', 'hash before order number', 'woocommerce' ) . $order->get_order_number(); ?> </a> <?php elseif ( 'order-date' === $column_id ) : ?> <time datetime="<?php echo date( 'Ym-d', strtotime( $order->order_date ) ); ?>" title="<?php echo esc_attr( strtotime( $order->order_date ) ); ?>"><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></time> <?php elseif ( 'order-status' === $column_id ) : ?> <?php echo wc_get_order_status_name( $order->get_status() ); ?> <?php elseif ( 'order-total' === $column_id ) : ?> <?php echo sprintf( _n( '%s for %s item', '%s for %s items', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ); ?> <?php elseif ( 'order-actions' === $column_id ) : ?> <?php $actions = array( 'pay' => array( 'url' => $order->get_checkout_payment_url(), 'name' => __( 'Pay', 'woocommerce' ) ), 'view' => array( 'url' => $order->get_view_order_url(), 'name' => __( 'View', 'woocommerce' ) ), 'cancel' => array( 'url' => $order->get_cancel_order_url( wc_get_page_permalink( 'myaccount' ) ), 'name' => __( 'Cancel', 'woocommerce' ) ) ); if ( ! $order->needs_payment() ) { unset( $actions['pay'] ); } if ( ! in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_cancel', array( 'pending', 'failed' ), $order ) ) ) { unset( $actions['cancel'] ); } if ( $actions = apply_filters( 'woocommerce_my_account_my_orders_actions', $actions, $order ) ) { foreach ( $actions as $key => $action ) { echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>'; } } ?> <?php endif; ?> </td> <?php endforeach; ?> </tr> <?php endforeach; ?> </tbody> </table> <?php do_action( 'woocommerce_before_account_orders_pagination' ); ?> <?php if ( 1 < $customer_orders->max_num_pages ) : ?> <div class="woocommerce-Pagination"> <?php if ( 1 !== $current_page ) : ?> <a class="woocommerce-Button woocommerce-Button--previous button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page - 1 ) ); ?>"><?php _e( 'Previous', 'woocommerce' ); ?></a> <?php endif; ?> <?php if ( $current_page !== intval( $customer_orders->max_num_pages ) ) : ?> <a class="woocommerce-Button woocommerce-Button--next button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page + 1 ) ); ?>"><?php _e( 'Next', 'woocommerce' ); ?></a> <?php endif; ?> </div> <?php endif; ?> <?php else : ?> <div class="woocommerce-Message woocommerce-Message--info woocommerce-info"> <a class="woocommerce-Button button" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>"> <?php _e( 'Go Shop', 'woocommerce' ) ?> </a> <?php endif; ?> <?php _e( 'No order has been made yet.', 'woocommerce' ); ?> </div> <?php do_action( 'woocommerce_after_account_orders', $has_orders ); ?> <?php endif; ?> 

You will need to add existing css rules to your modal window and / or configure these css rules.

This code is tested and fully functional.

Answer 3

There is no function that I know of that can get all the order details that you need at a time, however you can call the WC_Order class to get what you need. Bringing some calling methods similar to them will give you the information you need. You will probably need to make calls not only with the get_items() method, depending on the exact information you need. Typically, they return objects that are similar in structure to publish objects.

 $order = new WC_Order($post->ID); $_order = $order->get_items(); 

Look here under the “inherited methods” section to find the methods you may need to get all the information you need. https://docs.woocommerce.com/wc-apidocs/class-WC_Order.html