Adding Same as Billing Functionality to your Shopping Cart

Making the consumer experience online as easy as possible is essential to your success. Part of that requires adding additional functionality, where possible, that spares your users burdensome activities.

One common web design element that saves your users time is the "Same as Billing" or "Same as Shipping" (depending upon your priority) checkbox that is found on most online shopping carts. This checkbox, when selected, will synchronize the data contained in both sets of fields. This helps prevent your users from having to fill the same information twice.

In this article, we will teach you how to add "same as billing" functionality to your shopping cart which will populate the users billing info into their shipping info form. Below is the HTML, CSS, and JavaScript required.

Step 1 - ship-bill.html

Copy and paste the HTML below into a file called ship-bill.html

Step 2 - ship-bill.css

Download the CSS below and include it in your web page

Step 3 - ship-bill.js

Copy and paste the code below into a file called ship-bill.js

Step 4 - Add the includes below to your web page

In this tutorial we went over how to improve the user experience by adding "same as shipping" functionality that fills out an entire form for the active user by populating data from a previous form. This eliminates redundancy on the part of the user and makes for a faster, higher converting shopping experience! Take the design and make it your own!