如何在WooCommerce中添加自定義上傳欄位

在WooCommerce中添加自定義上傳欄位

您要在結帳頁面上添加上傳欄位嗎? 您來對地方了。 在本文中,我們將逐步向您展示如何在WooCommerce中添加自定義上傳欄位。

WooCommerce擁有超過500萬活躍下載,是世界上最受歡迎的電子商務平台。 創建在線商店時,這是許多商店所有者的最佳選擇,這是有充分理由的。 WooCommerce使客戶和商店所有者的整個在線體驗變得無縫,直接。

除了易於設置和使用之外,WooCommerce還具有大量功能,可為您提供很大的靈活性。 通過使用插件或進行一些編碼,您都可以添加所需的任何功能,以改善購物體驗並提高銷售量。

做到這一點已不是什麼秘密,您的結帳應該被優化且不受干擾。 增強用戶體驗的一種方法是將自定義上傳欄位添加到WooCommerce商店。 這樣,您可以允許客戶在結帳過程中上載文件並立即確認訂單,而不必等到他們通過電子郵件向您發送其他文檔後才繼續進行購買。

在詳細介紹之前,讓我們更好地了解為什麼將自定義上傳欄位添加到您的商店是個好主意。

為什麼要在WooCommerce中添加自定義上傳欄位?

在某些情況下,購物者在在線購買產品時可能需要上傳文檔。

一些酒店可能會要求他們的顧客在網上預訂時附上某種身份證明(通常是身份證或護照)。 在許多國家/地區,酒店每天都必須向警方或地方當局提供有關其客人的信息,因此他們可能會在您到達之前要求您提供身份證件,以加快辦理入住手續的速度。

同樣,一些在線銷售機票或火車票的網站也要求乘客在預訂過程中上載身份證或護照。 如果您需要更改機票,要求退款或要求某種延誤賠償,公司可能會要求您上傳某些文件,例如護照或身份證,所購機票等。

此外,批發在線商店還擁有大量購買產品並在單筆交易中花費數千美元的客戶。 在這些情況下,作為安全措施,他們可能要求用戶上傳一些身份證明。

最重要的是,一家服裝店提供購買定製T恤的選項,可能會要求客戶發送自己的設計以進行印刷。 為此,他們需要讓用戶上傳文件,以便他們可以上傳自己的設計。

最後,對於銷售需要事先認證(例如潛水,滑翔傘等)的服務的商店,可以選擇上傳文件非常有用。

即使不是在每種情況下都必須這樣做,將自定義上傳欄位添加到您的結帳頁面也可以使該過程輕鬆進行,並且對雙方都更加方便。

現在,我們更好地了解了為什麼在這種情況下應將自定義上傳欄位添加到WooCommerce商店,讓我們看看如何做到這一點。

如何在WooCommerce中添加自定義上傳欄位

在WooCommerce中添加自定義上傳欄位的最簡單方法是使用插件。 對於此演示,我們將使用Checkout Manager for WooCommerce,這是一個免費安裝的工具,具有90,000多個活動安裝。

該插件具有許多功能,可幫助您自定義結帳功能,並包括添加自定義欄位的選項。 要了解有關此工具提供的所有功能的更多信息,請查看產品頁面。

QuadLayers的WooCommerce結帳管理器

步驟1:為WooCommerce安裝Checkout Manager

首先,您需要安裝插件。 在您的WordPress管理控制台中,導航至「插件」>「添加新內容」。

然後,通過QuadLayers搜索WooCommerce的Checkout Manager插件,然後單擊「立即安裝」按鈕。 插件安裝完成後,按「激活」。

由QuadLayers安裝WooCommerce的Checkout Manager

現在是時候配置插件了。 首先,將新的自定義上傳欄位添加到WooCommerce結帳頁面。

在此之前,讓我們看看結帳頁面的外觀。 如您所見,沒有任何欄位允許客戶上傳文件。

結帳頁面-之前

讓我們看看如何設置Checkout Manager,讓購物者在結帳時添加文件。

步驟2:在WooCommerce Checkout頁面中添加Custom Upload欄位

在WordPress信息中心中,導航至WooCommerce>結帳。 在那裡,您會找到Checkout Manager的所有設置。

轉到WooCommerce Checkout Manger設置

轉到「結帳」標籤,然後轉到「其他」部分以打開其他欄位設置。

注意:在此示例中,我們將在「其他」部分添加該欄位,但您只需將其轉到「結帳」標籤下的相應區域,即可將其添加到「結帳」,「運送」或所需的結帳的任何部分。

在右上角,您將看到一個下拉菜單,可讓您選擇要顯示這些其他欄位的位置。 單擊「添加新欄位」按鈕開始創建新的其他欄位。

結帳管理器設置

設置自定義上傳欄位

之後,您將進入帶有設置菜單的新頁面。 您可以在此處指定要添加的欄位的參數。 由於我們要添加自定義上傳欄位,因此請在「類型」下選擇「文件」,然後設置自定義標籤和按鈕文字。 然後,按「保存」。

添加一個新的自定義欄位

創建一些其他欄位後,您可以從其他欄位設置菜單中管理不同的參數。 這些參數包括:

  • 重新定位:您可以使用向上和向下箭頭上下移動欄位。 或者,您可以單擊並拖動三個水平線圖標來重新定位欄位。
  • 必填:啟用必填欄位會使該欄位成為必填欄位。 這意味著用戶必須先填寫該欄位,然後才能繼續。
  • 位置:您可以選擇要顯示欄位的位置。 共有三個選項可供選擇:左,右或寬。
  • 清除:啟用此選項將禁止其他任何欄位出現在此特定欄位的左側或右側。
  • 禁用:通過選中禁用按鈕,該特定欄位不會顯示在結帳頁面上。
  • 編輯和刪除:顧名思義,您可以通過單擊相應按鈕來編輯或刪除特定欄位。

現場管理選項

配置完所有設置後,保存更改。

現在,讓我們從前端看一下我們的站點以查看更改。 可以的話,現在有一個按鈕可以上傳文件。 在我們創建的2個自定義欄位中,只有「測試欄位」被激活並且不是必需的,因此它在結帳頁面上顯示為可選欄位。

在WooCommerce-結帳頁面中添加自定義上傳欄位

就是這樣! 這就是在WooCommerce中添加自定義上傳欄位的簡單程度。 使用此按鈕,客戶可以在結帳過程中上載任何文件,甚至上載多個文件。 上載的文件將與訂單的其他詳細信息一起保存在訂單頁面上。 此外,您將能夠管理用戶通過管理訂單儀錶板上傳的所有文件。

上傳文件

但這還不是您使用Checkout Manager所能做的全部。 優化結帳是提高轉換率的關鍵,因此您應該僅顯示客戶必須填寫以完成訂單的欄位。 讓我們看看如何添加僅在滿足特定條件時才會出現的條件欄位。

獎勵:在WooCommerce中添加條件欄位

條件欄位包含兩個部分:父欄位和子欄位。 子欄位取決於父欄位的輸入。 這意味著默認情況下它是不可見的,但在父欄位採用特定值時會顯示。

例如,如果要在WooCommerce商店中添加僅在特定情況下才需要的自定義上傳欄位,最好的解決方案是創建一個條件欄位,以便僅在需要時才顯示該欄位。

我們將分兩步執行此操作。 首先,我們將詢問用戶是否要上傳文件。 如果他們說「是」,則只有在那時,上傳文件欄位才會變為可見。 在此示例中,我們的第一個問題將是父欄位,而上傳文件按鈕將是子欄位。

現在我們知道什麼是條件欄位,讓我們看看如何使用Checkout Manager插件將其添加到WooCommerce。

使用Checkout Manager創建條件欄位

首先,讓我們添加父欄位。 按照相同的示例,我們將其添加到「其他」部分,但您可以將其添加到「帳單」,「運送」或所需結帳的任何部分中。

轉到WooCommerce>結帳,轉到「結帳」標籤,然後打開「其他」部分。 按下「添加新欄位」按鈕並設置父欄位的參數。 使用上面的示例,我們將選擇「選擇」作為「類型」,並添加自定義標籤和佔位符文本。

添加一個新欄位

然後轉到左側的「選項」選項卡,並設置用戶可以選擇的所有可能的選項。 在此示例中,我們向用戶提出一個只能有兩個答案的問題:「是」或「否」。 由於此問題的答案不會增加任何額外費用(例如,快速交貨或國際運輸),因此我們將價格設置為0。配置完所有參數後,請保存更改。

在WooCommerce中添加自定義上傳欄位-條件欄位選項

創建子欄位

接下來,您需要創建子欄位(自定義上傳欄位),並設置條件參數。

為此,創建一個欄位,設置類型,標籤和按鈕佔位符。 然後轉到右側部分,然後選中「激活條件欄位要求」框。 之後,選擇您在上一步中剛剛創建的欄位作為父欄位,然後選擇應為其激活子欄位的父欄位的值。 在這種情況下,我們只希望在用戶對第一個問題回答「是」時顯示上載文件。

完成後,請記住保存更改。

添加條件欄位

就是這樣! 現在,您已經成功在WooCommerce結帳頁面上設置了條件欄位。

現在轉到您的結帳頁面,並檢查條件欄位是否正常工作。 最初,僅顯示父欄位,但是如果您選擇「是」,則會顯示上傳文件按鈕。

有關如何向WooCommerce添加條件欄位的更多信息,請參閱我們的完整指南。

結論

總而言之,在WooCommerce結帳中添加自定義上載欄位會很方便,因為它允許您的客戶在結帳過程中上載任何必需的文件。

在某些情況下,用戶可能需要上傳文件或圖像。 例如,在線酒店預訂的ID驗證,購買機票時的身份驗證,服裝的定製設計,物品的交換或退款或需要某些證書的服務。 這就是允許購物者在結帳時上傳文件的原因,從而使整個過程更簡單,更方便。

在本文中,我們討論了:

  • 添加自定義上傳欄位的好處
  • 有關如何使用Checkout Manager在WooCommerce中添加自定義上傳欄位的分步說明
  • 什麼是條件欄位以及它們如何工作
  • 如何在WooCommerce中添加條件欄位以優化結帳

您是否已將自定義上傳欄位添加到商店? 您知道我們應該包括的其他任何方法嗎? 在下面的評論中讓我們知道!

原創文章,作者:WPJIAN,如若轉載,請註明出處:https://wpjian.com/zh-tw/tips/2021050744883.html