Yuri Yuri - 1 year ago 160
PHP Question

WooCommerce customer order detail in BS Modal

In a WordPress website running WooCommerce, the user can login in his (default) personal area and display information like:

  • Orders history

  • Download

  • Addresses

  • Edit info

  • Logout

In the
tab, a table is presented by default, showing a list of all orders, with a
button which redirects to the full detail page of that order.

What I'm trying to do is showing that page content (so, without any menu, header or footer) in a modal window.

I don't have any problem in showing the modal with the target url loaded in it.
The real problem is that the targeted url is that of the full page, which is not what I want.

I think there is some shortcode allowing to load that table, or maybe some woocommerce function like

Can anybody point me in the right direction?



Thanks to Raunak Gupta for pointing me to the right function.
I override the orders.php template, added Modal window html and edited

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

and on 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>';

A little JS

$('.woocommerce-MyAccount-orders .button.view').on('click', function(e){
var data = {};
data.action = 'modal_order';
data.order_number = $(this).data('order-number');

$.get( ajax_script.ajax_url, data, function(response) {

and hooked into wordpress by

function modal_order() {
if(is_user_logged_in()) {
$order_number = $_GET['order_number'];

add_action('wp_ajax_modal_order', 'modal_order');
add_action('wp_ajax_nopriv_modal_order', 'modal_order');

Answer Source

woocommerce_order_details_table( $order_id )

This WooCommerce function returns the full order details in HTML form by $order_id

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download