Webhook Buttons for WooCommerce · How-to
Send a WooCommerce order to n8n with one click
Most n8n guides for WooCommerce start with the WooCommerce Trigger node and fire on every new order. That is right for some jobs. It is wrong for the ones where a person needs to look at the order first: a custom print job, a wholesale order that needs a credit check, a gift that ships to a different address than the invoice.
This page sets up the other kind. A button on the order screen. Staff open the order, check it, and click. n8n gets the order as JSON and does the rest.
You need:
- A WooCommerce store where you can install plugins.
- n8n. Cloud or self-hosted, either one. The free self-hosted version works.
- Ten minutes.
1. Make the n8n workflow
Create a new workflow. Add a Webhook node as the trigger.
Set it up like this:
| Field | Value |
|---|---|
| HTTP Method | POST |
| Path | woo-order (any word you like) |
| Authentication | None for now |
| Respond | Immediately |
Look at the Webhook URLs box at the top of the node. There are two URLs and they do different things. This is the step that trips most people up.
- Test URL ends in
/webhook-test/woo-order. It only works while you have clicked Listen for test event and the node is waiting. Use it once to see real data arrive. - Production URL ends in
/webhook/woo-order. It works all the time, but only after you publish the workflow.
Add one more node after the Webhook so you can see the data: Edit Fields (Set). Map the fields you care about. These are the paths the plugin sends:
| Field | Expression |
|---|---|
| order_number | {{ $json.body.order.number }} |
| customer_email | {{ $json.body.billing.email }} |
| total | {{ $json.body.totals.total }} |
| item_count | {{ $json.body.items.length }} |
| clicked_by | {{ $json.body.sent_by.name }} |
Everything the plugin sends sits under body. The full shape is order, totals, billing, shipping, items (a list), button, sent_by, sent_at.
Now click Publish (older n8n versions call this the Active switch). n8n confirms that the production URL is live.
Copy the Production URL. You need it in the next step.
2. Install the plugin and add the button
Install Webhook Buttons for WooCommerce from the WordPress plugin directory: Plugins > Add New, search for "Webhook Buttons", install, activate. It is free. There is no limit on how many buttons you make or how often you click them.
Go to Webhook Buttons in the admin menu.
- Click Add box. Give the box a title. The title shows as the panel heading on the order screen. "Fulfilment" is a good one.
- Click Add button. Give the button a label, for example "Send to n8n".
- Paste the n8n Production URL into Webhook URL.
- Under When clicked, pick Ask to confirm first and write a short confirmation message. Or pick Send right away if the button is low-risk.
- Tick Enable this button.
- Click Save all.
The yellow note under the URL field in the screenshot appears because this test store talks to n8n over plain http://. Order data includes names, emails and phone numbers. Use https:// for a real store. n8n Cloud gives you https by default.
3. Click the button on an order
Open any order. The box with your button sits in the right-hand column, under the WooCommerce panels.
Click the button. If you chose "Ask to confirm first", you get a small dialog.
Click Send. A green "sent" message shows in the corner, and the plugin writes an order note with the result and the name of the person who clicked. The note stays with the order, so anyone can see who sent what and when.
4. Check what arrived in n8n
In n8n, open the workflow and click Executions. The newest run is there.
(The older rows in that list are test pings from setting this up. Each click on the button makes one new row.)
Open the Webhook node in that run. The output shows the full order: order number, status, totals, billing and shipping address, every line item with its SKU and quantity, the customer note, and who clicked.
Open the Edit Fields node. The five fields you mapped are filled in from the real order.
From here you connect whatever you want after the Edit Fields node: Google Sheets, Slack, an email, your warehouse's API. That part is normal n8n work.
Fix: "Not sent. The webhook could not be reached."
If you see this message after clicking, and your n8n runs on your own server, this is almost always the cause.
WordPress refuses to send to private network addresses (10.x, 192.168.x, 172.16.x to 172.31.x, 100.64.x to 100.127.x which includes Tailscale addresses, and localhost) and to any port other than 80, 443 and 8080. This is a safety rule in WordPress itself, not in the plugin. It stops a bad plugin from reaching things inside your network. A self-hosted n8n on http://192.168.1.20:5678 hits both rules.
Two fixes. Pick one.
Fix A, the clean one. Put n8n behind a domain with https, for example https://n8n.yourstore.com. The n8n docs recommend a reverse proxy for production anyway. Then no WordPress change is needed.
Fix B, allow that one host. Add these two lines to a small plugin or your theme's functions.php. Change the address and port to yours.
add_filter( 'http_request_host_is_external', fn( $external, $host ) => $host === '192.168.1.20' ? true : $external, 10, 2 );
add_filter( 'http_allowed_safe_ports', fn( $ports, $host ) => $host === '192.168.1.20' ? array_merge( $ports, [ 5678 ] ) : $ports, 10, 2 );The first line allows the host. The second allows the port. Both only apply to that exact address, so the safety rule stays on for everything else.
n8n Cloud users never see this. Cloud URLs are public https on port 443.
Common questions
- Does it work with the new WooCommerce order storage (HPOS)?
- Yes. Both the new and the classic order screens.
- Can I send the same order twice?
- Yes. Click again. Each send writes its own order note.
- Who can click?
- Anyone who can edit orders. The Pro version can limit each box or button to chosen users.
- Can I add my own fields to the data?
- The Pro version sends custom order fields and lets you pick order meta keys. The free version sends the standard order data shown above.
- Where does the order data go?
- Only to the URL you paste in. Nothing else leaves your store. You choose the destination, so you are responsible for the customer data you send there.
Links
- Plugin on WordPress.org: https://wordpress.org/plugins/webhook-buttons/ (try it in your browser with the Live Preview button)
- Pro version: https://noblestrategies.dev/webhook-buttons
- n8n Webhook node docs: https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/