Colonnes personnalisées supplémentaires pour l'aperçu des commandes WooCommerce

La personnalisation de l'aperçu des commandes WooCommerce peut vous permettre d'afficher des informations supplémentaires et d'améliorer votre flux de travail de gestion des commandes. Une personnalisation efficace consiste à ajouter vos propres colonnes personnalisées à la liste des commandes. Ce guide explique comment ajouter une colonne personnalisée à la page des commandes WooCommerce à l'aide de PHP et comment la styliser avec du CSS personnalisé. Des outils comme Code WP ou Extraits de code sont recommandés pour intégrer le code en toute sécurité sans modifier les fichiers de base.

Approche – Solution PHP

À l'aide des filtres et des actions fournis par WooCommerce, vous pouvez ajouter de nouvelles colonnes à l'aperçu des commandes et afficher les données personnalisées stockées pour chaque commande. Dans cet exemple, nous créons une colonne personnalisée intitulée « Colonne personnalisée » qui affiche les données enregistrées dans les métadonnées de la commande sous la clé _colonne_personnalisée.

Exemple de code :

<?php
// Add a custom column to the WooCommerce orders overview
function add_custom_order_column( $columns ) {
    $new_columns = array();
    
    // Iterate existing columns and insert our custom column after the Order Status column
    foreach ( $columns as $key => $column ) {
        $new_columns[ $key ] = $column;
        if ( 'order_status' === $key ) {
            $new_columns['custom_column'] = __( 'Custom Column', 'text_domain' );
        }
    }
    return $new_columns;
}
add_filter( 'manage_edit-shop_order_columns', 'add_custom_order_column', 20 );

// Populate the custom column with its value from the order meta data
function populate_custom_order_column( $column, $post_id ) {
    if ( 'custom_column' === $column ) {
        $custom_value = get_post_meta( $post_id, '_custom_column', true );
        echo ! empty( $custom_value ) ? esc_html( $custom_value ) : '-';
    }
}
add_action( 'manage_shop_order_posts_custom_column', 'populate_custom_order_column', 10, 2 );
?>

Comment ça marche :

La première fonction, ajouter_une_colonne_de_commande_personnalisée, utilise le gérer_éditer-boutique_commander_colonnes filtre pour insérer une nouvelle colonne après la colonne « Statut de la commande ». La deuxième fonction, remplir_colonne_de_commande_personnalisée, utilise le gérer_la_boutique_commander_les_publications_colonne_personnalisée action pour remplir la colonne personnalisée avec les données récupérées à partir du méta-champ de publication. Si le champ méta _colonne_personnalisée est vide, il affiche un tiret.

Amélioration avec CSS

Le CSS personnalisé peut vous aider à améliorer l'apparence visuelle et la réactivité de votre nouvelle colonne. L'extrait de code CSS suivant garantit que votre colonne personnalisée se démarque avec une couleur d'arrière-plan subtile et un style de texte raffiné.

Exemple de code CSS :

/* Styliser la colonne personnalisée dans l'aperçu des commandes WooCommerce */ .column-custom_column { background-color: #f9f9f9; color: #333; font-weight: bold; text-align: center; padding: 8px; }

Intégration avec PHP :

Pour insérer ce CSS dans la zone d'administration, ajoutez le code PHP suivant. Ce code utilise le admin_head crochet pour afficher les styles personnalisés directement dans vos panneaux d'administration WordPress.

<?php
function add_custom_order_column_styles() {
    echo '
    .column-custom_column { couleur-arrière-plan : #f9f9f9 ; couleur : #333 ; épaisseur-police : gras ; alignement-texte : centre ; remplissage : 8 px ; } '; } add_action( 'admin_head', 'add_custom_order_column_styles' ); ?>

Conclusion

L'ajout de colonnes personnalisées à l'aperçu de vos commandes WooCommerce est un moyen pratique d'afficher des informations supplémentaires et personnalisées qui améliorent l'efficacité de la gestion des commandes. Avec la solution PHP fournie, vous pouvez ajouter une nouvelle colonne et la remplir avec des métadonnées spécifiques pour chaque commande. En complétant la fonctionnalité avec du CSS personnalisé, vous garantissez que votre colonne est non seulement informative, mais également intégrée visuellement dans votre tableau de bord d'administration.

Expérimentez ces techniques pour étendre vos capacités de gestion des commandes et créer une expérience back-end plus personnalisée qui répond aux besoins de votre entreprise. Bon codage !