Amrit Anandh

Kuppuraj

Midhu

Cartimize

aghilesh

After you have invested vast resources into building your store and customer acquisition through pay per click campaigns etc., it seems almost unbearable that 69% of users – after having added items to their cart – then choose to abandon their purchase.
Why is it that this many orders are abandoned? And what exactly can online retailers like yourself do to improve this sad state of affairs?
<blockquote>
All design and user-experience decisions are based on 134 checkout-specific guidelines distilled from Baymard Institute‘s 54,000+ hours of large scale e-commerce UX research. The very same research used by leading e-commerce companies like Amazon, Nike, Walmart, Target, Google, Macy’s, and Office Depot to name a few.
</blockquote>
Implement The Best WooCommerce Checkout UX and gain as much as a 35% increase in conversion rate, in under 5 minutes.
Live Demos – 
* <a href="https://demo.cartimize.com/?add-to-cart=15&cartimize_redirect=1" rel="nofollow ugc">Simple product</a> 
* <a href="https://demo.cartimize.com/?add-to-cart=23&cartimize_redirect=1" rel="nofollow ugc">Virtual product</a> 
* <a href="https://demo.cartimize.com/?add-to-cart=15&cartimize_redirect=1&cartimize_custom_css_redirect=1" rel="nofollow ugc">Custom-styled checkout</a>
Check out the Demo Video below –
<iframe loading="lazy" class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/wIC8B0YJXmI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://cartimize.com/" rel="nofollow ugc">Discover more at our website</a>
<h4>MAKE IT SIMPLE</h4>
<h3>Faster, friction-less, smoother checkout</h3>
Minimizing the default number of displayed form fields and selections are particularly important for the WooCommerce one-step checkout implementation. It’s key to achieve the perceived simplicity that the one-step style can afford.
<ul>
<li>
Hide Optional fields behind a link – The main component in reducing the amount of needless attention drawn to optional fields is collapsing them behind a link. This performs well, as empty form fields in the checkout are generally seen by users as a potential task that has to be completed. Removing the form field from the default checkout flow will greatly reduce the amount of needless attention.
</li>
<li>
Make the coupon section much less prominent – Showing a coupon code field and apply button directly in the checkout flow is one of the best ways to make sure all users without a coupon notice that they could be getting a better deal on their purchase. A well-performing way of reducing the amount of emphasis on the coupon field, while still keeping it discoverable for users who do have a coupon, is to collapse it behind a link. Although WooCommerce hides the actual coupon field and apply button behind a link, both the design and placement of the link still demand needless attention.
</li>
<li>
Allow logged-in users to save and choose from multiple addresses – Logged-in users can add multiple shipping and billing addresses during checkout, or pick from their previously saved addresses for both delivery and billing. 80% of people use the same address most of the time. Your customers can choose a default address for shipping and billing, and it will automatically be selected during checkout.
</li>
<li>
Enclosed Checkout – During the checkout process, the number of elements shown to users should be reduced to a minimum to allow them to focus on completing the checkout process. This, in particular, means removing the main site-wide navigation in the header and the various potentially distracting links in the footer during checkout.
</li>
</ul>
<h4>DON’T MAKE ME THINK</h4>
<h3>Reduce shoppers’ cognitive load</h3>
Making users think, evaluate or make up their mind during the checkout causes interruptions. Since these interruptions lapses a user’s ability to progress in their checkout, it’s important to reduce them to any extent possible.
<ul>
<li>
Let users enter their ‘Shipping Address’ first instead of ‘Billing Address’ – A shipping address determines where the product is being delivered – a straightforward terminology which users have no issues understanding. A billing address, on the other hand, can be used for several purposes. Asking users to type their shipping address instead of a billing address performs better.
</li>
<li>
Use ‘Shipping Address’ as ‘Billing Address’ by default – For most B2C sites, the majority of customers typically order products to their own address. Setting the “Billing Address to equal the Shipping Address”, by default, performs vastly better than either not having the feature or not having it as a default selection.
</li>
<li>
Explain why you need the users’ phone number – Users continue to be concerned about the security and confidentiality of their personal information on the web. This can range from serious concerns over identity theft to more mundane concerns, such as an aversion to receiving marketing phone calls – making them reluctant to hand out personal information. When it’s truly necessary to require users to supply the information, it should clearly be explained why the data is required. One well-performing pattern is simply using a short inline explanation, in close proximity to the field, such as “Used for payment validation”, “For order questions only”, or whatever the information is actually used for.
</li>
<li>
Disable Shipping Address for virtual products – If the cart contains only virtual products, the delivery address form will be hidden.
</li>
<li>
Disable Billing Address – For stores who do not need to get a billing address from their users, it is best to hide the form altogether.
</li>
</ul>
<h4>DELIGHT ME!</h4>
<h3>Delight users with a thoughtful checkout flow</h3>
Besides speeding up the completion of the form, a thoughtfully designed checkout flow has the potential to bring delight to users in an otherwise dull typing process.
<ul>
<li>
Live inline error validation of form fields – “Live inline validation” is where the validity of the user’s inputs are checked live as the user progresses through the form, as opposed to checking the inputs in a lump sum when the user submits the form. We time and again observe that there’s a direct correlation between how and when users are presented with form validation errors and the pace and effort with which they are able to resolve those errors.
</li>
<li>
Positive inline validation – It has been observed to perform well that instead of only telling users what they’ve done wrong, we also tell them when they’ve done something right. During testing, sites that used positive inline validation, by adding a checkmark next to correctly inputted values, added a sense of delight and progression to the whole typing experience.
</li>
<li>
Sticky Order Summary section – With the multi-step checkout, the forms can extend well beyond the fold of the checkout page. In such cases, the order summary and payment methods section can be made to stick to the top so that it’s always visible to the user.
</li>
</ul>
<h4>Advanced PRO features</h4>
<ul>
<li>
A Better Thank you page [PRO] – The order confirmation page (thank you page) is the final leg in the checkout process. The first job of the confirmation step is to let all users know that their order has been successfully completed. It’s important that this information is communicated clearly to users to avoid them looking for further tasks that have to be completed before the order is placed. When this isn’t communicated clearly, users would wonder if they needed to do something else to finalize the order. Another key aspect of the confirmation step is to clearly prioritize the information, making the order confirmation information sufficiently prominent. This includes not collapsing all the order information or plastering the page with auxiliary options that are much more dominant than the actual order information.
</li>
<li>
Google Address Auto-complete [PRO] – Reduce post-order headaches and cut down address form fields by auto-completing your customers’ address entry.
</li>
<li>
Cart editing in checkout page [PRO] – Keep customers in the checkout page itself by allowing them to edit their cart without having to go back to the cart page.
</li>
<li>
Delayed account creation [PRO] – While users should always be allowed to complete the checkout process as a guest, having an optional account creation option is often appreciated by users. This begs the question of at which point during the checkout flow is it best to ask for the optional account creation. Based on previous checkout usability tests, it’s clear that delaying the optional account creation option performs the best. In fact, it’s often best delayed until the order is finalized; hence presenting the optional account creation option on the order confirmation page works best. This concept is called ‘Delayed Account Creation’.
</li>
<li>
Hide or make billing address optional for virtual and downloadable products [PRO] – For stores that do not need to get a billing address from their users, it is best to hide the form altogether.
</li>
<li>
Remove Cartimize branding [PRO] – Remove the ‘Checkout Powered by Cartimize’ badge and make the checkout your own.
</li>
</ul>
<h4>Advanced PRO features – COMING SOON</h4>
Our laser-focus is on improving the checkout flow to maximise conversion. We are working on premium features ranging from minor but significant design improvements to major overhaul of systems to make it easier for users.
<ul>
<li>
Cart order bump [PRO] – Increase your average order value by presenting an eye-catching yet non-interruptive upsell offer before your customers checkout. The offer is presented within the order items summary as a small widget where they can accept the offer by simply adding it to the cart.
</li>
<li>
Cross-device persistent cart [PRO] – Considering how easy it is to complete the mobile checkout process using a desktop computer instead, it is no surprise that a Baymard research study showed that 21% of mobile users consistently use a desktop device to complete their mobile-initiated orders, while 40% do it occasionally. To support this behaviour, cart items are sync’d between the mobile and desktop checkout sessions for logged-in users.
</li>
<li>
Auto-Detect City and State from ZIP [PRO] – While we can’t avoid requiring some information from users, we should minimize the amount of typing required whenever possible. Both “State” (/region) and “City” inputs present such an opportunity, as both can be auto-detected from a ZIP or Postal code in most countries.
</li>
<li>
A Better Cart page [PRO] – An effective Cart page should allow users to get an idea of the total order cost before they have to fill out multiple form fields, support that some users will use the cart as a temporary storage tool (for short-listing products) and a comparison tool (especially for spec-driven industries), auto-update quantity changes instantly without needing to click on an ‘Update’ button, allow users to easily re-add removed items and, allow users to ‘Save’ cart items for later.
</li>
<li>
OTP and link based account creation and login [PRO] – The password reset flow is the weakest link of the checkout process. Any issues with the password reset process technically lock users out of their account, at which point abandonments are very likely. OTP and link-based authentication via SMS and email, which were traditionally used only for 2-factor authentications can be used to completely eliminate the need for a password. Both account creation and logging in can be done through this system.
</li>
<li>
Login with social profiles [PRO] – Users simply don’t want yet another account, for yet another site, with yet another password. 34% of shoppers abandon their carts when they are required to create an account. One easy way for users to create an account is to allow them to login with their social profiles. No more usernames, emails or passwords to enter and remember.
</li>
<li>
Display positive user reviews for products in the cart [PRO] – Even after adding a product to the cart and starting the checkout process, users can still be skeptical of their purchase. Reassuring them of their decision nudges them to complete the purchase. One way to do this is to display the product-specific user reviews right in the checkout page itself. When a real customer tells them that the particular product worked well, chances are that they will feel confident to purchase it.
</li>
</ul>

Linear Checkout for WooCommerce by Cartimize

The Checkout You Deserve - Backed by 134 checkout-specific guidelines distilled from Baymard Institute‘s 61,000+ hours of large-scale e-commerce UX re …

WordPress.org

This plugin optimizes the loading of images (and videos) with prioritization to improve <a href="https://web.dev/articles/lcp" rel="nofollow ugc">Largest Contentful Paint</a> (LCP), lazy loading, and more accurate image size selection.
The current optimizations include:
<ol>
<li>Add breakpoint-specific <code>fetchpriority=high</code> preload links (both as <code>LINK[rel=preload]</code> elements and <code>Link</code> response headers) for image URLs of LCP elements:
<ol>
<li>An <code>IMG</code> element, including the <code>srcset</code>/<code>sizes</code> attributes supplied as <code>imagesrcset</code>/<code>imagesizes</code> on the <code>LINK</code>.</li>
<li>The first <code>SOURCE</code> element with a <code>type</code> attribute in a <code>PICTURE</code> element. (Art-directed <code>PICTURE</code> elements using media queries are not supported.)</li>
<li>An element with a CSS <code>background-image</code> inline <code>style</code> attribute.</li>
<li>An element with a CSS <code>background-image</code> applied with a stylesheet (when the image is from an allowed origin).</li>
<li>A <code>VIDEO</code> element’s <code>poster</code> image.</li>
</ol>
</li>
<li>Ensure <code>fetchpriority=high</code> is only added to an <code>IMG</code> when it is the LCP element across all responsive breakpoints.</li>
<li>Add <code>fetchpriority=low</code> to <code>IMG</code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.</li>
<li>Lazy loading:
<ol>
<li>Apply lazy loading to <code>IMG</code> tags based on whether they appear in any breakpoint’s initial viewport.</li>
<li>Implement lazy loading of CSS background images added via inline <code>style</code> attributes.</li>
<li>Lazy-load <code>VIDEO</code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a <code>VIDEO</code> is the LCP element, it gets <code>preload=auto</code>; if it is in an initial viewport, the <code>preload=metadata</code> default is left; if it is not in an initial viewport, it gets <code>preload=none</code>. Lazy-loaded videos also get initial <code>preload</code>, <code>autoplay</code>, and <code>poster</code> attributes restored when the <code>VIDEO</code> is going to enter the viewport.</li>
</ol>
</li>
<li>Responsive image sizes:
<ol>
<li>Ensure <a href="https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/" rel="nofollow ugc"><code>sizes=auto</code></a> is set on <code>IMG</code> tags after setting correct lazy-loading (above).</li>
<li>~~Compute the <code>sizes</code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by <code>sizes=auto</code>).~~ (This has been removed due to an <a href="https://github.com/WordPress/performance/issues/2098" rel="nofollow ugc">issue</a>; use <a href="https://wordpress.org/plugins/auto-sizes/" rel="ugc">Enhanced Responsive Images instead</a>.)</li>
</ol>
</li>
<li>Reduce the size of the <code>poster</code> image of a <code>VIDEO</code> from full size to the size appropriate for the maximum width of the video (on desktop).</li>
</ol>
This plugin requires the <a href="https://wordpress.org/plugins/optimization-detective/" rel="ugc">Optimization Detective</a> plugin as a dependency. Please refer to that plugin for additional background on how this plugin works as well as additional developer options.
👉 Note: This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won’t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.
Your site must have the REST API accessible to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.

Image Prioritizer

Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes.

Linear Checkout for WooCommerce by Cartimize vs Image Prioritizer