为Woocommerce产品单页创建带图片上传的表单

Question

I'm trying to build a form for a WooCommerce product, I've done a bunch of reading but can't quite find what I think I'm supposed to be looking for, then again I might have already read the answer somewhere and didn't understand it.

Here is the form that I made and I'd like it to go to checkout after submitting.

function catlist() {
$categories = get_categories();
$cat_array = [];
foreach ($categories as $category) :
    $cat_array[$category->term_id] = $category->name;
    echo '<option value="'.$category->name.'">'.$category->name.'</option>';
endforeach;
return $cat_array;
}

Here is my page template

<?php
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
require_once(ABSPATH . "wp-admin" . '/includes/file.php');
require_once(ABSPATH . "wp-admin" . '/includes/media.php');
get_header();

$attachment_id = media_handle_upload('file-upload', $post->ID);
?>

<form method='post' action='<?php WP_PLUGIN_DIR . '/plugin-dir/form-action.php'; ?>'><div class='form-section'><h1 class='form-element-head'>Select Category:</h1><select id='ad_category'>

<?php
catlist();
?>

</select></div>
<div class='form-section'>
    <h1 class='form-element-head'>Ad Title:</h1>
    <input type='text' id='ad_title'>
</div>
<div class='form-section'>
    <h1 class='form-element-head'>Item Price:</h1>
    $<input type='number' id='ad_price'>
</div>
<div class='form-section'>
    <h1 class='form-element-head'>Description:</h1>
    <input type='text' id='desc1' maxlength='28'>
    <input type='text' id='desc2' maxlength='28'>
    <input type='text' id='desc3' maxlength='28'>
    <input type='text' id='desc4' maxlength='28'>
    <input type='text' id='desc5' maxlength='28'>
    <input type='text' id='desc6' maxlength='28'>
</div>
<div class='form-section'>
    <h1 class='form-element-head'>Image Upload (Optional):</h1>
    <input type='file' name='file-upload' id='file-upload'>
</div>
<div class='form-section'>
    <input type='checkbox' id='agree' required />I agree to the Pay When You Sell Advertising Policy.</h1>
</div>
<div class='form-section'><input type='submit'>
</div>
</form>

<?php
get_footer();
?>

I've started my form actions but can't find documentation to pass my form values to WC Checkout. Any help is greatly appreciated.

PS -In case you're wondering, the 6 single text inputs vs a text area is done on purpose.