Dans cet article nous allons voir comment changer les couleurs pour Woocommerce statuts commandes, les statuts personnalisés mais aussi les statuts ajoutés avec Colissimo
Qu’est ce que Woocommerce ?
WooCommerce est une extension open source pour WordPress permettant de créer une boutique en ligne. Il est conçu pour les petites et grandes entreprises en ligne utilisant WordPress
Pourquoi vouloir changer les couleurs des statuts de commandes dans Woocommerce ?
Dans woocommerce les couleurs pour les statuts de commandes sont prédéfinis et peuvent être simple à comprendre et à prendre en main.
Chaque statut à une couleur qui lui est propre. Seuls les statuts “Annulée” et “Attente paiement” sont gris.
Il en est de même pour les statuts de commande ajoutée à Woocommerce, comme les statuts personnalisés ou les statuts ajoutés avec une extension comme Colissimo
Cela peut rapidement rendre la lisibilité des statuts de commandes difficile.
Il existe des solutions pour changer les couleurs des statuts et créer de nouveaux status, néanmoins ses solutions sont souvent payantes et très coûteuses pour leurs utilisations.
WooCommerce statuts commandes : comment personnaliser les couleurs sans payer le moindre sous ?
Oui ! C’est possible pour cela il faudra vous rendre dans la partie “Éditeur de thème” dans l’onglet “Apparence”
Un message vous expliquant de faire attention aux modifications apparaît ? C’est normal, cliquez sur ‘Je comprends’.
Sur la partie de droite vous allez avoir “functions.php” rendez vous sur le fichier, en bas du fichiers copier ceci :
add_action('admin_head', 'styling_admin_order_list' );
function styling_admin_order_list() {
global $pagenow, $post;
if( $pagenow != 'edit.php') return; //sortie
if( 'shop_order' != get_post_type())return; //sortie
if( get_post_type($post->ID) != 'shop_order' ) return; //sortie
?>
<style>
.order-status.status-on-hold {
background-color: #DF3F32!important;
color: white;
}
.order-status.status-lpc_ready_to_ship, .order-status.status-lpc_transit{
background-color: #FDBA00!important;
color: white;
}
.order-status.status-lpc_delivered{
background-color: #2481F6!important;
color: white;
}
.order-status.status-processing{
background-color: #28AB45!important;
color: white;
}
</style>
<?php
}
Liste des classe des statuts de commandes Woocommerce :
.status-processing -> En cours
.status-completed -> Terminée
.status-cancelled -> Annulée
.status-refunded -> Remboursé
.status-failed -> Échoué
.status-pending -> Attente paiement
.status-on-hold -> Attente
Liste des classe des statuts de commandes colissimo Woocommerce :
.status-lpc_ready_to_ship -> Prêt à expédier
.status-lpc_transit -> En Transit
.status-lpc_anomaly -> Anomalie
Bonus : Changer l’ordre des statuts de commandes
function misha_change_statuses_order( $wc_statuses_arr ){
$new_statuses_arr = array(
'wc-lpc_ready_to_ship' => $wc_statuses_arr['wc-lpc_ready_to_ship'], // Prêt à expédier
'wc-processing' => $wc_statuses_arr['wc-processing'], // 1
'wc-lpc_transit' => $wc_statuses_arr['wc-lpc_transit'], // En Transit
'wc-completed' => $wc_statuses_arr['wc-completed'], // 2
'wc-lpc_delivered' => $wc_statuses_arr['wc-lpc_delivered'], // 3
'wc-lpc_anomaly' => $wc_statuses_arr['wc-lpc_anomaly'], // Anomalie
'wc-cancelled' => $wc_statuses_arr['wc-cancelled'], // 3
'wc-refunded' => $wc_statuses_arr['wc-refunded'], // 4
'wc-failed' => $wc_statuses_arr['wc-failed'], // 5
'wc-pending' => $wc_statuses_arr['wc-pending'], // 6
'wc-on-hold' => $wc_statuses_arr['wc-on-hold'] // 7
);
return $new_statuses_arr;
}
add_filter( 'wc_order_statuses', 'misha_change_statuses_order' );
Besoin d’aide sur WooCommerce ?
