CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommerceorders
Aras Serdaroğlu
Aras Serdaroğlu

Reputation: 321

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.

Upvotes: 3

Views: 2467

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254378

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.

Upvotes: 5

Related Questions