如何在 WooCommerce 中添加自定義上傳字段

您想在結帳頁面上包含上傳字段嗎？ 你來對地方了。 在本文中，我們將逐步向您展示如何在 WooCommerce 中添加自定義上傳字段。

WooCommerce擁有超過 500 萬次活躍下載，是世界上最受歡迎的電子商務平台。 在創建在線商店時，它是許多店主的首選，這是有充分理由的。 WooCommerce 為客戶和店主提供無縫且直接的整個在線體驗。

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

眾所周知，要實現這一目標，您的結帳應該得到優化並且不會分散注意力。 增強用戶體驗的一種方法是向您的 WooCommerce 商店添加自定義上傳字段。 通過這種方式，您可以讓您的客戶在結賬過程中上傳文件並立即確認訂單，而不必在他們通過電子郵件向您發送其他文件之前一直等待購買。

在我們詳細介紹之前，讓我們更好地了解為什麼向您的商店添加自定義上傳字段是一個好主意。

為什麼在 WooCommerce 中添加自定義上傳字段？

在幾種情況下，購物者在網上購買產品時可能需要上傳文件。

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

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

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

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

最後，上傳文件的選項對於銷售需要先前認證的服務（如潛水、滑翔傘等）的商店非常有用。

即使不是在每種情況下都是強制性的，在您的結帳頁面中添加自定義上傳字段也可以使流程變得輕鬆且雙方都更加方便。

現在我們更好地了解了何時應該將自定義上傳字段添加到您的 WooCommerce 商店，讓我們看看如何做到這一點。

如何在 WooCommerce 中添加自定義上傳字段

在 WooCommerce 中添加自定義上傳字段的最簡單方法是使用插件。 對於此演示，我們將使用 Checkout Manager for WooCommerce，這是一種免費增值工具，有超過 90,000 次活動安裝。

這個插件有很多功能可以幫助您自定義結帳，並包括添加自定義字段的選項。 要了解有關此工具提供的所有功能的更多信息，請查看產品頁面。

第 1 步：為 WooCommerce 安裝結帳管理器

首先，您需要安裝插件。 在您的WordPress 管理儀表板中，導航到插件 > 添加新的。

然後，搜索 QuadLayers 的 Checkout Manager for WooCommerce 插件，然後單擊“立即安裝”按鈕。 安裝插件後，按“激活”。

現在是時候配置插件了。 讓我們首先向 WooCommerce 結帳頁面添加一個新的自定義上傳字段。

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

讓我們看看如何設置結賬管理器讓購物者在結賬時添加文件。

第 2 步：在 WooCommerce 結帳頁面中添加自定義上傳字段

在您的WordPress Dashboard中，導航到WooCommerce > Checkout。 在那裡您將找到結帳管理器的所有設置。

轉到結帳選項卡並前往附加部分以打開附加字段設置。

注意：在此示例中，我們將在“附加”部分添加該字段，但您只需轉到“結帳”選項卡下的相應區域，即可將其添加到“開票”、“運輸”或結帳的任何部分。

在右上角，您將看到一個下拉菜單，您可以在其中選擇要顯示這些附加字段的位置。 單擊“添加新字段”按鈕開始創建新的附加字段。

設置自定義上傳字段

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

創建一些附加字段後，您可以從附加字段設置菜單管理不同的參數。 這些參數包括：

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

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

現在讓我們從前端看一下我們的網站，看看有什麼變化。 如您所見，現在有一個上傳文件的按鈕。 在我們創建的 2 個自定義字段中，只有測試字段被激活並且不是強制性的，因此它在結帳頁面上顯示為可選。

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

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

獎勵：在 WooCommerce 中添加條件字段

條件字段有兩部分：父字段和子字段。 子字段取決於父字段的輸入。 這意味著它默認不可見，但在父字段採用特定值時出現。

例如，如果您想向 WooCommerce 商店添加僅在特定情況下才需要的自定義上傳字段，最好的解決方案是創建一個條件字段，以便該字段僅在需要時出現。

我們將分兩步進行。 首先，我們將詢問用戶是否要上傳文件。 如果他們說“是”，那麼只有這樣，上傳文件字段才會可見。 在此示例中，我們的第一個問題將是父字段，上傳文件按鈕將是子字段。

現在我們知道了條件字段是什麼，讓我們看看如何使用 Checkout Manager 插件將其添加到 WooCommerce。

使用 Checkout Manager 創建條件字段

首先，讓我們添加父字段。 按照相同的示例，我們會將其添加到 Additional 部分，但您可以將其添加到 Billing、Shipping 或您想要的結帳的任何部分。

轉到WooCommerce > Checkout，轉到Checkout選項卡，然後打開Additional部分。 按“添加新字段”按鈕並設置父字段的參數。 使用上面的示例，我們將選擇Select作為“類型”並添加自定義標籤和占位符文本。

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

創建子字段

接下來，您需要創建子字段-自定義上傳字段-，並設置條件參數。

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

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

而已！ 您現在已經在 WooCommerce 結帳頁面上成功設置了條件字段。

現在轉到您的結帳頁面並檢查條件字段是否正常工作。 最初，只會顯示父字段，但如果您選擇“是”，則會出現上傳文件按鈕。

有關如何向 WooCommerce 添加條件字段的更多信息，請查看我們的完整指南。

結論

總而言之，在 WooCommerce 結帳中添加自定義上傳字段會派上用場，因為它允許您的客戶在結帳過程中上傳任何所需的文件。

在多種情況下，用戶可能需要上傳文件或圖像。 例如，在線酒店預訂、購買機票時的身份驗證、服裝定制設計、物品交換或退款，或需要某些認證的服務。 這就是為什麼允許您的購物者在結賬時上傳文件使整個過程更簡單、更方便的原因。

在本文中，我們討論了：

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

您是否在商店中添加了自定義上傳字段？ 你知道我們應該包括的任何其他方法嗎？ 在下面的評論中讓我們知道！