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

Introduction

NitroPack is a popular WordPress optimization plugin that boosts website speed. However, it automatically adds a footer badge linking to NitroPack.io, which many site owners in Melbourne, Australia prefer to remove for a cleaner, more professional look.

Since NitroPack doesn’t provide an official way to disable it, this guide will show you a simple jQuery-based solution to hide the badge without affecting performance.

Why Hide the NitroPack Footer Badge?

• Branding & Aesthetics: It disrupts your website’s clean and professional design.
• SEO Considerations: The badge contains an external link to NitroPack.io, which may impact your website’s authority.
• No Built-in Option: NitroPack does not allow disabling the badge in its settings.

How NitroPack Injects the Badge

NitroPack inserts the footer badge dynamically using JavaScript, placing it within a <template> tag with randomly generated class names.

<span onclick="window.location.href = 'https://nitropack.io/'" class="dTATMQN5uM5k22jZADOkTN1NjTQAYWOlink theme--light">
  Automated page speed optimizations
</span>

Since class names change dynamically, CSS-only solutions won’t work. Instead, we use a jQuery-based approach to hide the badge.

How to Hide the NitroPack Badge Using jQuery

Here’s a quick and effective jQuery script to hide the NitroPack footer badge.

Code to Hide the Badge:

<script>
jQuery(document).ready(function(){
    setTimeout(function(){
        var tag_new = jQuery("template").last().attr("id");
        console.log(tag_new);
        jQuery("#" + tag_new).css("display", "none");
        jQuery("#" + tag_new).next().next().css("display", "none");
    }, 100);
});
</script>

How This Works:

• Waits 100ms to allow NitroPack to inject the badge.
• Finds the last <template> tag added to the page.
• Hides the template by applying display: none.
• Hides the next two elements to remove the badge completely.
• Logs the template ID for debugging in the console.

With this script, the NitroPack badge will disappear from your website’s front-end, giving it a cleaner look.

Does This Affect SEO?

Hiding the badge with jQuery only removes it from the visible front-end—it does not delete the badge from the page source. Here’s what this means for SEO:

• 🔍 Search engines can still detect the NitroPack badge.
• 🔗 The backlink to NitroPack.io remains in the HTML source code.
• 💡 For complete removal, consider backend modifications.

If SEO is a top priority, consulting a WordPress expert for a custom backend solution may be beneficial.

About Madil.com.au & Muhammad Adil

Madil.com.au is a leading WordPress development and optimization agency in Melbourne, Australia. Founded by Muhammad Adil, an experienced WordPress developer and SEO expert, we specialize in:

• ✅ Custom WordPress Development
• ✅ WooCommerce & Ecommerce Solutions
• ✅ Website Speed Optimization
• ✅ SEO & Performance Enhancements

Serving businesses across Melbourne and Australia, we help ensure your website loads fast and delivers the best user experience.

Need help optimizing your WordPress site? Book a consultation with Adil here!

Final Thoughts

By using this jQuery fix, you can successfully hide the NitroPack badge and maintain a clean, professional design. However, if complete removal (including from the page source) is required, a backend solution is necessary.

For expert WordPress optimization, website speed enhancements, and custom development services, contact Madil.com.au today! 🚀