Image Upload For WooCommerce Checkout Page Block

The plugin adds a file upload field to the WooCommerce checkout order summary block when using the Gutenberg block editor. This plugin is specifically designed for the new block-based checkout experience in WooCommerce, allowing customers to upload image files during checkout, which are then attached to the order.

= Features =

• Adds a file upload field to the WooCommerce checkout order summary block (Gutenberg blocks only)
• Designed specifically for the block-based checkout experience
• Customizable upload field text
• File preview before upload
• Automatic file attachment to order
• Display uploaded files in:
• Admin order edit page
• My Account order view
• Order received page
• Customer order email
• Admin order email

= Requirements =

• WooCommerce checkout must be using Gutenberg blocks

== Installation ==

1. Activate the plugin through the ‘Plugins’ menu in WordPress
2. Go to WooCommerce → Checkout Upload to configure the plugin settings
3. Ensure your checkout page is using the Gutenberg blocks editor

Usage

= Basic Setup =

1. After installation, go to WooCommerce → Checkout Upload
2. Configure the following settings:

• Upload Field Text: Customize the text that appears before the upload field
• Display Settings: Choose where to display the uploaded files

1. Make sure your checkout page is using the Gutenberg blocks editor

= On the Checkout Page =

The file upload field will automatically appear in the order summary block during checkout when using the Gutenberg blocks. Customers can:

1. Click the upload button to select a file
2. Preview the selected file before uploading
3. Upload the file to attach it to their order

Note : This plugin only works with the Gutenberg block-based checkout. It will not appear on classic checkout pages.

= Managing Uploaded Files =

Uploaded files can be displayed & viewed in several places :

• Admin Order Edit Page: View and manage files for each order
• My Account: Customers can view their uploaded files
• Order Emails: Files can be included in admin & customer order emails
• Order Received Page: Files are displayed after successful checkout

Files are stored in the WordPress media library at: /wp-content/uploads/order-summary-upload/

= Customization =

The plugin can be customized through the WordPress admin:

• Change the upload field text
• Control where files are displayed
• Manage file display in emails
• Configure file storage settings

Frequently Asked Questions

= Where can I customize the upload field text? =

Go to WooCommerce → Checkout Upload and use the “Upload Field Text” setting to customize the text that appears before the upload field.

= Where are the uploaded files stored? =

Uploaded files are stored in the WordPress media library and are attached to the order.

= Can I control where the uploaded files are displayed? =

Yes, you can control the display locations in the plugin settings under WooCommerce → Checkout Upload.

= Does this work with the classic checkout? =

No, this plugin is specifically designed for the Gutenberg block-based checkout experience and uses react. It will not work with the classic checkout page. Use this plugin with the checkout rendered by classic woocommerce checkout shortcode.

Video Demo

Shows the checkout page file upload image added to the order details are checkout complete and the plugin settings enabling display of the uploaded image in 5 different locations.

Display Image In :

• Admin Order Edit Page
• My Account Order View
• Order Received Page
• Customer Order Email
• Admin Order Email