[ad_1]
標準的WooCommerce產品頁面功能強大，外觀也不錯！但是我們可以做得更好，特別是將WooCommerce和Elementor結合起來！
在本指南中，我們向您展示如何構建自定義（精美）的WooCommerce產品頁面以「讚歎」您的客戶併產生更多的銷售額。
如何使用@elemntor??️創建漂亮的#WooCommerce＃產品頁面#WordPress
你需要什麼
除了您已經擁有的東西之外， WordPress安裝 和 WooCommerce 最重要的是-您需要 元素 頁面構建器插件。
Elementor有兩種口味– 免費和付費。雖然Elementor free中有一些可用於WooCommerce的自定義項，但是要獲得真正的好東西，您需要升級到專業版。一個網站的費用為49美元。
注意; Elementor不是唯一可以與WooCommerce一起使用的頁面構建器，並且可以讓您構建自定義的WooCommerce產品頁面。 這裡有一些選擇 如果您想探索那裡還有什麼。也就是說，Elementor是我們最喜歡的WooCommerce定製解決方案。
在開始上班之前，您 必須安裝 您網站上的Elementor免費插件和Elementor專業插件：
- 免費安裝Elementor很簡單。只需轉到插件→添加新內容，然後在搜索框中輸入Elementor。安裝並激活。
- 要安裝Elementor pro，您首先必須在Elementor.com上完成購買。您可以從用戶個人資料中下載Elementor pro軟體包-這是一個ZIP文件。轉到插件→添加新項，然後單擊上傳插件按鈕。從桌面上選擇Elementor ZIP，然後將其上傳到您的站點。激活插件。
在一切正常運行之前，Elementor會要求您驗證許可證。
使用Elementor創建一個新的WooCommerce產品頁面
首先，轉到模板，然後單擊添加新。
從列表中，選擇「單一產品」。
Elementor將顯示一些可以立即使用的現成的WooCommerce產品頁面模板。對於大多數用戶來說，選擇看起來最接近您想要的東西的最佳途徑。從頭開始創建產品模板通常會花費更多時間。修改現有模板更加容易。單擊插入以獲取模板。
您會看到模板已添加到Elementor畫布上。現在，您可以根據自己的喜好自定義模板–在頁面上添加新元素，自定義當前元素，刪除不需要的內容，等等。
在左側邊欄中，您會注意到一系列WooCommerce元素，例如產品標題，產品圖片，產品價格以及WooCommerce顯示的有關您產品的所有其他數據。
您可以採用所有這些元素，然後將它們拖動到畫布上您需要它們的確切位置。
您可以先執行以下一些自定義操作：
添加您的品牌和顏色
庫存的Elementor產品模板看起來不錯，但它們可能與您的品牌不完全匹配。我們可以解決的一項快速更改是調整背景顏色，字體顏色和各種 版式 一般設置。
要調整頁面上的任何圖塊，請單擊圖塊右上角的鉛筆圖標。
然後，在左側邊欄中，切換到「樣式」選項卡。在這裡您可以執行所有與樣式和外觀相關的自定義。例如，對於「產品標題」塊，您可以更改文本的顏色，字體和陰影。
讓我們點擊「版式」。這將顯示另一個框，您可以在其中更改字體及其所有參數。
逐一瀏覽所有文本並進行編輯，直到它們看起來像您想要的那樣。請特別注意價格塊的外觀–價格塊必須清晰可見，以免混淆客戶。
重新調整/移動產品說明
WooCommerce在少數地方顯示您的產品描述。我們不需要立即了解所有細節，而只需要關注兩件事：
- 簡短說明
- 您的產品數據標籤
簡短的說明就是它的發音。 WooCommerce從「簡短描述」框（創建新產品時填寫的欄位之一）中獲取此文本。最好在產品頁面頂部附近的位置顯示簡短說明。
您可以將Elementor的「簡短說明」塊拖放到需要的位置。
產品數據標籤實際上是存放有關產品主要信息的模塊。確保它在新的WooCommerce產品頁面模板中的可見位置。
別忘了為這些方塊的顏色和版式設置樣式。
調整「添加到購物車」按鈕
「添加到購物車」按鈕是任何電子商務網站上最重要的單個按鈕。您確實希望它脫穎而出並引起客戶的注意。
您可以將兩種不同的塊類型用於Elementor中的「添加到購物車」按鈕。有添加到購物車塊和自定義添加到購物車塊。
對它們兩個進行試驗，以查看哪種情況更好。單擊鉛筆圖標，然後查看側邊欄中有關給定塊設置的可用內容。
只需單擊幾下，即可使按鈕看起來更好。
添加/刪除產品評分
顯示產品等級可能是使您的顧客最終購買商品的好方法。唯一的問題是，您首先需要獲得一些評級。 ♂♂️
如果您的商店是全新的，並且您還沒有任何評分，最好不要在頁面上顯示評分等級。右鍵單擊「產品評分」元素，然後將其刪除。
稍後，您可以重新添加該塊，甚至自定義其外觀。您可以更改的某些內容是星星的顏色和事物的間距。
調整手機和平板電腦的視圖
如今，越來越多的人通過智能手機訪問網路 比台式電腦和筆記本電腦。因此，您的商店必須針對移動觀看進行優化，否則您將失去銷售！
WooCommerce已經針對移動設備進行了優化，但是由於我們正在創建自定義產品頁面，因此我們需要確保您的新產品模板也看起來不錯。
在Elementor界面的左下角，有一個標記為「響應模式」的按鈕。
當您單擊它時，將能夠在「桌面」，「平板電腦」和「移動」視圖之間切換。選擇其中之一，並根據需要調整設計。
這裡很酷的是，您可以更改塊的顯示設置，使其僅在移動設備或平板電腦上生效。例如，如果您認為移動設備上的價格應該更高，請單擊價格欄中的鉛筆圖標，然後單擊以編輯字體，最後在字體大小旁邊切換到「移動設備」：
如果現在更改字體大小，將僅影響移動視圖。
逐個模板地瀏覽模板，直到為移動設備和平板電腦查看器配置了所有內容。
發布自定義WooCommerce產品頁面
準備好新產品模板後，單擊Elementor界面左下角的「發布」按鈕。
Elementor將要求您添加何時使用模板的條件。
要使模板用於所有產品，只需從列表中選擇「產品」，如下所示：
單擊「保存並關閉」完成所有操作。
這就對了！ ?完成此操作後，您的自定義WooCommerce產品頁面已保存並替換為默認產品頁面。
當您訪問商店中的任何產品時，都可以看到正在使用的產品頁面。
