您是否正在尋找一種自定義WooCommerce產(chǎn)品頁面的方法？通過微調(diào)您的WooCommerce產(chǎn)品頁面，您可以獲得更多銷售額并提高商店的轉(zhuǎn)化率。在本文中，我們將向您展示如何自定義WooCommerce產(chǎn)品頁面，而無需編寫任何代碼。

為什么要在WordPress中自定義WooCommerce產(chǎn)品頁面？

您的產(chǎn)品頁面是在線商店中最有價(jià)值的內(nèi)容之一。問題是默認(rèn)的WooCommerce產(chǎn)品頁面沒有針對轉(zhuǎn)化進(jìn)行優(yōu)化。

通過創(chuàng)建獨(dú)特的產(chǎn)品頁面，您通常可以以更高的速度將訪問者轉(zhuǎn)化為付費(fèi)客戶。這意味著您可以賺取更多的錢，而無需吸引更多訪問者訪問您的網(wǎng)站或改善您的WooCommerce SEO。

在開始自定義WooCommerce產(chǎn)品頁面之前，您需要確保擁有最快的WooCommerce托管來支持您的在線商店，因?yàn)樗俣葘D(zhuǎn)化率也有很大影響。

完成此操作后，讓我們看一下如何在沒有代碼的情況下自定義WooCommerce產(chǎn)品頁面。

如何在WordPress中自定義您的WooCommerce產(chǎn)品頁面

創(chuàng)建自定義WooCommerce產(chǎn)品頁面的最簡單方法是使用SeedProd。

SeedProd 是最好的拖放式 WordPress 頁面構(gòu)建器，并帶有 180 多個(gè)專業(yè)設(shè)計(jì)的模板。

更好的是，您可以使用SeedProd的高級主題構(gòu)建器創(chuàng)建自定義WordPress主題，而無需編寫任何代碼。

您可以使用此拖放式主題構(gòu)建器自定義在線商店的每個(gè)部分，包括產(chǎn)品頁面。

SeedProd 甚至具有現(xiàn)成的 WooCommerce 模板和電子商務(wù)塊，可讓您快速創(chuàng)建高轉(zhuǎn)化率的在線商店。

請注意，此方法將取代您當(dāng)前的WooCommerce主題。

安裝并激活種子產(chǎn)品

您需要做的第一件事是安裝并激活 SeedProd 插件。

注意： 有一個(gè)免費(fèi)版本的 種子生產(chǎn) 無論您的預(yù)算如何，它都可以讓您創(chuàng)建令人驚嘆的設(shè)計(jì)。但是，對于本指南，我們將使用WooCommerce塊和主題構(gòu)建器附帶的高級插件。您需要購買 Pro 訂閱或更高版本才能使用主題構(gòu)建器。

激活后，轉(zhuǎn)到種子生產(chǎn)?設(shè)置并輸入您的許可證密鑰。

您可以在SeedProd網(wǎng)站上的帳戶下找到此信息。輸入許可證密鑰后，單擊“驗(yàn)證密鑰”按鈕。

選擇一個(gè)伍商務(wù)模板套件

完成此操作后，是時(shí)候選擇將用于在線商店的WooCommerce模板工具包了。只需前往 種子生產(chǎn) ? 主題生成器，然后單擊“主題模板套件”按鈕。

由于我們正在創(chuàng)建自定義WooCommerce主題，請單擊“WooCommerce”選項(xiàng)卡以查看所有不同的電子商務(wù)工具包。

要預(yù)覽設(shè)計(jì)，只需將鼠標(biāo)懸停在其上，然后單擊放大鏡即可。

這將在新選項(xiàng)卡中打開模板工具包。

這是一個(gè)實(shí)時(shí)預(yù)覽，因此您可以通過單擊鏈接、導(dǎo)航菜單、按鈕和其他交互式內(nèi)容來查看套件中的其他設(shè)計(jì)。

由于您正在創(chuàng)建自定義WooCommerce產(chǎn)品頁面，因此請務(wù)必查看產(chǎn)品頁面設(shè)計(jì)。

找到要使用的模板工具包后，將鼠標(biāo)懸停在其上，然后在出現(xiàn)時(shí)單擊復(fù)選標(biāo)記。在本指南中，我們使用WooCommerce入門主題，但您可以使用所需的任何模板。

自定義WooCommerce產(chǎn)品頁面模板

SeedProd 會(huì)將整個(gè)工具包導(dǎo)入您的 WordPress 網(wǎng)站，因此您可以使用該工具包創(chuàng)建自定義產(chǎn)品存檔、商店頁面、博客索引等。

要查看所有這些模板，請轉(zhuǎn)到 種子生產(chǎn) ? 主題生成器。

安裝模板后，您就可以開始自定義產(chǎn)品頁面了。

要開始使用，請將鼠標(biāo)懸停在產(chǎn)品頁面模板上，然后在出現(xiàn)時(shí)單擊“編輯設(shè)計(jì)”鏈接。

這將在SeedProd的拖放編輯器中打開模板，右側(cè)是WooCommerce模板的預(yù)覽，左側(cè)是一些塊設(shè)置。

SeedProd將使用來自WooCommerce產(chǎn)品之一的內(nèi)容展示產(chǎn)品頁面的外觀示例。

所有WooCommerce模板都帶有內(nèi)置塊，這是所有SeedProd設(shè)計(jì)的核心組件。

要自定義塊，只需在頁面預(yù)覽中單擊以選擇它，然后在左側(cè)菜單中進(jìn)行任何更改。

例如，該模板附帶一個(gè)內(nèi)置的特色產(chǎn)品塊，您可以通過幾種不同的方式對其進(jìn)行自定義。

首先，您可能希望使用左側(cè)菜單中的設(shè)置更改塊的大小和對齊方式。

您可以在“高級”標(biāo)簽中找到更多設(shè)置。在這里，您可以通過添加邊框或陰影、添加 CSS 動(dòng)畫等來使圖像真正脫穎而出。

當(dāng)您進(jìn)行更改時(shí)，實(shí)時(shí)預(yù)覽將自動(dòng)更新，因此您可以嘗試不同的設(shè)置，以查看在線商店中的最佳外觀。

WooCommerce模板還有一個(gè)添加到購物車號召性用語按鈕。這允許購物者購買您的產(chǎn)品，因此您需要使按鈕突出顯示。

首先，您可以將“添加到購物車”替換為您自己的自定義消息，例如“立即購買”或“立即獲取”。要進(jìn)行此更改，只需選擇“添加到購物車”按鈕，然后在“按鈕文本”字段中鍵入新文本。

您可能還希望向按鈕添加圖標(biāo)字體，以幫助訪問者一目了然地了解此按鈕的作用。

SeedProd 附帶一個(gè)內(nèi)置庫，其中包含 1400 多個(gè)字體真棒圖標(biāo)，您可以在產(chǎn)品頁面上使用。在左側(cè)菜單中，點(diǎn)擊以展開“圖標(biāo)”部分。

現(xiàn)在，您可以選擇是在按鈕文本之前還是之后顯示圖標(biāo)。

只需做出決定，然后單擊“選擇圖標(biāo)”按鈕。

您現(xiàn)在將看到您可以使用的所有不同的字體真棒圖標(biāo)。當(dāng)您找到喜歡的圖標(biāo)時(shí)，單擊一下。

如果您對按鈕的消息感到滿意，可以通過單擊“模板”選項(xiàng)卡來更改其外觀。在這里，您將找到可以使用的不同按鈕模板。

要使用任何這些設(shè)計(jì)，只需單擊所需的設(shè)計(jì)即可。

選擇模板后，您可以通過單擊“高級”選項(xiàng)卡來微調(diào)按鈕的外觀。在這里，您可以更改按鈕和數(shù)量框之間的間距，增加邊框半徑以創(chuàng)建彎曲的角等等。

另一種選擇是打開“按鈕樣式”下拉列表，然后從列表中選擇新樣式。

大多數(shù)設(shè)置都是不言自明的，因此值得瀏覽它們以查看您可以創(chuàng)建哪些不同類型的效果。

另一個(gè)重要部分是“產(chǎn)品數(shù)據(jù)選項(xiàng)卡”塊。這會(huì)向購物者顯示詳細(xì)信息，例如產(chǎn)品標(biāo)簽、屬性和類別。

考慮到這一點(diǎn)，值得單擊以選擇塊，然后在左側(cè)菜單中查看可以進(jìn)行哪些更改。例如，您可以更改背景顏色、文本顏色、增加填充等。

要?jiǎng)h除任何默認(rèn)塊，只需將鼠標(biāo)懸停在該塊上即可。

然后，單擊出現(xiàn)垃圾桶圖標(biāo)。

您還可以使用拖放在頁面中移動(dòng)塊。

通過自定義WooCommerce產(chǎn)品頁面獲得更多銷售

模板的內(nèi)置塊是一個(gè)很好的開始，但您可能希望添加自己的內(nèi)容。

SeedProd有很多WooCommerce塊，您可以使用它們來創(chuàng)建高轉(zhuǎn)化率的在線市場或商店。為了幫助您，這里有一些您可能想要添加到您的WooCommerce產(chǎn)品頁面的塊。

顯示相關(guān)商務(wù)產(chǎn)品

通過在產(chǎn)品頁面上顯示相關(guān)商品，您可以獲得更多銷售額并增加平均訂單價(jià)值。這些可能是購物者經(jīng)常一起購買的產(chǎn)品，也可能是相互補(bǔ)充的商品。

例如，如果客戶購買筆記本電腦，那么他們也可能對筆記本電腦包感興趣。

SeedProd帶有一個(gè)現(xiàn)成的相關(guān)產(chǎn)品塊。但是，為了充分利用此塊，您需要在WooCommerce插件中設(shè)置鏈接的產(chǎn)品，如下圖所示。

完成后，只需在 SeedProd 編輯器中找到“產(chǎn)品相關(guān)”塊，然后將其拖到布局上即可。

默認(rèn)情況下，該塊在單個(gè)列中顯示一個(gè)相關(guān)產(chǎn)品。

您可以通過在“列”和“每頁帖子數(shù)”框中輸入新數(shù)字或單擊箭頭按鈕來展示更多產(chǎn)品。

如果您顯示多個(gè)產(chǎn)品，則可以使用“訂購方式”框更改這些項(xiàng)目的排列方式。例如，您可以先展示評分最高的商品，因?yàn)榭蛻羲坪踝钕矚g這些商品。

您還可以打開“訂單”下拉菜單，然后選擇是按升序 （ASC） 還是降序 （DESC） 順序顯示相關(guān)項(xiàng)目。

添加星級

為每件商品顯示星級有助于讓購物者放心，您的商品質(zhì)量很好。也就是說，您可能希望將星級塊拖到您的設(shè)計(jì)上。

為了獲得最佳效果，我們建議在屏幕頂部顯示星級，以便客戶輕松發(fā)現(xiàn)。這可以幫助購物者更快地做出購買決定，因?yàn)樗麄兛梢粤⒓纯吹狡渌徫镎呤欠裢扑]產(chǎn)品。

通過顯示產(chǎn)品庫存來使用 FOMO

FOMO或“害怕錯(cuò)過”鼓勵(lì)購物者立即采取行動(dòng)。

如果您銷售限量版商品或經(jīng)常有少量庫存，則可能需要顯示剩余產(chǎn)品數(shù)量。這可以說服購物者立即購買，而不是等待并冒著產(chǎn)品售罄的風(fēng)險(xiǎn)。

要顯示此信息，請將“產(chǎn)品庫存”塊拖到您的設(shè)計(jì)上。

默認(rèn)情況下，該塊顯示剩余商品數(shù)量，后跟“有貨”。您可能希望將自己的消息添加到此默認(rèn)文本中。

為此，只需在左側(cè)菜單中的小文本編輯器中輸入即可。如果您確實(shí)添加了一些文本，請注意不要編輯“[sp_product_stock]”標(biāo)記，因?yàn)檫@允許 SeedProd 顯示剩余的項(xiàng)目總數(shù)。

將特色圖片替換為產(chǎn)品

特色產(chǎn)品圖片可讓購物者查看他們在網(wǎng)上商店購買的商品。

但是，有時(shí)您可能希望將單個(gè)特色圖片替換為產(chǎn)品廚房。例如，您可以從不同角度展示同一商品。一些商店甚至使用交互式360度圖像，以便購物者可以更詳細(xì)地探索產(chǎn)品。

如果您已將圖庫添加到WooCommerce產(chǎn)品中，那么將默認(rèn)的產(chǎn)品特色圖像塊替換為圖庫塊是有意義的。

為此，只需將鼠標(biāo)懸停在特色產(chǎn)品塊上，然后在垃圾桶圖標(biāo)出現(xiàn)時(shí)單擊它。

然后，您可以在左側(cè)菜單中找到產(chǎn)品庫圖像塊并將其拖到頁面布局上。

我們建議將此塊添加到頁面頂部，以便訪問者可以立即看到他們購買的商品。

購物者可以通過將鼠標(biāo)懸停在產(chǎn)品庫上來放大圖像。

默認(rèn)情況下，縮放圖標(biāo)顯示在當(dāng)前特色圖片的右上角，但您可以使用“位置頂部”和“位置右側(cè)”滑塊進(jìn)行更改。

您還可以使用“字體大小”滑塊放大或縮小放大鏡圖標(biāo)，或更改其圖標(biāo)顏色和背景顏色。

您還可以使用“圖像邊框”和“縮略圖”邊框設(shè)置在不同圖像周圍添加邊框。

使用共享按鈕在社交媒體上創(chuàng)造嗡嗡聲

如果購物者在社交媒體上分享您的產(chǎn)品，那么它可以吸引更多人訪問您的在線商店。考慮到這一點(diǎn)，最好將社交分享按鈕添加到您的產(chǎn)品頁面。

SeedProd有一個(gè)支持Facebook，Twitter，LinkedIn和Pinterest的社交共享塊。只需將此塊拖放到您的頁面上，它就會(huì)自動(dòng)添加Facebook和Twitter共享按鈕。

要添加更多社交網(wǎng)絡(luò)，只需單擊“添加新共享”按鈕。

然后，您可以從下拉菜單中選擇一個(gè)社交媒體網(wǎng)站。

添加要使用的所有網(wǎng)絡(luò)后，您可以使用“大小”下拉菜單更改共享按鈕的大小。

更大的社交分享按鈕會(huì)更突出，盡管它可能會(huì)分散頁面的其他內(nèi)容的注意力，包括添加到購物車號召性用語。

顯示客戶評價(jià)和業(yè)務(wù)評論

WooCommerce允許客戶查看您的個(gè)人產(chǎn)品，但您可能還希望顯示客戶推薦。這些可能是您最佳評論中的引用、關(guān)于您出色客戶服務(wù)的評論或您想要突出顯示的任何其他內(nèi)容。

SeedProd的推薦塊允許您創(chuàng)建旋轉(zhuǎn)推薦，這是在少量空間內(nèi)顯示大量信息的好方法。

突出顯示W(wǎng)ooCommerce中最近查看的產(chǎn)品

“最近查看”部分鼓勵(lì)客戶重新訪問他們最近看到但未添加到購物車的產(chǎn)品。這有助于客戶比較產(chǎn)品并找到適合他們的商品。這也讓他們有機(jī)會(huì)改變主意，購買他們最近訪問過但沒有添加到購物籃中的產(chǎn)品。

您可能希望將SeedProd的“最近產(chǎn)品”塊添加到您的設(shè)計(jì)中。

添加塊后，您可以使用左側(cè)菜單中的設(shè)置更改列數(shù)。

如果您想顯示許多不同的產(chǎn)品，那么您可以通過激活“分頁”切換來添加分頁。

如果您確實(shí)啟用了“分頁”，那么您將可以訪問一些額外的設(shè)置。

首先，您可以通過啟用“顯示項(xiàng)目計(jì)數(shù)”切換，在“最近使用的產(chǎn)品”塊的頂部顯示結(jié)果總數(shù)。

您可能還希望啟用“顯示順序”滑塊，因?yàn)檫@允許訪問者對最近的產(chǎn)品進(jìn)行排序。

如下圖所示，這會(huì)向該區(qū)域添加“默認(rèn)排序”下拉列表。

展示您最受歡迎的WooCommerce產(chǎn)品

您可能希望在產(chǎn)品頁面上顯示最暢銷或評分最高的產(chǎn)品。由于這些商品已經(jīng)表現(xiàn)良好，因此向更多人展示它們是獲得更多銷售的簡單方法。

另一種選擇是顯示當(dāng)前正在銷售的產(chǎn)品。這可以激勵(lì)購物者現(xiàn)在購買這些商品，以獲得最優(yōu)惠的價(jià)格。

SeedProd有幾個(gè)塊可以自動(dòng)獲取這些產(chǎn)品。如果您想展示最暢銷的產(chǎn)品，請將“最暢銷產(chǎn)品”塊添加到您的設(shè)計(jì)中。

如果要顯示星級最高的產(chǎn)品，則可以將“評分最高的產(chǎn)品”塊拖到頁面上。

最后，還有一個(gè)銷售產(chǎn)品塊，顯示當(dāng)前正在銷售的所有項(xiàng)目。

無論您添加什么塊，請單擊以選擇它，然后查看左側(cè)菜單中的設(shè)置。所有這些設(shè)置都很簡單，因此值得瀏覽一下它們，看看您可以創(chuàng)建哪些不同的效果。

如何發(fā)布您的自定義WooCommerce產(chǎn)品頁面

當(dāng)您對產(chǎn)品頁面的外觀感到滿意時(shí)，就該保存更改了。只需繼續(xù)并單擊“保存”旁邊的下拉箭頭，然后選擇“發(fā)布”選項(xiàng)。

在您激活整個(gè)自定義WooCommerce主題之前，自定義產(chǎn)品頁面不會(huì)出現(xiàn)在您的在線商店中。這使您有機(jī)會(huì)查看主題套件中的其他設(shè)計(jì)，然后使用 SeedProd 的拖放構(gòu)建器進(jìn)行任何更改。

例如，您通常需要編輯頁眉和頁腳模板以顯示您自己的導(dǎo)航菜單、商店的自定義徽標(biāo)和其他內(nèi)容。

要編輯任何其他模板，請轉(zhuǎn)到 種子生產(chǎn) ? 主題生成器。然后，將鼠標(biāo)懸停在要自定義的模板上。

然后，您可以在出現(xiàn)“編輯設(shè)計(jì)”鏈接時(shí)單擊它。

現(xiàn)在，只需通過添加更多塊來更改設(shè)計(jì)，然后使用左側(cè)菜單中的設(shè)置對其進(jìn)行自定義。

只需繼續(xù)重復(fù)這些步驟，直到您對所有模板的設(shè)置方式感到滿意。

當(dāng)您準(zhǔn)備好使自定義WooCommerce主題上線時(shí)，請轉(zhuǎn)到SeedProd ? Theme Builder。然后，您可以單擊“啟用種子生產(chǎn)主題”切換，使其顯示“是”。

現(xiàn)在，如果您訪問您的在線商店，您將看到自定義的WooCommerce產(chǎn)品頁面。