How you can enable upload image option in WooCommerce without using plugin?
In this article, I will walk through the steps to enable a file upload option on the single product page of your WooCommerce store. This feature is particularly useful if you want customers to upload designs or files while placing an order. We will cover how to create a child theme, display the upload field, validate the uploaded file, save the file data to the cart and order, and display the uploaded file in the cart, checkout, and admin order details.
Step 1: Create a Child Theme
Before adding custom code, it’s essential to create a child theme. This ensures that your changes won’t be lost when the parent theme is updated.
- Create a New Folder: In your WordPress installation, navigate to
wp-content/themesand create a new folder for your child theme. For example, if your parent theme is called "storefront", name the folder "storefront-child". (I used the theme name just for reference) - Create a Style.css file: Inside your child theme folder, create a
style.cssfile with the following content:
/*
Theme Name: Storefront Child
Template: storefront
*/Replace “storefront” with the name of your parent theme.
3. Create a functions.php file: In the same child theme folder, create a functions.php file. This file will be used to enqueue the parent theme styles and to add our custom functionality.
<?php
// Enqueue parent theme styles
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'storefront-style' for the Storefront theme.
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>4. Activate the Child Theme: Go to your WordPress dashboard, navigate to Appearance > Themes, and activate your new child theme.
Step 2: Add Custom Code to Child Theme’s functions.php
With your child theme set up, you can safely add custom functionality without worrying about losing changes during theme updates.
Display File Upload Field on Single Product Page
Add the following code to your child theme’s functions.php file. This code creates a file upload field on the single product page.
// Display file upload field on single product page
add_action('woocommerce_before_add_to_cart_button', 'display_file_upload_field');
function display_file_upload_field() {
?>
<div class="custom-file-upload">
<label for="custom_file">Upload your design</label>
<div class="file-upload-wrapper">
<input type="file" id="custom_file" name="custom_file" accept="image/*,application/pdf">
<span class="file-upload-message">Drag files here or <a href="#" class="file-upload-browse">browse</a></span>
</div>
<p class="file-upload-instructions">The design will appear on your box.</p>
</div>
<?php
}Validate File Upload Before Adding to Cart
To ensure only valid files are uploaded, add the following validation code:
// Validate file upload before adding to cart
add_filter('woocommerce_add_to_cart_validation', 'validate_file_upload', 10, 3);
function validate_file_upload($passed, $product_id, $quantity) {
if(isset($_FILES['custom_file']) && !empty($_FILES['custom_file']['name'])) {
$allowed_file_types = array('jpg', 'jpeg', 'png', 'gif', 'pdf');
$file_type = wp_check_filetype(basename($_FILES['custom_file']['name']));
if(!in_array($file_type['ext'], $allowed_file_types)) {
wc_add_notice('Only jpg, jpeg, png, gif, and pdf files are allowed.', 'error');
$passed = false;
}
} else {
wc_add_notice('Please upload your design file.', 'error');
$passed = false;
}
return $passed;
}Save Uploaded File to the Cart Item
Once the file is validated, we need to save it to the cart item:
// Save uploaded file to the cart item
add_filter('woocommerce_add_cart_item_data', 'save_file_upload', 10, 2);
function save_file_upload($cart_item_data, $product_id) {
if(isset($_FILES['custom_file']) && !empty($_FILES['custom_file']['name'])) {
$upload = wp_upload_bits($_FILES['custom_file']['name'], null, file_get_contents($_FILES['custom_file']['tmp_name']));
if(isset($upload['error']) && $upload['error'] != 0) {
wc_add_notice('There was an error uploading your file.', 'error');
} else {
$cart_item_data['custom_file'] = $upload;
$cart_item_data['unique_key'] = md5(microtime().rand());
}
}
return $cart_item_data;
}Display Uploaded File in Cart and Checkout Page
To show the uploaded file in the cart and checkout page, use the following code:
// Display uploaded file in cart and checkout page
add_filter('woocommerce_get_item_data', 'display_file_upload_in_cart', 10, 2);
function display_file_upload_in_cart($item_data, $cart_item) {
if(array_key_exists('custom_file', $cart_item)) {
$item_data[] = array(
'name' => 'Uploaded Design',
'value' => basename($cart_item['custom_file']['file'])
);
}
return $item_data;
}Save Uploaded File in Order Meta
Ensure the uploaded file is saved with the order data:
// Save uploaded file in order meta
add_action('woocommerce_checkout_create_order_line_item', 'save_file_upload_in_order', 10, 4);
function save_file_upload_in_order($item, $cart_item_key, $values, $order) {
if(array_key_exists('custom_file', $values)) {
$item->add_meta_data('Uploaded Design', $values['custom_file']['url']);
}
}Display Uploaded File in Order Admin
Finally, to display the uploaded file in the order admin page, add the following code:
// Display uploaded file in order admin
add_action('woocommerce_admin_order_data_after_order_details', 'display_file_upload_in_admin_order', 10, 1);
function display_file_upload_in_admin_order($order) {
foreach($order->get_items() as $item_id => $item) {
$uploaded_file = $item->get_meta('Uploaded Design');
if($uploaded_file) {
echo '<p><strong>Uploaded File:</strong> <a href="'.esc_url($uploaded_file).'" target="_blank">'.basename($uploaded_file).'</a></p>';
}
}
}Step 3: Add CSS for File Upload Field
To style the file upload field, add the following CSS to your custom CSS option in theme customizer:
.custom-file-upload {
margin-bottom: 20px;
width: 100% !important;
}
.custom-file-upload label {
display: block;
font-size: 16px;
margin-bottom: 8px;
}
.file-upload-wrapper {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
position: relative;
cursor: pointer;
}
.file-upload-wrapper input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.file-upload-message {
font-size: 16px;
color: #666;
}
.file-upload-message a.file-upload-browse {
color: #f89406;
text-decoration: underline;
}
.file-upload-instructions {
font-size: 12px;
color: #666;
margin-top: 8px;
}This will be the output in your single product page:
By following these steps, you can enable a file upload option on your WooCommerce single product page, validate the file, and manage it throughout the cart and order process. Creating a child theme ensures your custom functionality remains intact even after updating the parent theme.
Do you want custom development for your WordPress project, reach out to me on my Upwork profile below.
https://www.upwork.com/freelancers/~014fbc2f509606206f?mp_source=share
