wordpress - How to wrap a table cell's text in Woocommerce Shop Orders Table? - Stack Overflow

admin管理员组

文章数量:1392007

In My Account > Orders > Shop Orders Table, I want to wrap the order status in a wrapper div, but I'm struggling to find how to do this. I can change the text of the status, but I cannot figure out how to wrap the status text in HTML. Any ideas?

Here's a visual example of what I would like to accomplish. I cannot find any filter hooks to edit this HTML.

In My Account > Orders > Shop Orders Table, I want to wrap the order status in a wrapper div, but I'm struggling to find how to do this. I can change the text of the status, but I cannot figure out how to wrap the status text in HTML. Any ideas?

Here's a visual example of what I would like to accomplish. I cannot find any filter hooks to edit this HTML.

• wordpress
• woocommerce

Share Improve this question Follow asked Mar 12 at 14:56 SackadelicSackadelic 1,03122 gold badges1414 silver badges2828 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

To wrap the order status in a wrapper <div> in the WooCommerce My Account > Orders table, you can achieve this by overriding the WooCommerce template.

Solution:

1. Locate the WooCommerce Template: The template for the "My Account Orders" table is located at:

   woocommerce/templates/myaccount/orders.php

2. Copy the Template to Your Theme: Copy the orders.php file to your theme or child theme. The path should be:

   your-theme/woocommerce/myaccount/orders.php

3. Modify the Status Column: In the copied orders.php file, locate this code (around line 70):

   <span class="woocommerce-OrderStatus <?php echo esc_attr( $order->get_status() ); ?>">
       <?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?>
   </span>
   
   

Wrap the status text with a <div> like this:

<div class="order-status-wrapper">
    <span class="woocommerce-OrderStatus <?php echo esc_attr( $order->get_status() ); ?>">
        <?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?>
    </span>
</div>

4.Add Custom CSS (Optional): In your theme’s style.css, you can now style the wrapper:

.order-status-wrapper {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #f3f3f3;
}

5.Clear Cache and Test: Refresh your site and check the "Orders" table.

The order status will now be wrapped inside a <div> allowing you to customize its design and layout easily.

You can do this by using WooCommerce action and filter hooks, without editing any WooCommerce core files.

You should first check if HPOS is active. This is by default turned on for new stores since WC 8.2.

• WooCommerce > Settings > Advanced > Features.

For WooCommerce where HPOS (High-Performance Order Storage) is NOT active/turned on:

The code below will work for WooCommerce, where HPOS (High-Performance Order Storage) is NOT active.

We can use the WooCommerce manage_edit-shop_order_columns. This hook allows to modify the columns in the WooCommerce admin orders table. We can add, remove, or rearrange columns using this filter.

1. So we can remove/unset the default Status column

2. Add a new Status column.

We can then use the manage_shop_order_posts_custom_column. This hook allows to define the content displayed in the custom columns that we added or modified using the previous hook manage_edit-shop_order_columns.

/* Wrap a table cell's text in Woocommerce shop orders table where HPOS is not active */
// Filter-hook to modify the columns in the WooCommerce admin orders table
add_filter('manage_edit-shop_order_columns', 'new_custom_shop_order_status_columns');
function new_custom_shop_order_status_columns($columns) {
    // Remove the default order status column
    unset($columns['order_status']);
    // Add new custom column for the order status
    $columns['custom_order_status'] = __('Status', 'woocommerce');
    return $columns;
}

// Action-hook to customize the content of the new column in the WooCommerce admin orders table
add_action('manage_shop_order_posts_custom_column', 'new_custom_shop_order_status_column_content', 10, 2);
function new_custom_shop_order_status_column_content($column, $post_id) {
    // Check if the current column is the new custom order status column
    if ($column == 'custom_order_status') {
        // Get the order object using the post ID
        $order = wc_get_order($post_id);
        // Get the order status
        $status = $order->get_status();
        // Get the status name
        $status_name = wc_get_order_status_name($status);
        
        // Output order status wrapped in a div with the class 'my-custom-wrapper'
        // Add/remove classes and html to your need
        echo '<div class="my-custom-wrapper"><mark class="order-status status-' . esc_attr($status) . ' tips"><span>' . esc_html($status_name) . '</span></mark></div>';
    }
}

Here are the results:

The code should be added in your functions.php file. Preferably to the functions.php file of your child theme.

If you have HPOS active:

If you have HPOS active, you will need to use other hooks. You will find a solution in list of reference below.

List of reference:

1. Add a custom field in WooCommerce admin order list "Order" existing column

2. How to edit woocommerce admin order page?

3. Custom columns in admin orders list disapeared with WooCommerce 8.6.1

4. Display user data in a new column on WooCommerce admin order list (+ HPOS)

5. Add columns to admin orders list in WooCommerce (+ HPOS)

本文标签： wordpressHow to wrap a table cell39s text in Woocommerce Shop Orders TableStack Overflow