Adding a File upload field in woocommerce checkout

Question

So i want to add 4 fields to a woocommerce checkout page, a subject a title and I want the customer to be able to upload 2 files 1 is a Script and the other is a Intro.

But now I got the problem that the upload files aren't showing on my page. the title and subject are showing but when I set the type to be file it fails.

Here is my code:

// Add custom fields to checkout page
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {

    $fields['billing']['video_title'] = array(
        'type'        => 'text',
        'class'       => array( 'form-row-wide' ),
        'label'       => __( 'Video Title' ),
        'placeholder' => __( 'Enter the title for your video' ),
        'required'    => true,
        'priority'    => 1,
    );

    $fields['billing']['video_subject'] = array(
        'type'        => 'text',
        'class'       => array( 'form-row-wide' ),
        'label'       => __( 'Video Subject' ),
        'placeholder' => __( 'Enter the subject of your video' ),
        'required'    => true,
        'priority'    => 2,
    );

    $fields['billing']['video_script'] = array(
        'label'       => __( 'Video Intro' ),
        'required'  => false,
        'class'     => array('form-row-wide'),
        'clear'     => true,
        'priority'    => 3,
    );

    $fields['billing']['video_intro'] = array(
        'type'        => 'file',
        'class'       => array( 'form-row-wide' ),
        'label'       => __( 'Video Intro' ),
        'required'    => true,
        'priority'    => 4,
    );


    return $fields;
}


// Validate custom field values on the checkout page
add_action( 'woocommerce_checkout_process', 'validate_video_fields_on_checkout' );

function validate_video_fields_on_checkout() {
    if ( ! isset( $_FILES['video_script']['name'] ) || empty( $_FILES['video_script']['name'] ) ) {
        wc_add_notice( __( 'Please upload your video script.' ), 'error' );
    }

    if ( ! isset( $_FILES['video_intro']['name'] ) || empty( $_FILES['video_intro']['name'] ) ) {
        wc_add_notice( __( 'Please upload your video intro.' ), 'error' );
    }
}

// Save custom field values as order meta data
add_action( 'woocommerce_checkout_create_order', 'save_video_fields_to_order_meta' );

function save_video_fields_to_order_meta( $order ) {

    if ( isset( $_POST['video_subject'] ) ) {
        $order->update_meta_data( 'Video Subject', sanitize_text_field( $_POST['video_subject'] ) );
    }
    if ( isset( $_POST['video_title'] ) ) {
        $order->update_meta_data( 'Video Title', sanitize_text_field( $_POST['video_title'] ) );
    }

    if ( isset( $_FILES['video_script'] ) ) {
        $file = $_FILES['video_script'];
        $upload = wp_upload_bits( $file['name'], null, file_get_contents( $file['tmp_name'] ) );
        if ( isset( $upload['error'] ) && $upload['error'] !== false ) {
            wc_add_notice( __( 'There was an error uploading your video script.' ), 'error' );
        } else {
            $order->update_meta_data( 'Video Script', $upload['url'] );
        }
    }

    if ( isset( $_FILES['video_intro'] ) ) {
        $file = $_FILES['video_intro'];
        $upload = wp_upload_bits( $file['name'], null, file_get_contents( $file['tmp_name'] ) );

        if ( isset( $upload['error'] ) && $upload['error'] !== false ) {
            wc_add_notice( __( 'There was an error uploading your video intro.' ), 'error' );
        } else {
            $order->update_meta_data( 'Video Intro', $upload['url'] );
        }
    }
}

Kayyum Halai · Accepted Answer · 2023-03-08 15:45:35Z

2

The "file" type is not provided by WooCommerce so you can check here for which types of files are supported. https://jeroensormani.com/ultimate-guide-to-woocommerce-checkout-fields/

If you want add file uploads field in checkout page you need to add like bellow code and follow this document. https://rudrastyh.com/woocommerce/checkout-file-upload.html

add_action( 'woocommerce_after_checkout_billing_form', 'misha_file_upload_field' );
function misha_file_upload_field() { ?>
    <div class="form-row form-row-wide">
        <input type="file" id="misha_file" name="misha_file" />
        <input type="hidden" name="misha_file_field" />
        <label for="misha_file"><a>Select a cool image</a></label>
        <div id="misha_filelist"></div>
    </div>
        
}

answered Mar 8, 2023 at 15:45

Kayyum Halai

863 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a File upload field in woocommerce checkout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related