Copy the shipping (or billing) address to the clipboard for pasting in another application.
A WooCommerce Community member asked how to add a button to the order admin page to copy the shipping address to the clipboard:
I am looking for a plugin or code snippet to place a button on the individual order screen to copy the name and shipping address of a customer to the clipboard.
This is a niche request and one that was fun and educational to develop. I had seen numerous sites with ‘Copy to clipboard’ functionality so I guessed that it would not be too hard – a few web searches returned numerous examples that I was able to use as the base for my code.
Adding the clickable icon
Browsers support clipboard writing when part of a user action (click, keydown etc) so I needed to add a button to the Edit Order page. The original question showed a screenshot with an icon beside the Shipping address so I started digging into the WooCommerce source code.
In woocommerce/includes/admin/meta-boxes/class-wc-meta-box-order-data.php I found the ‘woocommerce_admin_order_data_after_shipping_address‘ action and it is passed the $order object.
The callback function produces some JavaScript code that inserts an icon to the right of the ‘Shipping’ label. When clicked this copies the order shipping address to the clipboard. If the order does not have a shipping address (e.g. when it contains only virtual products) the billing address will be copied.
I used the ‘external’ icon from Dashicons. That can be easily changed if you think it’s not clear for your website. I had to use the nth-child() selector to insert the icon in the right place.
When the address is copied a ‘copied‘ class is added to the icon’s element. This adds the word ‘Copied’ beside the icon (via the :after selector), with a timeout function removing it 4 seconds later.
That’s it.
Leave a Reply