• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Damien Carbery - Website Development

Getting You Online & Keeping You There

Getting You Online & Keeping You There Get Started
  • Home
  • Services
  • Maintenance Plans
  • Portfolio
  • Blog
  • About Me
  • Contact
You are here: Home / Website Development / Copy WooCommerce order shipping address to clipboard

Copy WooCommerce order shipping address to clipboard

Published: November 28, 2022 (Updated: May 12, 2023)

Copy the shipping (or billing) address to the clipboard for pasting in another application.

Update 12 May 2023: Based on Steve’s request I updated the code to allow copying the billing email address and billing phone number.

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.

Update: I reworked the code to allow copying the email address and the phone number.

The code

Related Posts

Change WooCommerce checkout field order

Changing the WooCommerce checkout fields display order is much simpler and more robust with the use of a 'priority' element in the field definition.

WooCommerce REST API authentication

Use Oauth 1 and the WooCommerce REST API to retrieve order details.

Screenshot from the Order page with the product name without a link.

Disable product link in WooCommerce Order page

Disable link to product in WooCommerce Order page (in My Account area).

Reader Interactions

Comments

  1. Stephan says

    May 12, 2023 at 2:04 pm

    Greetings. This is a very useful code, it helps to speed up the processing of orders. Tell me, can you change it so that the same “copy” buttons are near the client’s email and phone?

    Reply
    • damien says

      May 12, 2023 at 3:12 pm

      @Stephan – Thanks for the request. I have updated the code to add it. The icons are on the right of the email address and phone number.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Blog Categories

  • Being Green
  • Food
  • Grammar
  • Just Strange
  • Laziness
  • Personal
  • Portfolio
  • Race Reports
  • Shudder
  • Typo
  • Website Development
  • WooCommerce Tips
  • Facebook
  • Twitter

Copyright © 2013–2023 Damien Carbery · Using Genesis Framework · Privacy Policy