wordpresswoocommercecustom-wordpress-pageswordpress-rest-apiwoocommerce-rest-api

Wordpress/Woocommerce API - Add to Cart with Attachment


I am pretty new to the Wordpress and Woocommerce API's.

I have built a custom page/app that allows my customers to create a custom image using geodata. This generates an image. I then need to attach this image to the customers Cart Item / Order.

(Note, this shouldn't replace the product image, it should be considered a custom attachment from the user).

There are some plugins that allow the user to "upload" a file on the product page on the front end, which then shows that attachment in the Woocommerce orders in the admin panel, but this is not what I'm after. I need to able to this programmatically, with either Javascript (preferable, image is generated in JS) or PHP.

I'm not really sure how to go about this. I've looked through the WooCommerce API docs and there doesn't seem to be a way to do it. I can add a cart item and the quantity via the API, but no way to append an attachment. I'm thinking maybe I need a third party plugin that I can hook into via it API instead? Or, I would store the image in Wordpress's media folder, and reference the image from there, but then I'm worried about an ever growing media folder in Wordpress.

Really not sure how to go about this. Any help is appreciated!

I've tried seeing what objects/properties I can POST a reference to with the Woocommerce API, but can't seem to find anything applicable.


Solution

  • This question could be easily split into multiple questions. I'll help you with the part of storing filename into order items. Then you can fill the gaps and figure out the file upload part. After all, the file doesn't have to be on the WordPress site if you are worried about the uploads folder size. You take care of the file part and when you have the file name/path/url you can add it to order using the code below.

    In this example we are going to add a text field before the add to cart button. In your case, you can change the type of this to hidden and fill the value with a filename/path/url. But in this case, we'll just use a plain textfield labeled 'custom_data'

    add_action( 'woocommerce_before_add_to_cart_button', 'custom_data_field' );
    function custom_data_field() {
        echo '<div class="custom_data_field">';
        woocommerce_form_field( 'custom_data', array(
            'type'          => 'text',
            'class'         => array('custom_data_field form-row-wide'),
            'label'         => __('Custom Data'),
            'placeholder'   => __('Enter custom data'),
        ), '' );
        echo '</div>';
    }
    
    

    Next, we add a piece of code that will run when you click "Add to cart" button. This code will store the value of our custom field into cart item. The cart_item is not stored into database yet, it's just in the cart object waiting for user to complete the order.

    
    add_filter( 'woocommerce_add_cart_item_data', 'add_custom_data_to_cart_item', 10, 2 );
    function add_custom_data_to_cart_item( $cart_item_data, $product_id ) {
        if( isset( $_POST['custom_data'] ) ) {
            $cart_item_data['custom_data'] = sanitize_text_field( $_POST['custom_data'] );
        }
        return $cart_item_data;
    }
    

    Next, we want to store this value somewhere in the database. My choice it to store it into wp_woocommerce_order_itemmeta table, it's a natural choice for this kind of data. This script will run when a user creates the order on the checkout page. The function is taking the our custom_data from the cart and storing it into the database. Without this step, the value would be lost.

    add_action( 'woocommerce_add_order_item_meta', 'save_custom_data_to_order_item_meta', 10, 3 );
    function save_custom_data_to_order_item_meta( $item_id, $values, $cart_item_key ) {
        if( isset( $values['custom_data'] ) ) {
            wc_add_order_item_meta( $item_id, 'custom_data', $values['custom_data'] );
        }
    }
    
    

    And finally, we want to see this value in the order admin page. The code below will add the value of the custom field under the item on the order page. For your purpose, you can change this to display a link to download the uploaded file.

    add_action( 'woocommerce_order_item_meta_end', 'display_custom_data_field', 10, 3 );
    function display_custom_data_field( $item_id, $item, $product ) {
        $custom_data = wc_get_order_item_meta( $item_id, 'custom_data', true );
        if ( $custom_data ) {
            echo '<br><strong>' . __( 'Custom Data:', 'woocommerce' ) . '</strong> ' . $custom_data;
        }
    }