In my functions.php file I have a function that renames order status, it works fine, so order status is renamed correctly. Now I'm trying to add css classes to each order status but I can't. Can anyone show me the right way to do this ? I appreciate any response, thanks.

This is the function that renames order status:

add_filter( 'wc_order_statuses', 'ts_rename_order_status_msg', 20, 1 );
function ts_rename_order_status_msg( $order_statuses ) {
 $order_statuses['wc-completed']       = _x( 'Acquistato', 'Order status', 'woocommerce' ); 
 $order_statuses['wc-processing']      = _x( 'Processing', 'Order status', 'woocommerce' );
 $order_statuses['wc-on-hold']         = _x( 'In Attesa', 'Order status', 'woocommerce' );
 $order_statuses['wc-pending']         = _x( 'Sospeso', 'Order status', 'woocommerce' );    
 
 return $order_statuses;
}

This is what I tried to do:

$order_statuses['wc-completed'] = _x( '<div >Acquistato</div>', 'Order status', 'woocommerce' ); 

This is what I see: frontend I see the whole div tag instead of the aesthetic effects.

CodePudding user response：

Try to

$order_statuses['wc-completed']       = "<div >"._x( 'Acquistato', 'Order status', 'woocommerce' )."</div>";

or

'<span >' . __( 'Pending', 'woocommerce' ) . '</span>';

CodePudding user response：

Thanks to everyone who commented I was able to find a solution. I leave everything below with the hope that this will help anyone with the same problem.

Rename Woocommerce order status

In Woocommerce to rename the order statuses you need to use the following function in the functions.php file of your active child theme. This allows us to change the default name of the order status from completed to whatever you want. The same also applies to all other order states, processing, on-hold etc.

add_filter( 'wc_order_statuses', 'ts_rename_order_status_msg', 20, 1 );
function ts_rename_order_status_msg( $order_statuses ) {
 $order_statuses['wc-completed']       = _x( 'Purchuased', 'Order status', 'woocommerce' ); 
 $order_statuses['wc-processing']      = _x( 'Processing', 'Order status', 'woocommerce' );
 $order_statuses['wc-on-hold']         = _x( 'Waiting', 'Order status', 'woocommerce' );
 $order_statuses['wc-pending']         = _x( 'Deleted', 'Order status', 'woocommerce' );    
 
 return $order_statuses;
}

Add custom css class to order status

Why would you want to add a class for each order status? Simple, this allows you to give a unique style to each order state, for example, if you want the "purchuased" state to be green and "waiting" orange, you can. Here's how: Just add an html tag that has a class, whether it is div or span, it doesn't matter, the tag must be added between the quotes of the order status name we changed.

 $order_statuses['wc-completed']       = _x( '<div >Purchuased</div>', 'Order status', 'woocommerce' ); 

Write css to define the order status style

After adding the html tag with its class you have done most of the work. Now you need to write the css somewhere to define the style, you can do it in the style.css of your active child theme.

.label {
   display: flex;
   align-items: center;
   align-content: center;
   font-size: 13px;
   width: 100%;
   border-radius: 6px;
}

.success {
color: #00AD37;
   background: #D1EFDD;
   padding: 0px 8px;
}
  
.success:before {
   font-family: FontAwesome; 
   content: "\f111"; 
   font-size: 6px;
   margin-right: 6px;
   color: #00AD37;
   line-height: 10px;
}

The problem

Everything I have done previously works fine, on the frontend in the account page> my orders you can correctly view the order status:

However, if you go to admin page woocommerce> orders you will see in the table that the status column is read as text and not as html, so the css is not applied, so you will see something like this:

The Solution

In the template file class-wc-admin-list-table-orders.php at lines 235 and 237 you can find the code responsible for the bad display of the tag. What I did was delete the esc_html attribute from both printf (line 235 and 237). Once these are eliminated, you will no longer have any display problems.

The only trade-off is that if you update woocommerce, you will likely lose this change, so you have to overwrite the file in the active child theme.

I almost forgot, you can find the template file inwoocommerce \ includes \ admin \ list-tables.