Enhanced cart flow for WooCommerce documentation

General settings

    1. Getting started – Disabling shipping costsBefore proceeding you must first make sure one shipping setting is disabled. Head to Shipping options page found at Woocommerce>>settings>>shipping>>shipping optionsOnce there make sure that Hide shipping costs until an address is entered is unchecked as in the sample image belowOnce saved come back here and save your settings

  1. The general options The first thing you’ll want to do is visit the Enhanced Cart Flow >> Enhanced Cart Flow general settings page. In here you’ll find the general behaviour of the plugin
    • Fixed cart on scroll desktop Enabling this option will make the cart table, eg. the contents of the cart and their total, stick in position as the user scrolls down the page
    • Pixels from the topThis option is tied into the above option. Here you can decide how many pixels the cart will stick from the top. Generally this is the height of the sticky header. As you scroll down the page the cart will begin to move up until it hits the pixel height from the top then it will stay in position
    • Table background colour By default the table has a transparent background, so you’ll need to set a colour using our easy colour picking tool. This will apply the colour to the background of the cart so that other elements, such as cross sells and other text don’t show through it and make it look messy
    • Reorganise Checkout page on mobile As we’ll be collecting the shoppers details one step sooner than normal, it’s a good idea to enable this option to help the shopper avoid needless scrolling. This option will move the form field, which would already be filled, below the cart table and payment buttons, saving them a lot of scrolling and making the purchase process faster for mobile phone users
    • Make cart table fit on desktop You may find that on some themes and page layouts that the cart table will overflow into the form field. This is an accident of old and unresponsive html tables. If you should find that this is happening on your site enabling this option will remove the image, which is responsible for a lot of the table space, and make the other table rows thinner, saving much needed space. This only applies to desktops as all modern themes would have a solution in place for smaller screen devices such as mobiles
    • Display products next to the cart form (desktop) and below on mobile The cart page is the ideal page to upsell and cross sell more products to increase cart size. Ufortunately, many stores don’t make use of this feature in WooCommerce. Selecting one of the options from the dropdown will place 4 products from the selected options next to the form on a desktop and below it on a mobile. The options available are
      • None
      • New products
      • On sale products
      • Featured products
      • Popular products

      Selecting none will mean that only built in cross sells will be visible next to the cart.

    • Submit button behaviour This option is one of the most important options on the site and is a new option added in version 2.0This option performs one of 2 possible actions. If the page is set to reload the existing page the user will enter their details and click submit details. The form will submit their details to the form then show a new button with a proceed to checkout button. This results in one additional click than normal, but is a clear signal of what to do.Option 2, redirect to checkout, is the recommended option. When this option is enabled the user will submit their data then be redirected to the checkout without any further button clicks. All details they entered will be stored on the checkout pageBoth options prevent the shopper from proceeding further until their details have been entered (part of what the goal of the plugin is)
    • Show notification displaying number of fields that require filling This option will show a small green notification on the page for a few seconds telling the shopper how many fields they are required to fill before proceeding to the next step. The number will change depending on which fields you set to be requiredOnce the fields have been completed click save. It may appear as nothing is happening, but you’ll see a popup saying the settings have been saved. This is a new feature added in version 2.1.4
    • Save customer details using jQuery instead of php By default the fields are saved to a PHP session. This requires a call back to the server and again when the page loads again. The slower the server and further away it is, the slower it it. Enabling jQuery will store the session in what’s known as a session storage. These are stored in the users tab directly, which means they are almost instantly loaded. There will be no drop outs or lingering connections.What are the catches?
      • Not all browsers have javascript enabled. At the moment roughly 1.3 percent of global browsers have javascript disabled. Should this be a concern? No Your website requires javascript to properly operate. Any user with javascript not enabled will find it difficult to shop anyway. It’s for this reason we recommend enabling

      Once the fields have been completed click save. The settings will save using Ajax. This is a new feature added in version 2.1.4

  2. Address auto-complete The second menu option on the ENhanced Cart Flow settings section is the address auto-complete settings. I’ll keep this short as there are 3 videos on the page to help you set this section up.The address auto-complete section helps you and your shoppers avoid time consuming mistakes in their addresses by comparing them with a library of billions of addresses from all around the world. This section gives you 2 options for address auto-complete. Algolia Places or Google Maps
    • Algolia Places Algolia Places is a freemium service for address auto-completes. For no cost you can conduct tens of thousands of searches a month. All you need to do is add their keys and you are under way. Don’t worry, we have a step by step video on the settings page to help you
    • Google Maps Google Maps needs no introductsion. It’s without a doubt the leader in global maps and addrsses today. Unfortunately the maps api is no longer entirely free. It offers up to $200 worth of usage before billing kicks in and then pricing plans start to take effect. The average small to meduim online store should get by for between $0 and $20/mWhich to use? Algolia is the best option for anyone who doens’t want to spend money on auto-complete, but they don’t have as many addresses stored as Google, and users often have to enter more key presses than they would with Google Maps. Google Maps on the otherhand is a pais service, but highly accurate, using Geo-location to pinpoint as close as possible to the shoppers address, allowing them to select their address with as few as 2 or 3 key strokes. Budget and affordable: Algolia Quality and accurace: Google
  3. Cart form fields The third menu option is the form builder page. At the moment you are unable to reorder the form fields, but you can decide what is required and what is shown. It’s important to note that at this stage any settings here will have no impact on the checkout page. For instance, if you set the phone as optional here and it’s still set as required on the checkout page, the checkout page will prevent payment until the phone field is filledTo help to get through this page faster, at the very top of the page we have one checkbox that will allow you to enable all recommended options in bulk. This will deploy the minimum number of fields required for the speediest and most reliable checkout experience
      • What are the recommended fields that are enabled with the top checkbox? (in order of appearance on the form)
      • Display login form on cart page
      • Billing email
      • Billing phone
      • Billing first name
      • Billing last name
      • Address auto complete
      • Billing address 1
      • Billing city
      • Billing postcode
      • Billing country
      • Billing state
      • Ship to a different address
      • Shipping first name
      • Shipping last name
      • shipping address 1
      • Shipping city
      • Shipping postcode
      • Shipping country
      • Shipping state
      • Remember me
      • The final option is hide field labels which uses placeholders instead

      Why display only these fields? Simple. Keep it short and easy. An overcomplicated checkout form is a reason for users to leave. Using the bare minimum number of fields possible means less to fill in and more chance of a sale. Should they require to have it shipped to a business or shop front most people will leave a note advising of such in the optional order notes at the bottom of the form. All up there will be 10 fields visible with the address auto-complete. If the shopper uses the address auto-complete field the shopper only needs to fill in 5 fields before proceeding to checkout and payment. By placing the email and phone at the top of the form along with their name the form is separated into a contact section and address section, making it cleaner and easier to follow

  4. User contact field The user contact field is a settings page that allows you to engage with the user in multiple ways, from time triggered prompts to popup boxes and live chat. Let’s explore these options further
    • Enable helper contact form This option performs several functions all at once. When enabled it will display a small box (desktop) or bubble (mobile) in the lower left corner of the screen. After a predefined time perion a bell notification will appear on the box and if no user action has been detected after a further delay it will slide up revealing a simple yes/no question. Do you need help. If the shopper selects yet a contact form will popup as a modal overlay. they can contact you there using their details. The admin email address will receive an email with the subject {users first name} needs assistance making a purchase. If they select no the box closes and will not bother them again.
    • Third party live chat code Live chat is a fairly important and popular aspect of selling online, but not all stores use it. Either they don’t know how to add it or don’t want to add yet another plugin to their website. This option aims to sove that.When you sign up for live chat you will be given a bit of code and they will likely tell you to place is before the </ body> section of the website. If you get that code and place it in here it will place the code directly where they want it, and you’ll have easy live chat, without yet another plugin to clutter up your store.Who do we recommend?
      Tawk.to> is a popular, reliable free live chat provider. They have an app available for iOS and Android as well as their website interface
      Pure Chat is another popular and free live chat provider. Live Tawk.to above, they have phone apps and a website interface.
    • Highlight fields delay This option will highlight any required fields when the user is idle for a set amount of time. You can set how lng the user is idle for before prompting them with a highlighted field
    • Notification bell delay This option sets how long the user is idle before the bell appears on the contact form helper box
    • Open helper delay This sets how long the user is idle before opening the hlper box
    • Helper box colour Sets the helper box colour. Default is blue
  5. Account In here you’ll find your plugin account details as well as the api key
  6. Contact Us The contact us page

Leave a Comment

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