Change color of order on hold in order page

  • Resolved gerske

    (@gerske)


    4 years, 1 month ago

    Hello,

    As shop manager you see different color on the orders page, with all orders. For example processing is green and on hold is grey. That’s very handy.

    However, when you go to a certain order which is not paid yet, you can only visually see that it is not paid yet by looking at the status dropdown box which says “on hold” for example. This could easily be missed by our shop managers, and than is could happen that orders would be processed that have not been paid.

    Would it be possible to have the status dropdown have a red background when “on hold” is selected, to give the shop manager more attention that the order is unpaid? Or is there another trick to give a clear visual mark for unpaid orders on the order page?

    Kind regards, Gerske

    • This topic was modified 4 years, 1 month ago by gerske.
    • This topic was modified 4 years, 1 month ago by gerske.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support RK a11n

    (@riaanknoetze)

    Hi there,

    At the moment, there are no default options for that in the core WooCommerce plugin and it would likely need to be added through custom coding. The easiest would be to use a 3rd party plugin like https://www.ads-software.com/plugins/add-admin-css/ and then add the following:

    
.order-status.status-on-hold {
    background: #f8a7a7 !important;
    color: #940c0c !important;
}
    Thread Starter gerske

    (@gerske)

    Hi RK, thank for the code. I’ve added it to the admin css, but unfortunately it doesn’t work. No status color change (on the order view page) if the order is on hold. Could you please check? Thanks!

    • This reply was modified 4 years, 1 month ago by gerske.
    Thread Starter gerske

    (@gerske)

    I have added a screenshot of what I would like.

    order status background color

    How to make the background of the dropdown list of order status red ONLY when the order is NOT paid yet. This gives a very clear signal to our shop managers.

    It would be great if someone has the solution for this.

    Thanks in advance!

    Gerske

    Plugin Support Damianne P (a11n)

    (@drwpcom)

    Hi @gerske, for the order edit screen, please try:

    
span#select2-order_status-container[title="On hold"]
{
    background: #f8a7a7;
}
    Thread Starter gerske

    (@gerske)

    Great, it works! I had already solved in a different way, by adding this snippet:

    add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘notpaid’, 10, 1);
    function notpaid( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( !$order->is_paid() ) {
    ?><div class=”statusnotpaid”>Not paid yet
    </div><?php
    }
    }

    And styling class statusnotpaid in red. This gives an alert text “Not paid yet” directly under the invoice address, alerting the shopping manager to not process this order as of yet.

    I think that your css solution should be built in WooCommerce by default. In the orders overview all statuses have a certain color. These status colors should also be used and visible in the order screen for each order. It is of much help for the shopping managers.

    Kind regards, Gerske

    Plugin Support Damianne P (a11n)

    (@drwpcom)

    Hi @gerske,

    I think that your css solution should be built in WooCommerce by default. In the orders overview all statuses have a certain color. These status colors should also be used and visible in the order screen for each order. It is of much help for the shopping managers.

    Please add it as a suggestion to our Ideas Board. Our developers use that board to gauge community traction on what features to include in future versions.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change color of order on hold in order page’ is closed to new replies.