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
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.
Leave a Reply