WooCommerce Storefront theme: How to show order details on order-received endpoint?

Question

After the last WooCommerce update, the order details no longer displayed on the Thank You page. Since then, I have developed a child theme using the WooCommerce Storefront theme. No matter what I have tried, All I see is the 'thank you' message on the thank you page.

What I have tried so far:

• Troubleshooting the entire process to find anything that might be wrong. This included the following:
• Checked for wc template function that calls the order-details template and it related action hook (both exist)
• Making sure my child-theme's WooCommerce directory was correctly structured. Everything else works correctly, including my custom template fragments and their hooks.
• Paying careful attention to syntax errors, including those that might silently fail.
• Copied the WooCommerce directory from the plugin into the child theme. This yielded the same exact result--no order details on thank you page.
• Eliminated WordPress Thank You page and used the default WooCommerce endpoint ('order-received'). NOTE: Due to the way this affected layout and display, I reverted back to my original WooCommerce directory structure, which is identical to the WooCommerce template directory, minus some of the sub-directories. (UPDATE: I actually am still using the copied WooCommerce directory)
• Wrote a custom function with action hook in child theme's functions.php file, with no change in output.
• In thankyou.php, created an action hook and wrote a function that used wc_get_template to call order-details, but it didn't work (silent fail)

• Updated WordPress from 4.5 to 4.6.1, Updated the Storefront theme, and updated any outdated WooCommerce template files in my child theme.

  Code:
  **storefront-child/woocommerce/wc-template-functions.php**
  
  if ( ! function_exists( 'woocommerce_order_details_table' ) ) {
  
      /**
       * Displays order details in a table.
       *
       * @param mixed $order_id
       * @subpackage  Orders
       */
      function woocommerce_order_details_table( $order_id ) {
          if ( ! $order_id ) return;
  
          wc_get_template( 'order/order-details.php', array(
              'order_id' => $order_id
          ) );
      }
  }
  
  
  
  **storefront-child/woocommerce/wc-template-hooks.php
  
  /**
   * Order details.
   *
   * @see woocommerce_order_details_table()
   * @see woocommerce_order_again_button()
   */
   add_action( 'woocommerce_view_order', 'woocommerce_order_details_table', 10 );
   add_action( 'woocommerce_thankyou', 'woocommerce_order_details_table', 10 );
   add_action( 'woocommerce_order_details_after_order_table', 'woocommerce_order_again_button' );
  
  
  
  **storefront-child/woocommerce/checkout/thankyou.php**
  
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }
  
  if ( $order ) : ?>
  
      <?php if ( $order->has_status( 'failed' ) ) : ?>
  
      <p class="woocommerce-thankyou-order-failed"><?php _e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p>
  
      <p class="woocommerce-thankyou-order-failed-actions">
          <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?></a>
          <?php if ( is_user_logged_in() ) : ?>
              <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'My Account', 'woocommerce' ); ?></a>
          <?php endif; ?>
      </p>
  
  <?php else : ?>
  
      <p class="woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'woocommerce' ), $order ); ?></p>
  
      <ul class="woocommerce-thankyou-order-details order_details">
          <li class="order">
              <?php _e( 'Order Number:', 'woocommerce' ); ?>
              <strong><?php echo $order->get_order_number(); ?></strong>
          </li>
          <li class="date">
              <?php _e( 'Date:', 'woocommerce' ); ?>
              <strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong>
          </li>
          <li class="total">
              <?php _e( 'Total:', 'woocommerce' ); ?>
              <strong><?php echo $order->get_formatted_order_total(); ?></strong>
          </li>
          <?php if ( $order->payment_method_title ) : ?>
          <li class="method">
              <?php _e( 'Payment Method:', 'woocommerce' ); ?>
              <strong><?php echo $order->payment_method_title; ?></strong>
          </li>
          <?php endif; ?>
      </ul>
      <div class="clear"></div>
  
  <?php endif; ?>
  
  <?php do_action( 'woocommerce_thankyou_' . $order->payment_method, $order->id ); ?>
  <?php do_action( 'woocommerce_thankyou', $order->id ); ?>
  

  <p class="woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'woocommerce' ), null ); ?></p>
  
  <?php endif; 
  
  ?>
  
  
  **storefront-child/woocommerce/order/order-details.php**
  
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }
  
  $order = wc_get_order( $order_id );
  
  $show_purchase_note    = $order->has_status( apply_filters( 'woocommerce_purchase_note_order_statuses', array( 'completed', 'processing' ) ) );
  $show_customer_details = is_user_logged_in() && $order->get_user_id() === get_current_user_id();
  ?>
  <h2><?php _e( 'Order Details', 'woocommerce' ); ?></h2>
  <table class="shop_table order_details">
      <thead>
          <tr>
              <th class="product-name"><?php _e( 'Product', 'woocommerce' ); ?></th>
              <th class="product-total"><?php _e( 'Total', 'woocommerce' ); ?></th>
          </tr>
      </thead>
      <tbody>
      <?php
          foreach( $order->get_items() as $item_id => $item ) {
              $product = apply_filters( 'woocommerce_order_item_product', $order->get_product_from_item( $item ), $item );
  
              wc_get_template( 'order/order-details-item.php', array(
                  'order'              => $order,
                  'item_id'            => $item_id,
                  'item'               => $item,
                  'show_purchase_note' => $show_purchase_note,
                  'purchase_note'      => $product ? get_post_meta( $product->id, '_purchase_note', true ) : '',
                  'product'            => $product,
              ) );
          }
      ?>
      <?php do_action( 'woocommerce_order_items_table', $order ); ?>
  </tbody>
  <tfoot>
      <?php
          foreach ( $order->get_order_item_totals() as $key => $total ) {
              ?>
              <tr>
                  <th scope="row"><?php echo $total['label']; ?></th>
                  <td><?php echo $total['value']; ?></td>
              </tr>
              <?php
          }
      ?>
  </tfoot>
  

  <?php if ( $show_customer_details ) : ?>
      <?php wc_get_template( 'order/order-details-customer.php',    array( 'order' =>  $order ) ); ?>
  <?php endif; ?>
  
  
  
  **Rendered HTML**
  <div class="entry-content">
      <div class="mailmunch-forms-before-post" style="display: none !important;"></div>
  <div class="woocommerce">
      <p class="woocommerce-thankyou-order-received">Thank you. Your order has been received.</p>    
  </div>
  
  <!-- This is where the order details should be -->
  
  <p>&nbsp;</p>
  
  <div class="mailmunch-forms-in-post-middle" style="display: none !important;"></div>
  <div class="mailmunch-forms-after-post" style="display: none !important;"></div>
  
  </div>
  

Am I missing something here, or is there something going on with WooCommerce? Any help would be greatly appreciated:)

UPDATE: Found that I have two versions of jQuery running: v1.11.3, and v1.12.4. There are also two different versions of jQueryUI loading: v1.10.4, and v1.11.4. Currently disabling WordPress plugins and noting what jquery versions are loading in the browser.

UPDATE: Found one plugin using jQueryUI v1.10.4. Still looking for the others.

UPDATE: Finished toubleshooting all the plugins, except WooCommerce (WSOD). MailChimp MailMunch plugin was making the google api call to the older jquery version (v1.11.3), while the Spider Player was calling the older version of jQueryUI. De-activated both plugins, and STILL the same result. It's as if WooCommerce is simply ignoring the order details in the middle of the thankyou.php template.

Any thoughts or ideas? I am really at a loss now. I can fix the jquery issues in the disabled plugins, but that won't fix my pressing issue with the Thank You page.

Any help would be greatly appreciated:)

UPDATE: After a lot more work, I have determined that WooCommerce IS using the child theme thankyou.php. Further troubleshooting also revealed that $order is false. This is why I am not seeing order details on the thank you page. Next: Figure why $order is false (It is an instance of WC_Order).

UPDATE: I did a stacktrace:

#0 /home/onyour6test/www/wp-content/plugins/woocommerce/includes/wc-core-functions.php(203): include() 

#1 /home/onyour6test/www/wp-content/plugins/woocommerce/includes/shortcodes/class-wc-shortcode-checkout.php(212): wc_get_template('checkout/thanky...', Array) 

#2 /home/onyour6test/www/wp-content/plugins/woocommerce/includes/shortcodes/class-wc-shortcode-checkout.php(59): WC_Shortcode_Checkout::order_received(NULL) 

#3 /home/onyour6test/www/wp-content/plugins/woocommerce/includes/class-wc-shortcodes.php(71): WC_Shortcode_Checkout::output('') 

#4 /home/onyour6test/www/wp-content/plugins/woocommerce/includes/class-wc-shortcodes.php(138): WC_Shortcodes::shortcode_wrapper(Array, '') 

#5 /home/onyour6test/www/wp-includes/shortcodes.php(326): WC_Shortcodes::checkout('', '', 'woocommerce_che...') 

#6 [internal function]: do_shortcode_tag(Arr in /home/onyour6test/www/wp-content/themes/storefront-child/woocommerce/checkout/thankyou.php on line 77

I think the culprit may be in stacktrace #2: ...WC_Shortcode_Checkout::order_received(NULL).

Stacktrace #6 seems to confirm this, with do_shortcode_tag. Line 77 refers to where the call to $order fails, specifically here:

<strong><? php _e( 'Order Number:', 'woocommerce' ); ?></strong>

I managed to get this particular line of code to display, but it showed only "Order" in "Order Number", followed by a 500 internal server error. None of the rest of the remaining HTML or order-detail variables rendered on the page.

UPDATE: This appears to be something with the WooCommerce code itself. $order_id is empty, causing $order to return NULL. This prevents the order details from being displayed. This should display by default, with an option to turn it off in WooCommerce settings.

Answer 1

The problem is $show_customer_details in order/order-details.php is set to false if the customer is not logged in.

I modified the customer check in my theme copy of order-details.php to also check if the order key (post password) matches the key that's provided as a URL parameter. This is the same check that WooCommerce performs when working out if it's okay to show the order info on the thank you page:

$order_key             = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );
$show_customer_details = $order_key == $order->get_order_key() || (is_user_logged_in() && $order->get_user_id() === get_current_user_id());

It's not pretty but it works.