Checkout changes for CS-Cart 2.1. First draft.

[COLOR=#000000]Hi!



One of the current task in progress here at CS-Cart is checkout.



Be sure, we understand how it’s important for your store that the checkout process is smooth and clear for any customer. And CS-Cart team is working hard now to deliver the best checkout solution to all CS-Cart users in a new release.



Below you will find the first draft of checkout changes to be made in CS-Cart 2.1. Let us know what you think and feel free to share your opinion.





[SIZE=3]Four standard steps for both types of checkout will be used:[/SIZE]



[SIZE=3]1. Sign in: three choices - Sign in/Register/Guest checkout[/SIZE]



Register choice: displays fields required for account registration only - Username(if used in the store)/E-mail/Password+confirmation.



Checkout as guest choice: jumps to the Address step



Sign in choice: jumps to the Address step where the address details are filled with the profile details entered previously.



[SIZE=3]2. Address [/SIZE]



Shipping address section goes first, then Billing as shipping OR Billing address section first, then Billing as shipping. Sections order is defined in the new store setting.



Single billing address section is displayed when only electronic goods are ordered.



[SIZE=3]3. Shipping and payment [/SIZE]



Same logic as it is currently at the multi-page checkout in CS-Cart. But payment details such as credit card data are to be entered at this step too - same as it is now at the Payment step of the one-page checkout(sorry for the intricate explanation :)).



Shipping method section will get the “Change shipping address” link nearly. It will take customer back to the Address step.



Another change: Gift Certificate/Coupon code/Pay with points options will be also displayed at this step below or near to the Payment method section.

[SIZE=3]

4. Summary/Review order/Place order (suggest the best name for this step, please)[/SIZE]



Similar to the current Place order step at the multi-page checkout but extended with the Cart content summary(products table and totals section).



Product table will not contain product options data, no link to the product details page, no product code. This page will also contain links to the corresponding previous section(like edit shipping, edit payment etc.) so that customer can alter the necessary order details quickly.



UPD.: Product options info will be kept on the summary page.



================



[SIZE=3]Various changes:[/SIZE]



Contact information section will not be used/displayed at checkout anymore. Matching Contact information fields will be copied from the Billing/Shipping address sections automatically during checkout. Contact information section will be displayed on the Editing profile or Register pages only.



Checkout page title will read as “Secure checkout” with the small lock icon near to this text.



Size of the Notification box(which is currently displayed at the top-right corner of the page) will be increased and its position will be moved to the center of the screen for the one-page checkout and to the space below the checkout progress bar for the multi-page checkout. Any notification box will disappear only when customer closes it .



One-page checkout: the Cart items section on the left will be completely removed. Cart items and totals will be displayed on the fourth Summary step of checkout instead. And the payment options like Gift Certificate, Coupons and Point will be moved to the Payment method section of the third checkout step.



Phone field will be added to Billing/Shipping address as standard.



[/COLOR][COLOR=#000000]UPD.: A new store setting will be added - “[/COLOR][COLOR=#000000]Redirect customer to the Cart contents page first when he clicks on any Checkout button/link in the store”.[/COLOR][COLOR=#000000] It will be enabled by default.[/COLOR][COLOR=#000000]





[SIZE=3]Suggested changes:[/SIZE]



Multi-page checkout: display cart summary on every page below the “Proceed to the next step” button. This section will contain a link back to the Cart contents page so that customer can go there to update something in his cart. What do you think? Will it help?



[/COLOR][COLOR=#000000]UPD.: Rejected by many votes.



[/COLOR][COLOR=#000000]

[SIZE=3]Small changes:[/SIZE]



One-page checkout: step heading area will be completely clickable with the small hint reading “Change”.



One-page checkout: “Save” button will read “Save and continue” instead, plus its style will be changed to the main action button style - orange button in default skin.



One-page checkout: “Edit” link in the step headings will read “Change”.



One-page checkout: customer details displaying on the inactive steps will be restyled to be more visible and noticeable.





[SIZE=3]Any and all comments are very welcome! :slight_smile: [/SIZE]



Basing on the first wave of your feedback we will compose several sketches and publish them here for further discussing.



Looking forward to hearing from you!



UPD.: First screenshots of the new checkout added.







[/COLOR]

checkout_address.png

checkout_review.png

checkout_register.png

checkout_payment.png

checkout.png

[COLOR=#000000][SIZE=3][quote name=‘admin’]4. Summary/Review order/Place order (suggest the best name for this step, please)[/SIZE]



Similar to the current Place order step at the multi-page checkout but extended with the Cart content summary(products table and totals section).



Product table will not contain product options data, no link to the product details page, no product code. This page will also contain links to the corresponding previous section(like edit shipping, edit payment etc.) so that customer can alter the necessary order details quickly.[/quote]



#1 Title = “Submit your order”

Geographically I believe “Submit” is preferential to “Place”



In my case product option(s) data is REQUIRED. We sell lighting products with multiple finishes, sizes and accessories. Without the information being displayed as ordered I can guarantee we’ll have a lot of unhappy customers calling us.



INCLUDE

→ PRODUCT CODE

→ PRODUCT OPTIONS



I don’t believe a link back to product details page is required.


[quote name=‘admin’]

[/COLOR][COLOR=#000000][SIZE=3]Various changes:[/SIZE]



Contact information section will not be used/displayed at checkout anymore. Matching Contact information fields will be copied from the Billing/Shipping address sections automatically during checkout. Contact information section will be displayed on the Editing profile or Register pages only.



Checkout page title will read as “Secure checkout” with the small lock icon near to this text.



Size of the Notification box(which is currently displayed at the top-right corner of the page) will be increased and its position will be moved to the center of the screen for the one-page checkout and to the space below the checkout progress bar for the multi-page checkout. Any notification box will disappear only then customer closes it .



One-page checkout: the Cart items section on the left will be completely removed. Cart items and totals will be displayed on the fourth Summary step of checkout instead. And the payment options like Gift Certificate, Coupons and Point will be moved to the Payment method section of the third checkout step.



Phone field will be added to Billing/Shipping address as standard.

[/quote]



AGREED! - 4th Payment option I believe should allow the following to be displayed on submit.



Coupon : 10% Off your order!

Gift Certificate: Payment Authorized! Remaining Balance after this order: $x

Points: Pay with Points [Tick/Untick]


[quote name=‘admin’]

[/COLOR][COLOR=#000000][SIZE=3]Suggested changes:[/SIZE]



Multi-page checkout: display cart summary on every page below the “Proceed to the next step” button. This section will contain a link back to the Cart contents page so that customer can go there to update something in his cart. What do you think? Will it help?[/quote]

I agree, if they can see their shopping cart it provides visual incentive to reaffirm/deny their need for the order.



In my opinion, I would remove all distractions except for the total amount payable.

[/COLOR]

This all sounds good.



1- I would like to see the option for unregistered customer to become registered at the final step of checkout by a simple check box.I think this was talked about and I thought it was going to be implemented.



2- What happens after the order is submitted ? I like to see an order confirmation instead of invoice with the option to print invoice in the order confirmation page and in the back end as well as being able to email an invoice to the customer.



3-I like the way the products view at checkout in the product table that we have now, but if you need to make changes I think the product options should still be visible.

[quote name=‘admin’]

  1. Sign in: three choices - Sign in/Register/Guest checkout



    Register choice: displays fields required for account registration only - Username(if used in the store)/E-mail/Password+confirmation.



    Checkout as guest choice: jumps to the Address step



    Sign in choice: jumps to the Address step where the address details are filled with the profile details entered previously.

    [/QUOTE]



    Can you allow for the option to register for the account on the Order Review page or somewhere near the end of the checkout?



    -OR-



    Make this step two choices:
  2. Sign in: customer signs into their existing account and proceeds as you mentioned.


  3. New Customer: Customer selects this if they do not have an account. A description makes it clear that you don’t need an account to proceed and you will have the option of creating one later. Then on the Address Step, have an area with a checkmark box that says: Yes, I’d like to create an account and under it a password field where the customer can enter a password if they decide to create an account.



    -OR-



    Ideally, I’d rather that Step 1 and Step 2 were all one step (The less confusing steps the better for customers completing checkout).



    Similar to this functionality (note: on this site the billing address is on the payment page and can be auto-filled with the shipping address. Keeping billing and shipping on the same step is fine though): Checkout Idea Image




[quote name=‘admin’]

4. Summary/Review order/Place order (suggest the best name for this step, please)[/SIZE]

[/QUOTE]



I will be renaming this section name to: Review & Submit Order



================

[quote name=‘admin’]

[SIZE=3]Suggested changes:[/SIZE]



Multi-page checkout: display cart summary on every page below the “Proceed to the next step” button. This section will contain a link back to the Cart contents page so that customer can go there to update something in his cart. What do you think? Will it help?

[/QUOTE]



Please make this optional if you do include it. I do not want the cart summary on each page of the checkout. It is bad practice to give the customer repeated opportunities to decide they don’t want an item or to back out of purchasing items. Impulse buying is a huge factor in driving sales for most industries.

[quote name=‘adodric’]Can you allow for the option to register for the account on the Order Review page or somewhere near the end of the checkout?[/quote]



Thanks for this suggestion.



Actually, such an option to register an account for guest customer will be added on the order landing page. Please refer to this post [URL]http://forum.cs-cart.com/showpost.php?p=78104&postcount=32[/URL] - this idea has been accepted and will be implemented in 2.1 as a part of the “Landing page” feature.



Will it work or you think that this should be put on the Review order step as well? More opinions regarding this would be very helpful.

[quote name=‘admin’]Thanks for this suggestion.



Actually, such an option to register an account for guest customer will be added on the order landing page. Please refer to this post [URL]http://forum.cs-cart.com/showpost.php?p=78104&postcount=32[/URL] - this idea has been accepted and will be implemented in 2.1 as a part of the “Landing page” feature.



Will it work or you think that this should be put on the Review order step as well? More opinions regarding this would be very helpful.[/quote]



Making it so guests can register on the landing page will work. That is probably a better location than the Review Order step page on the 3 step checkout.

[quote name=‘admin’]Actually, such an option to register an account for guest customer will be added on the order landing page. Please refer to this post [URL]http://forum.cs-cart.com/showpost.php?p=78104&postcount=32[/URL] - this idea has been accepted and will be implemented in 2.1 as a part of the “Landing page” feature.



Will it work or you think that this should be put on the Review order step as well? More opinions regarding this would be very helpful.[/QUOTE]

I think the option on the landing page should suffice. The faster you get to the “Submit” button, the better: Get the order, then worry about trying to sign the user up for an account.



Overall, this looks very good. I look forward to seeing your mock-ups.

In the Summary page (and anywhere else totals are shown), please include only those items that sum to the total - this block should simply recap how the total due was calculated:

[QUOTE]Subtotal

  • Order discount (not any discounts included in the subtotal)
  • Shipping
  • Taxes

    Order Total
  • Reward points used
  • Gift certificate

    Total due[/QUOTE]



    This block should not include reward points earned, discounts included in the subtotal (product discounts) or any other informative data. That data should be displayed in a separate block which would include reward points earned and reward points balance, and total discounts information (including both product and order discounts) - something like 'You saved $xxx.xx on this order". It could also include the gift certificate balance. This information could also be displayed on the order landing page and invoice.



    Bob

Why does this feel your trying to re-invent the wheel here with checkout? There are so many good site examples from which people should giving feedback about what sites they like and why imo. Stop trying to make the checkout process fancy with ajax/jquery (eg. stupid estimate shipping). Customers want to see the right information at the right time, cs-cart does the opposite with poor assumptions throughout the entire checkout process today. Plus it’s nearly impossible to modify it without a ton of work.



Go buy some products from newegg.com, zipzoomfly.com, shoes.com, bhphoto.com . Nice view of products in cart, easy to determine shipping costs with JUST the zipcode, easy to enter promo codes, credit card info in one place, confirmation pages prior to submitting order.

Bitmanx63,

Hi, wondering why you have [QUOTE](eg. stupid estimate shipping)[/QUOTE]?

The lack of having an estimated shipping before checking out is a major complaint from customers and has been identified as a cause of cart abandonment.

Just wondering what your thoughts are on this.

I once thought it was a good idea to just have country and zip code, until I set up shipping with locations based on states. You can’t just use a zip code in this situation.

Thanks,

Bob

[QUOTE](eg. stupid estimate shipping) [/QUOTE]



I should have clarified this, definitely agree the need for estimated shipping in the view cart page. But that field should be clearly seen on the page, I shouldn’t have to click the “estimate” link to have it pop open the fields to input zip/state/country.



The point being information shown at the right time. The same holds true for the line items when viewing the cart, not enough detail by default is shown for each line item. Case in point, I have product A with 2 attributes, let’s shoes. I want to order two pairs so one in size 4 and another in size 6. When I view my cart, I want to see that clearly without having to click each item for more info for that cart item.



Everybody does the checkout a differently but there are clearly some best in class examples.

[quote name=‘admin’]

[SIZE=3]Suggested changes:[/SIZE]



Multi-page checkout: display cart summary on every page below the “Proceed to the next step” button. This section will contain a link back to the Cart contents page so that customer can go there to update something in his cart. What do you think? Will it help?

[/QUOTE]

One of the major flaws with the current multi-page checkout is that it doesn’t give the customer a cart summary anywhere. While I agree with the others you don’t want to give the customer the opportunity to back out, you do need to have the cart summary somewhere. Instead of having it on every page, can it just be on the last step when they confirm and review their order? This is how most other e-commerce sites do it. Wouldn’t most people agree with this?

[quote name=‘ogia’]One of the major flaws with the current multi-page checkout is that it doesn’t give the customer a cart summary anywhere. While I agree with the others you don’t want to give the customer the opportunity to back out, you do need to have the cart summary somewhere. Instead of having it on every page, can it just be on the last step when they confirm and review their order? This is how most other e-commerce sites do it. Wouldn’t most people agree with this?[/QUOTE]

I agree that it needs to be only on the last page. I have been trying to understand why people would want it included in every checkout step but the answer simply eludes me.



bitmanx makes a good argument: give the customers the information they need when they need it and otherwise keep it simple. This is one of the reasons I feel so strongly about not having extraneous information in the totals block: it turns what should be a quick order into a puzzle.



Bob

Looks good… can we have an option in the Admin settings to disable the “Shipping Address” so the customer can clearly see we will only ship to the Billing address? I had to go into the template and remove the code completely because people were finding a workaround to change the shipping address.



I know many people ship to alternate addresses however I choose not to. It would just make it easier to have an Admin option to do it.

[quote name=‘jobosales’]I agree that it needs to be only on the last page. I have been trying to understand why people would want it included in every checkout step but the answer simply eludes me.



bitmanx makes a good argument: give the customers the information they need when they need it and otherwise keep it simple. This is one of the reasons I feel so strongly about not having extraneous information in the totals block: it turns what should be a quick order into a puzzle.



Bob[/QUOTE]



I also agree that the cart summary should be in the last page for multi page checkout. Having it on each page would only serve as a distraction from what the customer should be doing, ie. filling out his billing and shipping info. Having it on the last page allows the customer to review the order and leaves them with the assurance that they are ordering what they want.



For multi page checkout I would prefer to move the "Select shipping method " to the last step, ie the review and submit order screen. The logic behind this is that customers may want to change the shipping method (either faster or slower) after they see the order total. If they think the order total+shipping is too much, they may want to choose a lower cost shipping method and compare it with the new order total, and vice versa, if they feel that they the total is less than they expected, they may want to choose faster shipping. This is the way Amazon and Prostores works. With the current CS-cart design, a customer would have to click on “Change” for shipping method, and go back and forth to compare the total after shipping, which would only increases the probably that they will get frustrated and leave.



Also for multi page checkout, I think it would be better if they customer could somehow see the order total without have to scroll down. Perhaps this can be done by moving the less important components such as the text box to leave notes to the very bottom.



I

After rereading what I wrote, I realize I may have misstated what I meant about the "Select shipping method ". It would be okay to keep the “Select shipping method” in the third step, but there still should be a way to easily change the shipping method in the last page, without having to go back to another page. The reasons for this I’ve already mentioned.

I agree that the cart confirmation should be on the last page, but this is if the first page is the cart page. Right now, without making modifications, checkout bypasses the cart page.

I need customers to be able to view and edit the cart before going to checkout. Some products have many text fields for personalization and gift card text. The customer should be able to make changes if they see they made a typo or want to change the wording.

If the cart is only on the last page, then it’s too late, in most cases, to change what they entered into the text fields/areas.

Bob

I agree with Bob about making sure the cart page is the first page then showing it again on the Summary/Submit Order as verification with all charges listed. I changed my multi-page checkout to go to the Cart page before beginning the checkout process and have not had any issues at all. I think customers should have the opportunity to verify their items and options before entering all of their personal information then see a summary of their order at the end with their items, options and personal information completed.



I’m looking forward to these changes from CS-Cart. Anything to make customers happier is a great thing!

[quote name=‘scase’]I agree with Bob about making sure the cart page is the first page then showing it again on the Summary/Submit Order as verification with all charges listed. I changed my multi-page checkout to go to the Cart page before beginning the checkout process and have not had any issues at all.[/quote]



Accepted. [COLOR=#000000]A new store setting will be added - “Redirect customer to the Cart contents page first when he clicks on any Checkout button/link in the store”.[/COLOR][COLOR=#000000] It will be enabled by default.[/COLOR]

[quote name=‘bitmanx63’] (eg. stupid estimate shipping). Customers want to see the right information at the right time, cs-cart does the opposite with poor assumptions throughout the entire checkout process today. [/QUOTE]



Customers like to see how much they are going to pay for shipping before they proceed, I certainly do. The estimate shipping is a great idea but it shouldn’t be a text link that is easy to miss.



Shipping estimator doesn’t even show if shipping is free - but the customer doesn’t know it cos there’s no reference to shipping costs in the subtotal.



Could CS cart show a default shipping charge, dependant on whether you’re using weight/order/no items to calculate shipping. As soon as the items are added to the cart it is working out how much shipping would be. Don’t know if cs can do this, other carts seem to. Perhaps there would be a need to have a default location setting.