WooCommerce 3.3.0+

Yesterday upgrade a store to WooCommerce 3.3.1 from whatever the hell it was on before.

Today I’ve spent the day putting things right 😠 All the issues are around the new Orders UI and it seems like petty small stuff but it’s safe to say I’m hating the new UI because I’ve wasted the day dealing with over 50 complaints.
For those unfamiliar here’s the proposed changes (the end result is a little different) https://woocommerce.wordpress.com/2017/11/16/wc-3-3-order-screen-changes-including-a-new-preview-function-ready-for-feedback/#comment-4137

I’ve so far fixed some of the issues, such as rearranging the columns (why the actual fu*k status was moved I’ll never know or understand). The below code is probably not the best way to do it, but it works

// Function to Change the order of the Columns
function woocommerce_myinitials_restore_columns( $columns ) {
    $new_order = array(
       'cb' => '',
       'order_status' => '',
       'csv_export_status' => '', // dont think this ones standard but it's part of a plugin we use.
       'order_number' => '',
       'order_items' => '',
       'billing_address' => '',
       'shipping_address' => '',
       'order_date' => '',
       'order_total' => '',
       'wc_actions' => '',
    );
    foreach($columns as $key => $value) {
       $new_order[$key] = $value;
    }

    return $new_order;
}
add_filter( 'manage_edit-shop_order_columns', 'woocommerce_myinitials_restore_columns',99 );

So that’s one issue solved. The next was being able to click anywhere in the row opens the order (yeah I’m sure that’s nice, but if you rely on tapping a touchscreen i.e. click and drag to scroll then this causes problems). The following code adds the no-link class to the tr and stops this shitty behaviour

function woocommerce_myinitials_restore_columns_add_nolink_class( $classes ) {
    if ( is_admin() ) {
        $current_screen = get_current_screen();
        if ( $current_screen->base == 'edit' && $current_screen->post_type == 'shop_order' ) {
            $classes[] = 'no-link';
        }
    }
    return $classes;
}
add_filter( 'post_class', 'woocommerce_myinitials_restore_columns_add_nolink_class' );

Thanks on this one goes to ‘rodrigoprimo’ for the initial fix and others who picked it up and added a bit to it https://github.com/woocommerce/woocommerce/pull/18708.

I’ve added the following as a stylesheet

.post-type-shop_order .wp-list-table td, .post-type-shop_order .wp-list-table th {
   vertical-align: unset;
}

.post-type-shop_order .wp-list-table td.order_status {
   vertical-align: middle;
   text-align: center;
}

This places the orders back at the top of the row, and stops the previous restoration of items sold link jumping around. but I’d rather the new status text stays in the middle inline with the checkbox, hopefully we’ll get this back to an icon soon.

All of the above I’ve added to our custom plugin, you could either do this or add them to your functions.php

Outstanding issues:
1. Getting back the Email address. There is some hope this may come back officially, but I’ll be fixing it for us tomorrow.
2. The Status being text not icons. I understand this makes more sense to new users but if you have some long statuses like we do, the text doesn’t fit and we’ve got 10 statuses all looking the same. Having coloured icons worked for us and if you weren’t sure hover the mouse. I’ll be looking to get them back to icons tomorrow.
3) Date column, just why! Why would anyone think not putting the actual date and time of the order here is a good idea. Stupid ‘X mins ago’ is no use at all.

The new preview window looks good but I really dont see it getting much use, we need the important data on the front. If it’s not that important just open the order. WooCommerce dev’s decided to screw with it but I dont think there’s an understanding that if your going as far as opening the preview window then I’m pretty sure you were used to just editing the order which is probably still going to be the case.

So summing up today, I’ve had a shit day of people moaning at me because some developers decided to improve something that really didn’t need touching. Doesn’t sound like every developer I’ve ever known 😂. I’m now getting something to eat before I go near everything I’d planned on working on today.

2 thoughts on “WooCommerce 3.3.0+”

  1. Hi,

    Thanks for sharing these snippets and solutions! I'am in the very same boat, trying to revert the changes as much as possible.

    Could you please post solutions to other leftover issues you have solved since then?

    Thanks in advance!

    1. Hi Szabesz,

      Sorry for replying almost 8 months late, I really need to fix my email notifications from the blog 🙂

      I fixed the email address issue with the following:
      <code>
      function bit_wc_columns_add_email( $column_name, $post_id ) {
      // Based on solution from https://gist.github.com/LWS-Web/869e41c543ae91ead550828929578c7e
      // Adjusted to incorporate into this plugin, and changed from display:block as the text wasn't selectable in block.
      // Get an instance of the WC_Order object
      $order = wc_get_order( $post_id );
      // Get the Order data
      $order_data = $order->get_data();
      // Get the billing mailadress from the order data
      $order_billing_email = $order_data['billing']['email'];
      // Add content to default column "order_number"
      if ($column_name == 'order_number') {
      echo '<small class="meta email"><a href="' . esc_url( 'mailto:' . $order_billing_email ) . '">' . esc_html( $order_billing_email ) . '</a></small>';
      }
      }
      add_action( 'manage_shop_order_posts_custom_column', 'bit_wc_columns_add_email', 11, 2 );
      </code>
      That's in a plugin I made (for internal use, not public/published) fixing all kinds of random bits for us.

      Of other 2 issues:
      I spent some time looking at restoring the icons, while I certainly believe it's possible it felt like something that would most likely break with every update of WooCommerce so I stopped working on that one and we just live with the change.
      The Date column, I spent days trying to figure out. According to the dev it should be an easy one to change formatting on the date. But what I found is that it's not, there's certainly formatting when it looks like '2018/10/28 08:32' and that can be changed, but when it looks like '12 hours ago' it uses something completely different. I still haven't fixed it, it's one of the most annoying things but we've just got in the habit of refresh the orders page no matter when you think you last did it to make sure it's upto date info.
      If I do ever fix either I'll update the post.

      ps. Sorry for the language in the post (I read it back today), I was certainly very annoyed at the UI changes at the time. I still am really, it's been almost 8 months I've used the quick view function a total of 2 times and both times ended up having to open the order because quick view didn't show the basic info I needed. I've just asked and no-one else uses the quick view either, for us the most important bit was having the email address visible.

      I do recommend that anyone fixing these issues also feed back to the WooCommerce devs, in my opinion these changes all look lovely on paper but can have a big impact on actual stores. I'm sure there's people out there who love the changes and that's fine. but I see no reason why it shouldn't have been developed a little more into say a few screen options (email address on/off, quickview on/of, order line clickable on/off, status icons/text etc etc), at least giving store owners an easier way to get back to the layout that works for them. The whole attitude of 'we know best' needs slapping out of them.

      If you've managed to fix either the icons and/or date field let me know how 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *