Search code examples
phpwordpresswoocommercehook-woocommerceorders

Custom action button into a custom column on WooCommerce admin orders list


First, I made a custom column.

  function add_example_column($columns) {
    $columns['EXAMPLE'] = 'EXAMPLE';
    return $columns;
  }

  add_filter( 'manage_edit-shop_order_columns', 'add_example_column' );

After, I made a new action.

 function example_action($actions) {
    $actions['example'] = array (
      'url'     => 'https://example.com?action=ups',
      'name'    => __( 'Some text', 'woocommerce' ),
      'action'  => 'example'
    );
    return $actions;
  }

 add_action( 'woocommerce_admin_order_actions', 'example_action', 10, 1 );

Then, I tried to put this action button to custom column.

  function example_barcode($column, $order_id) {
    $order = new WC_Order( $order_id );
    if ( $column == 'EXAMPLE') :
      if ( $order->has_status( array( 'processing' ) ) ) :
        echo '<style>.wc-action-button-ups::after { font-family: FontAwesome !important; content: "\f7e0" !important; }</style>';
      endif;
    endif;
  }

  add_action( 'manage_shop_order_posts_custom_column', 'example_barcode', 10, 2 );

Still no success.


Solution

  • There are some mistakes in your code. To add a custom action button into a custom additional column on admin orders list, use the following:

    // Adding a custom comumn
    add_filter( 'manage_edit-shop_order_columns', 'additional_custom_field_column' );
    function additional_custom_field_column($columns) {
        return array_merge($columns, array('ups' => __('UPS', 'woocommerce')));
    }
    
    // The column content by row
    add_action( 'manage_shop_order_posts_custom_column' , 'display_custom_field_column_content', 10, 2 );
    function display_custom_field_column_content( $column, $post_id ) {
        if ( 'ups' === $column )
        {
            $order = wc_get_order( $post_id ); // Get the WC_Order instance Object
    
            // Targeting processing orders only
            if ( $order->has_status( 'processing' ) ) {
                $slug = 'ups';
                $url  = '?action=ups&order_id=' . $post_id; // The order Id is required in the URL
    
                // Output the button
                echo '<p><a class="button wc-action-button wc-action-button-'.$slug.' '.$slug.'" href="'.$url.'" aria-label="'.$slug.'"></a></p>';
            }
        }
    }
    
    // The CSS styling
    add_action( 'admin_head', 'add_custom_action_button_css' );
    function add_custom_action_button_css() {
        $action_slug = "ups";
    
        echo '<style> .wc-action-button-'.$action_slug.'::after { font-family: WooCommerce !important; content: "\e029" !important; }
        .wp-core-ui .button.wc-action-button-'.$action_slug.' { padding:0 6px; } .post-type-shop_order .wp-list-table .column-'.$action_slug.', 
        .post-type-shop_order .wp-list-table td.'.$action_slug.' { width:4ch !important; text-align:center !important;} </style>';
    }
    

    But you will not get the tooltip feature like in default WooCommerce action column.

    You will have to process your custom action through some additional functions.

    Notes: The hook woocommerce_admin_order_actions is to be used with default custom woocommerce button actions, so not for a custom column. Also FontAwesome don't seem to work on backend.

    Code goes in functions.php file of your active child theme (or active theme). Tested and works.