最近跟朋友聊天，有談及 WooCommerce 與 Shopify 這兩種不同電商交易系統(tǒng)，在結(jié)算流程這塊的異同比較。所以干脆借這篇文章總結(jié)下這塊的知識點，溫故知新。

都知道，結(jié)算流程路徑的長短能很大程度上影響訂單成交的轉(zhuǎn)化率。且 Baymard Institute 有數(shù)據(jù)表明，大多數(shù)網(wǎng)站都在結(jié)算流程這塊有很大的優(yōu)化空間。有興趣的朋友可以看看 The Current State of Checkout UX - 18 Common Pitfalls & Best Practices 這篇文章。

鏈接：https://baymard.com/blog/current-state-of-checkout-ux

先說 WooCommerce 的結(jié)算流程，大體上分為三步。

一，用戶將商品添加到購物車。

二，在購物車內(nèi)查看商品，同時也可以使用促銷代碼、更改商品數(shù)量，最后準備妥當便可以觸發(fā)結(jié)算流程。

三，填寫賬單信息并完成結(jié)算流程。

當然，用戶也可以在最終的結(jié)算頁面使用優(yōu)惠券、查看訂單信息等等功能。但是卻不能增減商品數(shù)量，或者是增刪商品。這也就一定程度上導(dǎo)致，整個結(jié)算過程臃腫且不夠靈活。

那 Shopify 的結(jié)算流程呢？

總體上，Shopify 的結(jié)算流程與 WooCommerce 類型。都是用戶先將產(chǎn)品添加到購物車，然后用戶進入購物車頁面并進入最終的結(jié)算頁面，完成訂單信息錄入后下單。

但不同的是，Shopify 在這種常規(guī)結(jié)算方式之外，還提供快速結(jié)算服務(wù)，實現(xiàn)無縫下單。

再填完訂單收貨地址信息后，跳出一個頁面讓用戶選擇物流運輸方式。只有這些基礎(chǔ)信息填完之后，才可以進入到付款方式選擇環(huán)節(jié)，并最終付款。

所以，簡單比較了兩者結(jié)算流程的異同，Shopify 簡約、干凈的結(jié)算過程，確實要比傳統(tǒng) WooCommerce 的結(jié)算過程，給用戶更強的感官體驗。

具體點說就是。

一、Shopify 的結(jié)算頁面有很清晰的 CTA 標識，哪怕是傻子都知道下一步要干嘛。

二、結(jié)算頁面的布局比較合理，每一步的層次感比較分明。

三、單向流程設(shè)計，使得用戶聚焦在結(jié)算過程中，不至于分心。

但是 Shopify 的缺點也很明顯，整個結(jié)算過程不支持定制。比如在結(jié)算過程中，為什么要將訂單信息填寫、物流運輸方式選擇、結(jié)算付款這 3 個步驟，放在 3 在頁面中，就不能一個頁面直接呈現(xiàn)出來？

從這點上講，我就更喜歡使用 WooCommerce 這種開源的、可高度自定義的電商交易程序。針對 WooCommerce 在結(jié)算過程中的不足，我自己完成可以對其進行定制化修改，來達到自己的目的。

舉例“優(yōu)惠券”這一個很小的優(yōu)化點。

WooCommerce 允許用戶在購物車頁面與結(jié)算頁面，這兩處使用優(yōu)惠券兌換功能。但是 Shopify 只允許用戶在結(jié)算頁面上使用優(yōu)惠券兌換功能。

其實，這么設(shè)計是有更深層次考慮的。因為用戶在看到優(yōu)惠券信息輸入框后，會本能的去找優(yōu)惠券在哪里。更有甚者，許多用戶會偏離正軌，開始在谷歌搜索優(yōu)惠券代碼，結(jié)果難免是一去不復(fù)返，無法完成訂單轉(zhuǎn)化。

所以就這點，完全可以對 WooCommerce 的結(jié)算流程部分代碼進行一些自定義的修改，隱藏掉購物車頁面的優(yōu)惠券信息輸入框，來簡化購物車頁面，也好讓用戶將精力聚焦到訂單結(jié)算這件事上來。

甚至，我可以直接在 WooCommerce 上隱藏掉優(yōu)惠券兌換這個功能，將結(jié)算過程中的干擾項減少到最低。但是這些點，對于封閉性較強的 Shopify 是很難做到的。

再比如，很多朋友喜歡的跳過購物車環(huán)節(jié)，直接結(jié)算這個功能。你要是使用 Shopify，幾乎不可能實現(xiàn)。但是如果你是用的是 WooCommerce，要實現(xiàn)這點倒也不是什么太難的事情。

結(jié)算流程中的優(yōu)化點還有很多，后面再展開。