如何自定義WooCommerce產品頁面(無代碼方法)


您是否要自定義WooCommerce產品頁面而無需編寫任何代碼?

通過自定義WooCommerce產品頁面,可以提高轉換率並從現有的網站訪問者中產生更多的銷售。

在本文中,我們將向您展示如何在沒有任何技術知識的情況下自定義WooCommerce產品頁面。

如何自定義WooCommerce產品頁面(無代碼方法)

為什麼要在WordPress中自定義WooCommerce產品頁面?

您的WooCommerce產品頁面是您在線商店中最有價值的頁面。 問題在於默認的WooCommerce產品頁面並未針對轉化進行優化。

通過自定義WooCommerce產品頁面,您可以創建獨特的產品著陸頁,從而以更高的速度將訪問者轉化為客戶。

這意味著您的商店可以賺取更多收入,而無需額外的流量。

在開始自定義WooCommerce產品頁面之前,您需要確保擁有最快的WooCommerce託管來支持您的在線商店,因為速度會影響轉化。

話雖如此,讓我們看一下如何無需代碼即可自定義WooCommerce產品頁面。

如何在WordPress中自定義您的WooCommerce產品頁面

SeedProd是超過一百萬個網站使用的最佳拖放頁面生成器。 它使您可以輕鬆自定義WooCommerce產品頁面並提高銷售量。

您需要做的第一件事是安裝並激活SeedProd插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

筆記: 有可用的免費版本的SeedProd,但是在本教程中,我們將顯示Pro版本,因為它具有內置的WooCommerce塊。

激活後,您需要訪問 SeedProd»設置 並輸入您的許可證密鑰。

輸入SeedProd許可證密鑰

您可以在SeedProd網站上的帳戶下找到此信息。

接下來,您需要訪問 SeedProd»頁 然後點擊“添加新的著陸頁”。

添加新的SeedProd登陸頁面

在下一個屏幕上,將要求您選擇一個模板。 SeedProd提供了數十種專業設計的模板供您選擇。

由於您正在構建一個轉換率很高的WooCommerce產品頁面,因此請選擇“銷售”選項,然後選擇其中一個模板。

只需單擊一個模板即可將其選中。

選擇SeedProd頁面模板

我們將使用“晚餐銷售頁面”模板,但您可以選擇任何喜歡的模板。

接下來,將要求您為頁面命名,然後單擊“保存並開始編輯頁面”按鈕。

命名WooCommerce產品頁面

這將啟動拖放頁面構建器界面。

您將看到所選模板的實時預覽,您可以在其中指向並單擊以選擇和編輯頁面上的任何項目。

SeedProd頁面編輯器屏幕

左列有新的塊,您可以將其添加到產品頁面。

接下來,我們將添加一些塊,以使該頁面更像WooCommerce產品頁面。

首先,點擊圖片,然後將其替換為您產品的圖片。 您將上傳圖像或從媒體庫中選擇一個。

編輯產品圖片

之後,您可以通過單擊這些項目並直接在頁面編輯器中進行更改來更改產品標題和文本。

左側菜單可讓您更改大小,對齊方式等。

更改產品標題並複制

最後,就像標準的WooCommerce產品頁面一樣,我們將添加一個“添加到購物車”按鈕。

您需要找到“添加到購物車” WooCommerce塊並將其拖到頁面上。

插入添加到購物車按鈕

現在,您已具備WooCommerce產品頁面的基礎知識,我們將向您展示如何添加可改善轉化的商品。

首先,讓我們添加產品星級評定,向客戶顯示您的產品質量高。

只需將“星級”塊拖放到頁面預覽中您希望其顯示的位置即可。

添加星級評分

您可以完全控制星數,大小,總評級數等等。

之後,我們將添加一個客戶推薦區。 添加產品推薦可以幫助改善您的社交證明和產品轉換。

如果您正在尋找一種收集客戶推薦的方法,請參閱我們的WordPress最佳推薦插件列表。

要添加個人鑑定,只需將“個人鑑定”欄拖到您要顯示的頁面上即可。

添加產品推薦區

您可以完全自定義個人鑑定,添加圖像並更改個人鑑定文本。

單擊推薦項目後,您可以更改左側菜單上的所有顯示選項。

如果要添加多個推薦,請單擊“添加推薦”按鈕。 這將自動為您的客戶推薦創建一個旋轉的輪播。

定制產品推薦

接下來,您可以添加一個產品常見問題解答部分,類似於Amazon產品頁面上的問答部分。

單擊“手風琴”塊並將其拖到您的頁面上,然後單擊該項目以調出左側的編輯屏幕。

添加常見問題下拉式手風琴

您可以在此處添加另一個常見問題下拉列表,更改字體大小,顏色等。

您可以直接在頁面預覽上更改FAQ文本。

自定義產品常見問題解答文本

將上述SeedProd WooCommerce塊添加到您的產品頁面將有助於改善轉化。

SeedProd還有一些其他的WooCommerce塊,您也可以將其添加到產品頁面。

如果您要進行春季贈品銷售或黑色星期五銷售,則可以使用“倒數”框來增加緊急度。

產品倒數計時器

您可能還想通過使用“特色產品”或“最受好評的產品”塊突出顯示商店中的其他產品。

要添加其他塊,只需遵循與上述相同的步驟。

WooCommerce特色產品塊

有關將流行產品添加到WooCommerce的更多詳細信息,請參閱有關如何在WooCommerce產品頁面上顯示流行產品的指南。

您可以通過使用其他功能塊並調整設置菜單來繼續自定義產品頁面。

實時發布WooCommerce產品頁面

完成自定義產品頁面後,請確保單擊“保存”,然後從下拉菜單中單擊“發布”以使頁面生效。

您對產品頁面進行的自定義將使您更容易將訪問者轉換為購買者。

WooCommerce產品頁面已定制

如何改善您的WooCommerce產品頁面轉換(兩種方法)

自定義WooCommerce產品頁面後,您可以使用以下動態元素進一步改善商店轉化。

在WooCommerce中添加購買活動通知

第一種方法使用社交證明通知來警告您的訪客其他人剛剛購物。 這使用FOMO來簡單地改善您的轉化。

向WooCommerce添加社交證明的最佳方法是使用TrustPulse。 它是市場上最好的WordPress彈出插件和社交證明應用程序之一。

它使您可以輕鬆地在整個WooCommerce網站上顯示實時購買通知。

TrustPulse實時購買通知

有關更多詳細信息,請參閱有關如何在WordPress網站上使用FOMO來增加轉化的指南。

在WooCommerce中創建個性化的營銷活動

第二種方法使用動態文本,以便您可以向訪問者顯示自定義的營銷信息。 使用動態文本,您可以顯示訪問者的姓名,位置,甚至是星期幾。

它使您可以在合適的時間向合適的人顯示個性化消息,從而大大提高您的參與率和轉化率。

添加動態文本的最佳方法是使用OptinMonster。 這是超過120萬個網站使用的WordPress的最佳彈出窗口和電子郵件捕獲工具。

OptinMonster WooCommerce

首先,您需要訪問OptinMonster網站並創建一個帳戶。 您至少需要專業級別的計劃才能使用智能標籤創建動態文本。

接下來,您需要安裝並激活OptinMonster插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

該插件將您的WordPress網站連接到OptinMonster應用。

激活後,您需要輸入許可證密鑰。 您可以在OptinMonster網站上的帳戶下找到此信息。

在您的WordPress儀表板中,轉到 OptinMonster»設置,點擊“連接現有帳戶”,然後輸入您的帳戶詳細信息。

連接OptinMonster帳戶

接下來,您需要將OptinMonster與WooCommerce連接起來。

這為您提供了其他顯示規則,可用於自定義廣告系列。 在同一頁面上,單擊“自動生成密鑰+ Connect WooCommerce”。

連接OptinMonster和WooCommerce

連接到OptinMonster後,導航至 OptinMonster»廣告活動 然後點擊“添加新”按鈕。

這將帶您進入OptinMonster廣告系列構建器工具。

製作新的OptinMonster廣告系列

您可以選擇許多模板。

我們將創建一個帶有WooCommerce智能標記的彈出窗口。 為此,請選擇“彈出式”廣告系列類型,然後選擇一種模板。

我們將選擇“提供”模板,但您可以選擇任何喜歡的模板。

選擇OptinMonster模板

只需將鼠標懸停在模板上,然後點擊“使用模板”即可。

為廣告系列命名並單擊“開始構建”後,您將被帶到拖放式廣告系列構建器。

OptinMonster廣告活動編輯器屏幕

您可以通過單擊任意項並在左側菜單上對其進行自定義,來自定義彈出窗口的每個部分。

我們將在標題中添加動態文本,以便顯示當天的日期,並為訪問者提供僅在當天有效的優惠券。

首先,雙擊任何文本元素以調出菜單。 然後,點擊“智能標記”圖標“ {}”以顯示可用智能標記的下拉列表。

選擇動態智能標籤

只需單擊要添加到廣告系列中的智能標記。

智能標記使用動態生成的文本為訪問者提供獨特且自定義的消息。

保存動態文本彈出窗口

完成自定義彈出窗口後,請確保單擊“保存”。

之後,單擊“發布”選項卡,然後選擇“發布”選項。

發布動態文本彈出窗口

退出構建器後,您將進入一個屏幕,您可以在其中確認顯示設置。

為確保彈出窗口處於活動狀態,請在“可見性和狀態”元框中將狀態更改為“已發布”,然後單擊“保存更改”。

WooCommerce彈出窗口可見性設置

您的帶有動態文本的WooCommerce彈出窗口現在將在您的WooCommerce商店中顯示。

您可以繼續測試不同的動態文本並顯示設置,以查看哪些廣告系列為您帶來最佳效果。

OptinMontster動態文本彈出窗口

我們希望本文能幫助您自定義WooCommerce產品頁面而無需編寫代碼。 您可能想看看我們關於WooCommerce SEO的指南變得簡單,以及我們為您的商店選擇的最佳WooCommerce插件的專家。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在以下位置找到我們 推特 和Facebook。