Custom order status background button color in Woocommerce 3.3 admin order list
You can set CSS color and background color to your custom order status displayed in admin order list this way:
add_action('admin_head', 'styling_admin_order_list' );
function styling_admin_order_list() {
global $pagenow, $post;
if( $pagenow != 'edit.php') return; // Exit
if( get_post_type($post->ID) != 'shop_order' ) return; // Exit
// HERE we set your custom status
$order_status = 'Dispatched'; // <==== HERE
?>
<style>
.order-status.status-<?php echo sanitize_title( $order_status ); ?> {
background: #d7f8a7;
color: #0c942b;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Strange displayed style for manual Woocommerce custom order status
Don't use wc-manual slug as manual slug is already reserved in WooCommerce and displays an arrow. Instead change your status slug for example to wc-manual-order and the arrow will be replaced by the status name as desired.
So your code will be:
// Add a custom order status
add_action( 'init', 'register_manual_order_status' );
function register_manual_order_status() {
register_post_status( 'wc-manual-order', array(
'label' => __('Manual Order'),
'public' => true,
'exclude_from_search' => false,
'show_in_admin_all_list' => true,
'show_in_admin_status_list' => true,
'label_count' => _n_noop( 'Manual order (%s)', 'Manual order (%s)' )
) );
}
// Add Custom order status after processing on order statuses dropdown
add_filter( 'wc_order_statuses', 'add_manual_to_order_statuses' );
function add_manual_to_order_statuses( $order_statuses ) {
$new_order_statuses = array();
foreach ( $order_statuses as $key => $status ) {
$new_order_statuses[ $key ] = $status;
if ( 'wc-processing' === $key ) {
$new_order_statuses['wc-manual-order'] = __('Manual');
}
}
return $new_order_statuses;
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
To change the background color displayed in admin orders list, you will use:
Custom order status background button color in Woocommerce 3.3 admin order list
Issue with action button in WooCommerce admin order list for custom order status
That's because in the woocommerce_admin_order_actions hook an if condition is missing, to display the button if the order contains the status ready-to-dispatch.
I have rewritten your code with this updated code. For example, the init hook has been replaced with woocommerce_register_shop_order_post_statuses to register custom order statuses.
So you get:
/**
* Register order status
*/
function filter_woocommerce_register_shop_order_post_statuses( $order_statuses ) {
// Status must start with "wc-"
$order_statuses['wc-ready-to-dispatch'] = array(
'label' => _x( 'Ready to dispatch', 'Order status', 'woocommerce' ),
'public' => false,
'exclude_from_search' => false,
'show_in_admin_all_list' => true,
'show_in_admin_status_list' => true,
/* translators: %s: number of orders */
'label_count' => _n_noop( 'Ready to dispatch <span class="count">(%s)</span>', 'Abonnement <span class="count">(%s)</span>', 'woocommerce' ),
);
return $order_statuses;
}
add_filter( 'woocommerce_register_shop_order_post_statuses', 'filter_woocommerce_register_shop_order_post_statuses', 10, 1 );
/**
* Show order status in the dropdown @ single order
*/
function filter_wc_order_statuses( $order_statuses ) {
$new_order_statuses = array();
// add new order status after processing
foreach ( $order_statuses as $key => $status ) {
$new_order_statuses[ $key ] = $status;
if ( 'wc-processing' === $key ) {
// Status must start with "wc-"
$new_order_statuses['wc-ready-to-dispatch'] = _x( 'Ready to dispatch', 'Order status', 'woocommerce' );
}
}
return $new_order_statuses;
}
add_filter( 'wc_order_statuses', 'filter_wc_order_statuses', 10, 1 );
/**
* Show order status in the dropdown @ bulk actions
*/
function filter_bulk_actions_edit_shop_order( $bulk_actions ) {
// Note: "mark_" must be there instead of "wc"
$bulk_actions['mark_ready-to-dispatch'] = __( 'Ready to dispatch', 'woocommerce' );
return $bulk_actions;
}
add_filter( 'bulk_actions-edit-shop_order', 'filter_bulk_actions_edit_shop_order', 10, 1 );
/**
* Add quick action button @ admin orders list
*/
function filter_order_actions( $actions, $order ) {
// Get Order ID (compatibility all WC versions)
$order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;
// Display the button for all orders that have a 'processing' status
if ( $order->has_status( array( 'processing' ) ) ) {
$action_slug = 'ready-to-dispatch';
// Set the action button
$actions['ready-to-dispatch'] = array(
'url' => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=ready-to-dispatch&order_id=' . $order_id ), 'woocommerce-mark-order-status' ),
'name' => __( 'Ready to dispatch', 'woocommerce' ),
'action' => $action_slug, // keep "view" class for a clean button CSS
);
}
// Display the button for all orders that have a 'ready-to-dispatch' status
if ( $order->has_status( array( 'ready-to-dispatch' ) ) ) {
$action_slug = 'complete';
// Set the action button
$actions['complete'] = array(
'url' => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=completed&order_id=' . $order_id ), 'woocommerce-mark-order-status' ),
'name' => __( 'Complete', 'woocommerce' ),
'action' => $action_slug,
);
}
return $actions;
}
add_filter( 'woocommerce_admin_order_actions', 'filter_order_actions', 10, 2 );
/**
* Add WooCommerce icon for your action button @ admin orders list
*/
function action_admin_head() {
$action_slug = 'ready-to-dispatch';
echo '<style>.wc-action-button-' . $action_slug . '::after { content: "\f344" !important; }</style>';
}
add_action( 'admin_head', 'action_admin_head' );
Add HTML/CSS to order statuses on front and backend in WooCommerce
1) For the frontend part you can use the woocommerce_my_account_my_orders_column_{$column_id} composite hook where {$column_id} need to be replaced by order-status.
This will allow you to rewrite the existing output and add additional HTML as well as the current order status:
function action_woocommerce_my_account_my_orders_column_order_status( $order ) {
echo '<span class="label ' . $order->get_status() . '">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
}
add_action( 'woocommerce_my_account_my_orders_column_order-status', 'action_woocommerce_my_account_my_orders_column_order_status', 10, 1 );
Result:
<span class="label completed">Completed</span>
<span class="label processing">Processing</span>
2) For the backend part you can use the admin_head action hook, with which you can directly apply CSS via the order status (which is added by default)
function action_admin_head() {
global $pagenow, $post;
if ( $pagenow != 'edit.php' ) return; // Exit
if ( get_post_type( $post->ID ) != 'shop_order' ) return; // Exit
?>
<style>
/* General */
.order-status {
color: #ffffff !important;
}
/* Status completed */
.order-status.status-completed {
background: #d7f8a7;
}
/* Status processing */
.order-status.status-processing {
background: #ddaaff;
}
</style>
<?php
}
add_action( 'admin_head', 'action_admin_head' );
Include order count from custom order status in WooCommerce admin menu
By default only orders with the status 'processing' are counted and added to the orders count number.
To adjust this we are going to use the woocommerce_menu_order_count filter hook and wc_orders_count() function, which return the orders count of a specific order status.
So you get:
/**
* Add orders count of a specific order status
*/
function filter_woocommerce_menu_order_count( $wc_processing_order_count ) {
// Call function and pass custom order status
$order_count_produktionsklar = wc_orders_count( 'produktionsklar' );
return $wc_processing_order_count + $order_count_produktionsklar;
}
add_filter( 'woocommerce_menu_order_count', 'filter_woocommerce_menu_order_count', 10, 1 );
I also have rewritten your code with this updated code. For example, the init hook has been replaced with woocommerce_register_shop_order_post_statuses to register custom order statuses.
/**
* Register order status
*/
function filter_woocommerce_register_shop_order_post_statuses( $order_statuses ) {
// Status must start with "wc-"
$order_statuses['wc-produktionsklar'] = array(
'label' => _x( 'Klar til produktion', 'Order status', 'woocommerce' ),
'public' => false,
'exclude_from_search' => false,
'show_in_admin_all_list' => true,
'show_in_admin_status_list' => true,
/* translators: %s: number of orders */
'label_count' => _n_noop( 'Klar til produktion <span class="count">(%s)</span>', 'Klar til produktion <span class="count">(%s)</span>', 'woocommerce' ),
);
return $order_statuses;
}
add_filter( 'woocommerce_register_shop_order_post_statuses', 'filter_woocommerce_register_shop_order_post_statuses', 10, 1 );
/**
* Show order status in the dropdown @ single order
*/
function filter_wc_order_statuses( $order_statuses ) {
$new_order_statuses = array();
// Add new order status after processing
foreach ( $order_statuses as $key => $status ) {
$new_order_statuses[ $key ] = $status;
if ( 'wc-processing' === $key ) {
// Status must start with "wc-"
$new_order_statuses['wc-produktionsklar'] = _x( 'Klar til produktion', 'Order status', 'woocommerce' );
}
}
return $new_order_statuses;
}
add_filter( 'wc_order_statuses', 'filter_wc_order_statuses', 10, 1 );
/**
* Show order status in the dropdown @ bulk actions
*/
function filter_bulk_actions_edit_shop_order( $bulk_actions ) {
// Note: "mark_" must be there instead of "wc"
$bulk_actions['mark_produktionsklar'] = __( 'Klar til produktion', 'woocommerce' );
return $bulk_actions;
}
add_filter( 'bulk_actions-edit-shop_order', 'filter_bulk_actions_edit_shop_order', 10, 1 );
Show complete action button to WooCommerce order with a custom status
To have the "complete" action button for Orders with custom order status, use the following:
add_filter( 'woocommerce_admin_order_actions', 'customize_admin_order_actions', 10, 2 );
function customize_admin_order_actions( $actions, $order ) {
// Display the "complete" action button for orders that have a 'shipped' status
if ( $order->has_status('shipped') ) {
$actions['complete'] = array(
'url' => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=completed&order_id=' . $order->get_id() ), 'woocommerce-mark-order-status' ),
'name' => __( 'Complete', 'woocommerce' ),
'action' => 'complete',
);
}
return $actions;
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
Related: Add a custom order status "Shipped" in Woocommerce
Add a custom action button in WooCommerce admin order list
To resume, you have created a custom order status 'wc-parcial' (with the instructions code provided in your question) and you need to add a related action button to orders admin list.
For WooCommerce version 3.3+ check the update in this answer below
You need to use a custom function hooked in woocommerce_admin_order_actions filter hook
// Add your custom order status action button (for orders with "processing" status)
add_filter( 'woocommerce_admin_order_actions', 'add_custom_order_status_actions_button', 100, 2 );
function add_custom_order_status_actions_button( $actions, $order ) {
// Display the button for all orders that have a 'processing' status
if ( $order->has_status( array( 'processing' ) ) ) {
// Get Order ID (compatibility all WC versions)
$order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;
// Set the action button
$actions['parcial'] = array(
'url' => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status=parcial&order_id=' . $order_id ), 'woocommerce-mark-order-status' ),
'name' => __( 'Envio parcial', 'woocommerce' ),
'action' => "view parcial", // keep "view" class for a clean button CSS
);
}
return $actions;
}
// Set Here the WooCommerce icon for your action button
add_action( 'admin_head', 'add_custom_order_status_actions_button_css' );
function add_custom_order_status_actions_button_css() {
echo '<style>.view.parcial::after { font-family: woocommerce; content: "\e005" !important; }</style>';
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works. You will get that:
Related Topics
Escape String to Use in Mail()
Access Denied for User @ 'Localhost' to Database ''
Is It Secure to Store a Password in a Session
PHP Unexpected Result of Float to Int Type Cast
Soap-Error: Parsing Wsdl: Couldn't Load from <Url>
Remove Accents Without Using Iconv
How to Echo Out Table Rows from the Db (Php)
Set an Environment Variable in .Htaccess and Retrieve It in PHP
Why Is Mime_Content_Type() Deprecated in PHP
Curl and Ping - How to Check Whether a Website Is Either Up or Down
Php: How to Sort the Characters in a String
How to Ceil, Floor and Round Bcmath Numbers
How to Replace a Function in PHP (Such as Mail) and Make It Do Something Else