How to add the WooCommerce order items in the admin commissions table

In our last development tutorial, we’ve added SliceWP’s affiliate account to WooCommerce’s my account page.

Today, we’re moving from the user facing side of the website to the admin side. Here, we’ll be adding a new column to the commissions table, that will display the items from the WooCommerce order that is attached to the commission. Similar to this screenshot:

To achieve the above result, we’ll be using two filters found in SliceWP:

• slicewp_list_table_commissions_columns – used to register a new column
• slicewp_list_table_commissions_column_{$column_name} – used to output the content we want in the column

Let’s get to it.

Registering a new table column

The first thing we need to do, is to register the table column where we’ll be outputting the order items’ information.

To do this, we’re going to be adding a callback to the slicewp_list_table_commissions_columns filter. The callback receives a single variable, namely $columns, that is an associative array containing the slugs and names of all the table’s columns.

/**
 * Register a new column in the admin "commissions" table
 *
 * @param array $columns
 *
 * @return array
 *
 */
function slicewp_custom_list_table_commissions_add_order_items( $columns ) {

    // Our new columns array.
    $new_columns = array( 'order_items' => 'Order Items' );

    return array_merge( $columns, $new_columns );

}
add_filter( 'slicewp_list_table_commissions_columns', 'slicewp_custom_list_table_commissions_add_order_items' );

With the above code, we’ve registered the new column and it should already appear in your commissions table.

However, you’ll notice that the new column is right at the end of the table. This is because we’ve appended our column to the existing ones, and SliceWP prints the columns in the order they are set.

This is not always great, as you’d most probably want to have the row actions at the end of the table, not a data column.

Let’s move the order_items column between the reference and type columns:

/**
 * Register a new column in the admin "commissions" table
 *
 * @param array $columns
 *
 * @return array
 *
 */
function slicewp_custom_list_table_commissions_add_order_items( $columns ) {

    // Our new columns array.
    $new_columns = array( 'order_items' => 'Order Items' );

    // Add the new columns between the commission "reference" and "type" columns.
    $columns = array_merge(
        array_slice( $columns, 0, array_search( 'type', array_keys( $columns ) ) ),
	$new_columns,
	array_slice( $columns, array_search( 'type', array_keys( $columns ) ), count( $columns ) )
    );

    return $columns;

}
add_filter( 'slicewp_list_table_commissions_columns', 'slicewp_custom_list_table_commissions_add_order_items' );

Outputting content into the column

The next thing we need to do is to output the order items details in the new column. Let’s say we just want to add the quantity and the name of each item in the order.

To do this, let’s create a callback to the slicewp_list_table_commissions_column_order_items filter. As you can notice, the filter has the order_items, which is the slug for the column, at the end. This is because the actual filter is dynamic.

The actual filter looks like this: slicewp_list_table_{$table_id}_column_{$column_name}. The $table_id in this case is commissions. For the affiliates table it will be affiliates, for payments it will be payments and so on.

So, let’s start building our callback:

/**
 * Overwrites the default output for the new "order_items" column.
 *
 * @param string $output
 * @param array  $item
 *
 * @return string
 *
 */
function slicewp_custom_list_table_commissions_column_order_items( $output, $item ) {

    // Make sure this commission is from WooCommerce.
    if ( empty( $item['reference'] ) )
        return $output;

    if ( empty( $item['origin'] ) || $item['origin'] != 'woo' )
	return $output;

    // Get the order.
    $order = wc_get_order( $item['reference'] );

    if ( ! $order )
	return $output;

}
add_filter( 'slicewp_list_table_commissions_column_order_items', 'slicewp_custom_list_table_commissions_column_order_items', 10, 2 );

The first thing we need to do in this callback is to make sure the commission’s reference exists. The commission’s reference is the order’s ID and, without it, we can’t retrieve the order items.

Next, we want to make sure the commission has been created from a WooCommerce order. And lastly, we retrieve the order.

Now that we have the order, let’s finish the callback function by rewriting the $output. We’ll do this by looping through all the items in the order and appending the quantity and the product’s name to the new $output string.

Here’s the entire callback function that outputs content in the newly registered column:

/**
 * Overwrites the default output for the new "order_items" column.
 *
 * @param string $output
 * @param array  $item
 *
 * @return string
 *
 */
function slicewp_custom_list_table_commissions_column_order_items( $output, $item ) {

    // Make sure this commission is from WooCommerce.
    if ( empty( $item['reference'] ) )
        return $output;

    if ( empty( $item['origin'] ) || $item['origin'] != 'woo' )
	return $output;

    // Get the order.
    $order = wc_get_order( $item['reference'] );

    if ( ! $order )
	return $output;

    // Rewrite output.
    $output = '';

    foreach ( $order->get_items() as $order_item ) {

	$product = $order_item->get_product();

	if ( ! $product )
	    continue;

	$output .= '<div style="white-space: nowrap;">' . $order_item->get_quantity() . ' x ' . $product->get_name() . '</div>';

    }

    // Return the new output.
    return $output;

}
add_filter( 'slicewp_list_table_commissions_column_order_items', 'slicewp_custom_list_table_commissions_column_order_items', 10, 2 );

The complete code

That’s it! Below you have the complete code. With it, you’ll register a new order_items table column and output the quantity and the name for each item in the order that’s attached to the commission.

To have it working on your website, you can either add it to a custom plugin you’re using for custom code or you can add it using a code snippets plugin.

/**
 * Register a new column in the admin "commissions" table
 *
 * @param array $columns
 *
 * @return array
 *
 */
function slicewp_custom_list_table_commissions_add_order_items( $columns ) {

    // Our new columns array.
    $new_columns = array( 'order_items' => 'Order Items' );

    // Add the new columns between the commission "reference" and "type" columns.
    $columns = array_merge(
        array_slice( $columns, 0, array_search( 'type', array_keys( $columns ) ) ),
	$new_columns,
	array_slice( $columns, array_search( 'type', array_keys( $columns ) ), count( $columns ) )
    );

    return $columns;

}
add_filter( 'slicewp_list_table_commissions_columns', 'slicewp_custom_list_table_commissions_add_order_items' );


/**
 * Overwrites the default output for the new "order_items" column.
 *
 * @param string $output
 * @param array  $item
 *
 * @return string
 *
 */
function slicewp_custom_list_table_commissions_column_order_items( $output, $item ) {

    // Make sure this commission is from WooCommerce.
    if ( empty( $item['reference'] ) )
        return $output;

    if ( empty( $item['origin'] ) || $item['origin'] != 'woo' )
	return $output;

    // Get the order.
    $order = wc_get_order( $item['reference'] );

    if ( ! $order )
	return $output;

    // Rewrite output.
    $output = '';

    foreach ( $order->get_items() as $order_item ) {

	$product = $order_item->get_product();

	if ( ! $product )
	    continue;

	$output .= '<div style="white-space: nowrap;">' . $order_item->get_quantity() . ' x ' . $product->get_name() . '</div>';

    }

    // Return the new output.
    return $output;

}
add_filter( 'slicewp_list_table_commissions_column_order_items', 'slicewp_custom_list_table_commissions_column_order_items', 10, 2 );