Running a WooCommerce store comes with a fair share of admin work. One Brisbane-based business came to us with a simple but critical need: Automate invoice generation and delivery based on Elementor form submissions—all while keeping the process tightly linked to their WooCommerce orders.
Here’s how we tackled it using Elementor Pro, WooCommerce, ACF, and a bit of custom development.
The Objective
- Capture additional order details via the Elementor form.
- Link the form to the original WooCommerce Order.
- Automatically generate a custom-designed PDF invoice.
- Email that invoice to the customer right after form submission.
- Update the order with a “Form Submitted” flag.
- Let the admin easily track form submissions in the backend.
Step 1: Auto-Populating the WooCommerce Order ID
On the custom Thank You page, we loaded the Elementor form and used this script to grab the order_id from the URL:
javascript
document.addEventListener('DOMContentLoaded', function() {
const orderId = new URLSearchParams(window.location.search).get('order_id');
document.querySelector('#form-field-wooIDcheckout').value = orderId;
});
Why?
So the form data stays tied to the WooCommerce order, making post-submission workflows clean and traceable.
Step 2: Creating a Custom Post on Submission
Upon form submission, we hooked into elementor_pro/forms/new_record to create a new post (e.g. custom-orders) and store the form data using ACF fields:
//php
$post_id = wp_insert_post([
'post_type' => 'custom-orders',
'post_status' => 'publish',
'post_title' => 'Order #' . $order_id,
]);
update_field('custom_price', $price, $post_id);
update_field('shipping_cost', $shipping, $post_id);
Step 3: PDF Invoice Generation
We used DomPDF behind the scenes to generate a branded invoice. The data from ACF fields was rendered into a template:
//php
$html = "<strong>Invoice for Order #{$order_id}</strong>";
$html .= "<p>Total Price: $price</p>";
$html .= "<p>Shipping: $shipping</p>";
// more details...
$dompdf->loadHtml($html);
$dompdf->render();
The generated PDF is saved and attached to an email to the customer.
Step 4: Email the PDF Automatically
Using wp_mail() and add_filter(‘wp_mail_content_type’, ‘set_html_content_type’), the email is sent as soon as the form is submitted.
//php $attachments = [ $pdf_path ]; wp_mail($customer_email, 'Your Invoice', $message_body, $headers, $attachments);
Step 5: Update WooCommerce Order Meta
We added a meta field to track submission status:
//php update_post_meta($order_id, '_form_submission_status', 'Yes');
This helps admins quickly filter which orders have completed the form process.
Step 6: Backend Admin Optimization
We modified the admin view using manage_edit-custom-orders_columns to add sortable columns like Order ID and Form Status, making tracking a breeze for staff.
Why This Setup Works
This custom setup reduces manual admin time, ensures customers get branded PDF invoices instantly, and keeps all data centralized in WordPress. For this Brisbane-based business, it meant:
- Less time spent emailing PDFs
- More control over order and client records
- Smoother customer experience
Want This Setup on Your Site?
If you’re a business owner running WooCommerce and using Elementor, we can implement this same solution tailored to your needs, with branding, layout, and automation all built in.
About Me
I’m Adil, a Melbourne-based freelance web developer. I help businesses automate, optimize, and scale with tailored WordPress, WooCommerce, and web app solutions.
Let’s discuss your next project. Book a Free Consultation
