求助：WooCommerce结账页添加处方文件上传按钮无效

你的问题核心在于WooCommerce默认的woocommerce_form_field函数不支持file类型，直接指定type => 'file'不会渲染出文件上传控件。以下是完整可运行的解决方案：

1. 修改结账表单编码类型 #

文件上传要求表单使用multipart/form-data编码，添加代码修改结账表单属性：

add_filter('woocommerce_checkout_form_tag', 'add_multipart_to_checkout_form');
function add_multipart_to_checkout_form($tag) {
    return str_replace('action=', 'enctype="multipart/form-data" action=', $tag);
}

2. 渲染文件上传字段 #

替换你原来的字段添加代码，直接输出原生HTML文件上传控件（无需依赖woocommerce_form_field）：

add_action('woocommerce_after_order_notes', 'prescription_upload_field1');
function prescription_upload_field1($checkout) {
    echo '<div id="prescription_upload_field"><h3>' . __('Prescription Upload') . '</h3>';
    
    echo '<div class="prescription-file-upload-field form-row-wide">';
    echo '<label for="prescription_file_upload">' . __('Upload Prescription') . '</label>';
    echo '<input type="file" name="prescription_file_upload" id="prescription_file_upload" accept=".pdf,.jpg,.jpeg,.png">';
    echo '</div>';
    
    echo '</div>';
}

注：accept属性限制了允许上传的文件类型，可根据需求自由调整。

3. 处理文件上传并关联到订单 #

添加代码在订单创建时处理上传文件，保存至WordPress上传目录，并将文件路径绑定到订单元数据：

add_action('woocommerce_checkout_create_order', 'save_prescription_file_to_order', 10, 2);
function save_prescription_file_to_order($order, $data) {
    if (!empty($_FILES['prescription_file_upload']['name'])) {
        $upload = wp_handle_upload($_FILES['prescription_file_upload'], array('test_form' => false));
        
        if (!isset($upload['error']) || $upload['error'] === 0) {
            $order->update_meta_data('_prescription_file', $upload['url']);
            $order->update_meta_data('_prescription_file_path', $upload['file']);
        }
    }
}

4. 在订单页面显示上传文件 #

添加代码在前台订单详情页和后台订单编辑页展示已上传的文件链接：

// 前台订单详情页显示
add_action('woocommerce_order_details_after_order_table', 'display_prescription_file_on_order_details');
function display_prescription_file_on_order_details($order) {
    $file_url = $order->get_meta('_prescription_file');
    if ($file_url) {
        echo '<div class="prescription-file-section">';
        echo '<h3>' . __('Prescription File') . '</h3>';
        echo '<a href="' . esc_url($file_url) . '" target="_blank">' . __('View Prescription') . '</a>';
        echo '</div>';
    }
}

// 后台订单编辑页显示
add_action('woocommerce_admin_order_data_after_billing_address', 'display_prescription_file_in_admin_order');
function display_prescription_file_in_admin_order($order) {
    $file_url = $order->get_meta('_prescription_file');
    if ($file_url) {
        echo '<div class="prescription-file-admin">';
        echo '<h4>' . __('Prescription File') . '</h4>';
        echo '<a href="' . esc_url($file_url) . '" target="_blank">' . __('Download/View') . '</a>';
        echo '</div>';
    }
}

将以上所有代码添加到你的主题functions.php文件或自定义插件中，即可实现完整的结账页文件上传功能。

内容的提问来源于stack exchange，提问作者Khan Emir