Add Image Upload Field To WooCommerce Checkout

The PHP code in this download folder enables you to add a image upload field to the checkout page in WooCommerce conditionally. The code :

• Works conditionally based on the selected payment option. By default its coded to work with the credit card payment selection using woocommerce_payments.
• Adds an image upload field to the billing fields or in any other hook position including the before submit button.
• Displays an error message when your customer tries to checkout without uploading an image I.D.when using the credit card.
• Saves and displays the image on the checkout page and order details admin page in the backend.

Saves a copy of the image in a special folder named checkout_image_ids inside your WordPress > wp-content > Uploads folder.

When you click on the gallery images above, you’ll see the image upload field added below the payment method radio buttons before the place order button only when the Credit card / debit card method is selection otherwise its hidden.

Once the image is uploaded, it’s also added on the WooCommerce > Orders > Order Details screen for admins.

Installation

There’s 3 basic steps :

Step 1 In the functions.php file, search for woocommerce_payments on lines 167, 202 and 268 if you want to make the code work with another payment i.d like stripe. The code will work with any payment method using the payment id. If you want to use the code with woocommerce payments, skip step 1.

Step 2 Copy the PHP code to the end of your child themes functions file or custom functions plugin.

Step 3 Upload the upload.js file to your child themes js folder.

You can then create a new folder inside your uploads folder named checkout_image_ids