Search code examples
phpwordpresswoocommercehook-woocommerceaccount

Add a section of order items with buttons to WooCommerce My Account single order pages


In WooCommerce, when customers purchase one or more products, he can see in his My Account section on single order pages:

enter image description here

I would like in this My Account section on single order pages to add a section listing all order items (purchased products) for the current order with a button for each order item, so the user will see, by default, the following:

enter image description here

I'm using this code to display a button and I want the following conditions to be checked when he clicks on the button for each product he bought:

  1. First, check if this product was purchased by the same user who clicked on the (Download this product invoice) button?

  2. If the product was purchased, a text file should be generated and the name of the same product that the buyer clicks on the corresponding button (Download this product invoice) and puts the buyer's email address in that file and then the file is downloaded (text file like be below)

  3. A button (Download this product invoice) should be created in front of or for each product that was purchased

Hello, dear user Thank you for purchasing (virtual product 1). You can receive your invoice by (buyer's email).

or

Hello, dear user Thank you for purchasing (virtual product 2). You can receive your invoice by (buyer's email).

and...

I myself have used the following commands to add the button to the Function.php file, but I want to apply the above changes

add_action('woocommerce_order_details_after_order_table', 'add_button');

function add_button($order) {
    /* Your code */
   // echo "Your button html code";
    echo '<form method="post">';
    echo '<input type="submit" name="btn-added" id="btn-added" value="Download this product invoice" /><br/>';
    echo '</form>';
}


function sample_func() {
    // Get Current User Email Address
    $current_user = wp_get_current_user();
    $current_user_email = $current_user->user_email;
    echo $current_user_email;
    
    // Get Order Id
    $order_id_sample = wc_get_order( $order_id );
    echo $order_id_sample;   
}

if(array_key_exists('btn-added',$_POST)){
   sample_func();
}

Solution

  • You need to hook your function in woocommerce_order_details_after_order_table action hook instead.

    Note that you don't need to "check if this product was purchased by the same user who clicked on the (Download this product invoice)" as My Account section is only displayed to Logged in Customers with their orders and personal data.

    The following function code will display in each customer My account single orders, an additional section with all order items listed (products names) with your custom download button:

    add_action('woocommerce_order_details_after_order_table', 'section_order_items_button_invoice');
    
    function section_order_items_button_invoice( $order ) {
        if ( ! is_account_page() ) return; // Only on customer my account section
    
        // Only for 'completed' and 'processing' orders
        if ( $order->has_status( array('completed', 'processing') ) ) :
    
        $user_id   = $order->get_user_id(); // Get the customer ID
        $user      = $order->get_user(); // Get the WP_User object
       ?> 
        <section class="woocommerce-order-details product-invoices">
            <h2 class="woocommerce-order-details__title"><?php esc_html_e( 'Product Order details', 'woocommerce' ); ?></h2>
            <!-- form start -->
            <form method="post" name="<?php echo 'download-' . $user_id; ?>">
                <table class="woocommerce-table woocommerce-table--order-details shop_table order_details">
                    <thead>
                        <tr>
                            <th class="woocommerce-table__product-name product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
                            <th class="woocommerce-table__product-table product-total"><?php esc_html_e( 'Invoice download', 'woocommerce' ); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        // Loop through order items
                        foreach ( $order->get_items() as $item_id => $item ) :
                            $product            = $item->get_product();
                            $product_id         = $item->get_variation_id() ? $item->get_variation_id() : $item->get_product_id();
                        ?>
                        <tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'woocommerce-table__line-item order_item', $item, $order ) ); ?>">
    
                            <td class="woocommerce-table__product-name product-name"><?php echo wp_kses_post( $item->get_name() );?></td>
    
                            <td class="woocommerce-table__product-total product-total"><?php printf( 
                                '<input type="submit" name="%s" value="%s" /><br/>',
                                'product_item-' . $item_id . '-' . $product_id, // Unique imput name with the item ID and the product ID
                                esc_html__(  'Download this product invoice', 'woocommerce')
                            ); ?></td>
    
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                    </thead>
                </table>
            </form>
            <!-- form end -->
        </section>
        <?php
        endif;
    }
    

    You will have to handle yourself the download functionality of every order item invoice and everything else you asked (as this is simply too broad and complicated to be handled in Stack overflow).

    Note that the <form> element just need to be implemented once in the page, with a unique name attribute. Also, for each <input type="submit" name=""> each name attribute need to be unique.

    Tested in the theme's functions.php file and works, displaying the following:

    enter image description here