如何使用特色產品 WooCommerce 塊

以特定產品為特色 你的網上商店 可以成為增加銷售額的有效方法。 例如,您可能希望在主頁上展示您的最新項目,或在博客文章中宣傳它。 幸運的是,特色產品 WooCommerce 塊使您可以輕鬆突出顯示 WordPress 網站上的任何產品。

在本文中,我們將仔細研究「特色產品」塊,並向您展示如何將其添加到您的站點。 我們還將討論一些有效使用此功能的最佳實踐。

讓我們開始吧!

如何將特色產品 WooCommerce 塊添加到您的帖子或頁面

特色產品塊使您能夠在帖子或頁面上展示特定項目。 這可以鼓勵客戶將該產品添加到他們的購物車中,這可能會為您的 WooCommerce 商店帶來更高的利潤。

要使用此塊,請打開要顯示特殊項目的頁面或帖子。 然後,單擊加號 (+) 添加一個新塊,並使用搜索欄查找「特色產品」選項:

how-to-use-the-featured-product-woocommerce-block 如何使用特色產品 WooCommerce Block

插入塊後,系統會要求您選擇要顯示的產品。 您可以從可用列表中選擇一個項目,或使用搜索欄查找它:

how-to-use-the-featured-product-woocommerce-block-1 如何使用特色產品 WooCommerce Block

找到您的產品後選擇它,然後單擊「完成」。 然後該塊將顯示您選擇的項目:

how-to-use-the-featured-product-woocommerce-block-2 如何使用特色產品 WooCommerce Block

請注意,此功能僅在您 使用 WooCommerce. 如果該插件在您的網站上被激活,您還可以訪問所有其他 WooCommerce 塊 在塊編輯器中。

特色產品 WooCommerce 塊設置和選項

如果您願意,可以自定義「特色產品」塊,使其更適合您網站的功能和風格。 如果單擊該塊,您將獲得一個包含六個主要設置的工具欄:

how-to-use-the-featured-product-woocommerce-block 如何使用特色產品 WooCommerce Block

以下是每個選項的快速概覽:

  1. 更改塊類型或樣式:您可以將此元素轉換為 團體 或者 列塊.
  2. 更改對齊方式:您可以選擇全寬或寬寬布局。
  3. 更改文本對齊方式:您可以將塊內的文本向左、向右或居中對齊。
  4. 替換:您可以更改塊內的圖像。
  5. 編輯:您可以使用此選項將特色產品替換為不同的項目。
  6. 選項:您可以複製塊,將其分組,將其添加到您的 可重複使用的塊,或刪除它。

CTA 按鈕設置

此外,您可以修改 號召性用語 (CTA) 塊內的按鈕。 您只需單擊它,就會出現一個專用工具欄:

how-to-use-the-featured-product-woocommerce-block-3 如何使用特色產品 WooCommerce Block

例如,您編輯按鈕上的文本、更改其對齊方式並設置其樣式的格式。 您還可以編輯產品頁面的鏈接,並將其設置為在新選項卡中打開。

您還可以在右側面板中找到 CTA 按鈕的更多設置:

how-to-use-the-featured-product-woocommerce-block-4 如何使用特色產品 WooCommerce Block

在這裡,您可以更改文本的字體和樣式。 您還可以為文本和按鈕選擇不同的顏色。

塊設置

現在,讓我們回到區塊。 選擇它後,您還會在右側面板中看到一些其他設置:

how-to-use-the-featured-product-woocommerce-block-5 如何使用特色產品 WooCommerce Block

默認情況下,特色產品塊顯示產品的描述和價格。 但是,您可以選擇隱藏此信息。 您所要做的就是切換相應的開關。

您還可以更改塊的疊加顏色,並調整其不透明度:

how-to-use-the-featured-product-woocommerce-block-6 如何使用特色產品 WooCommerce Block

同時,焦點選擇器使您可以在塊內移動對象。 在我們的示例中,這是 T 恤:

how-to-use-the-featured-product-woocommerce-block-7 如何使用特色產品 WooCommerce Block

例如,您可能希望將主圖像移向塊的頂部,以便文本更明顯。 您可以通過在「焦點選取器」欄位上拖動小圓圈或在「左」和「右」框中定義值來執行此操作。

最後,還有一個高級設置選項。 這使您能夠添加新的 CSS 類 到塊。 但是,我們建議您僅在對樣式表有經驗的情況下才使用此功能。

有效使用特色產品 WooCommerce 塊的提示和最佳實踐

正如我們所見,特色產品 WooCommerce 塊使您能夠突出顯示頁面或帖子上的產品。 例如,您可以展示您的最新產品,或嘗試重振對舊產品的興趣。 無論情況如何,在使用此功能時都需要考慮一些事項。

由於特色產品塊的目標是提示客戶購買您的商品,因此您希望此元素具有視覺吸引力和信息量。 為此,我們建議您選擇較淺的疊加顏色,以確保您的產品圖像清晰。

您還需要確保名稱、描述和價格易於閱讀。 不幸的是,該塊不允許您更改這些元素的字體和顏色。 因此,您需要調整疊加顏色和不透明度,以便圖像和文本都足夠可見以吸引訪問者的注意力:

how-to-use-the-featured-product-woocommerce-block-8 如何使用特色產品 WooCommerce Block

最後,您需要確保 CTA 按鈕鏈接到相關的 產品頁面. 這樣,對該項目感興趣的訪問者可以訪問其頁面以了解更多信息。 我們建議在點擊發布之前檢查前端的塊以確保它完美運行。

關於特色產品 WooCommerce Block 的常見問題

如您所見,特色產品 WooCommerce 塊非常易於使用。 但是,您可能仍然對該功能可以做什麼和不能做什麼有一些疑問。 讓我們討論幾個關鍵的考慮因素。

我可以從塊更新產品詳細信息嗎?

您可以為您的產品上傳不同的圖片,但您不能在此塊中修改任何其他產品詳細信息。 如果您希望更新您的特色產品的信息,例如其名稱或價格,您需要從「產品」頁面進行這些更改。

我可以展示多個特色產品嗎?

此塊只允許您一次顯示一個產品。 但是,您可以添加多個特色產品塊,並為每個塊選擇不同的項目。

我可以添加有關產品的更多信息嗎?

默認情況下,特色產品會顯示有關該項目的最基本的詳細信息,主要是名稱、描述和價格。 您可以選擇隱藏其中一些信息,但不能向塊中添加更多元素。 如果您想包含更多詳細信息,則需要添加一個段落(或其他內容)塊。

結論

特色產品 WooCommerce 塊使您能夠突出顯示頁面或博客文章上的特定項目。 這可以成為推廣新產品和增加銷售額的有效方式。

正如我們所看到的,這個塊帶有一個 CTA 按鈕,鼓勵用戶購買你的特色產品。 它還使您能夠為項目使用獨特的圖像,並調整覆蓋顏色和按鈕樣式以使塊更具視覺吸引力。

您對如何在 WooCommerce 中使用特色產品塊有任何疑問嗎? 在下面的評論部分讓我們知道!

精選圖片來自 FOTOSPLASH/shutterstock.com

來源

相關文章