在 WordPress 中修復 WooCommerce 產品頁面的 3 種方法
已發表: 2022-10-28如果您在 WordPress 上運行 WooCommerce 商店,那麼您可能會遇到產品頁面未正確顯示在您的主題中的問題。 這可能是一個令人沮喪的問題,但幸運的是,您可以採取一些措施來解決它。 在本文中,我們將向您展示如何修復WordPress 主題中的 WooCommerce 產品頁面。 我們將介紹三種不同的方法: 1. 更新您的 WooCommerce 模板文件 2. 修改主題的 CSS 3. 添加自定義 WooCommerce 產品頁面模板 讓我們開始吧!
WooCommerce 商店的產品頁面通常是最重要的頁面之一。 創建一個視覺上獨特的頁面是保持商店風格全面一致的重要部分。 在本教程中,我們將向您展示如何使用 Astra Pro 輕鬆自定義單個 WooCommerce 產品頁面佈局。 Elementor WooCommerce Builder 將用於完成此操作。 因此,您選擇使用的圖像必須進行排列,以便您的產品在轉換過程中清晰可見。 單一產品定制器允許您更改圖庫佈局和圖像寬度。 此外,您可以啟用或禁用 Ajax 添加到購物車功能(標題上方的產品路徑)並啟用麵包屑(標題上方的產品路徑)。
如果您沒有安裝和激活 WooCommerce,則 Elementor 提供的產品模板將不可用。 強烈建議您選擇為您的公司預先設計的模板,並對其進行自定義以適合您的品牌。 即使您沒有立即創建模板的必要技能,只要努力,您仍然可以做到。 確保您的單個產品頁面嵌入了產品小部件,以便為您的客戶提供獨特的購物體驗。 Elementor 產品頁面構建器允許您控制構成它的所有元素。 產品標題、圖庫、圖像、價格、評級、簡短描述、麵包屑、數據選項卡、庫存、相關、追加銷售、添加到購物車、元、內容和附加信息都可以顯示為小部件組件。 添加到購物車小部件通過顯示添加到購物車按鈕的自定義和佈局來向購物車添加功能。
產品標籤小部件是訪問產品信息的主要方式。 您可以通過選擇特定產品來更改相關產品小部件的樣式。 單擊此按鈕時,您將能夠在桌面、平板電腦和移動查看選項之間切換。 默認情況下,我們創建的模板將應用於您 WooCommerce 商店的所有產品頁面。 在頁面左下角,選擇設置圖標,然後點擊新產品頁面上的眼睛圖標進行預覽。 記下所需的字體大小。 您可以使用產品過濾器或做空插件來優化您的商店。
您可以按層次順序組織所有產品信息,以便客戶可以了解有關您的產品的更多信息。 圖像優化插件可以優化高分辨率圖像,但它們並非旨在加速您的網站。 通過允許客戶在圖像中看到產品,他或她將對他們的決定更有信心。 如果您希望您的客戶快速了解價格,請自定義產品頁面,使其以大字體顯示。 如果您想突出價格,請使用對比色。 原價以及任何折扣應顯示在新價格旁邊。 如果你還沒有決定你的設計,如果價格不是很清楚,你可能需要重新考慮。
Woocommerce 產品頁面未正確顯示

這個問題可以通過轉到產品部分然後是目錄可見性部分來解決。 該設置現在應該是“商店和搜索結果”。 當您輸入此信息時,您的產品將出現在您的 WooCommerce 頁面和搜索頁面結果中。
Toolset 客戶在使用 WooCommerce 單一產品頁面時遇到問題。 Espa*ol(西班牙語)是英語(English)的一個很好的替代品。 歐洲/倫敦的時區是 01:00 am (GMT)。 我注意到,如果 Layouts 處於活動狀態並且您已經為您的產品創建了自定義模板,即使 WooCommerce 視圖設置聲明應該使用標準模板,也會使用該模板。 您的站點是一個多站點,無法通過插件自定義或禁用/啟用,因此他無法訪問它。 我如何向他發送超級管理員密碼? 我已經驗證了 Layout 模板正在產品上使用,並且它看起來與您期望的不完全一樣是有原因的。

其他不使用 Bootstrap 的主題一般應避免使用佈局。 可以使用視圖內容模板代替視圖。 儘管他們缺乏將內容放入列中的能力,但他們有一個空白畫布用於標記。 佈局會導致單個產品頁面的結構發生變化,從而導致無法正確標記頁面內容。 WordPress 視圖設置允許您選擇是否使用產品的佈局,而不是其模板; 在我們的例子中,您可以選擇是使用產品的佈局還是其 WooCommerce 模板。 Products 單頁佈局將與 Layouts 佈局不兼容。 如果您已經為產品或商店分配了佈局,請從每個產品(不要使用佈局)或模板佈局中刪除該分配。
現在,您的產品將按照它們出現在主題中的方式呈現。 如果產品顯示錯誤,很可能是由於主題,如您所知,工具集對之後的輸出沒有影響。 如果您的網站沒有任何一個處於活動狀態,則 WooCommerce 視圖和佈局不會有問題。 您可以禁用整個工具,以確保您的產品正是主題想要的。 由於共享的屏幕截圖,圖像不會發生任何變化。
檢查評論是否未出現在產品頁面上的 3 件事
當評論沒有出現在產品頁面上時,有一些事情需要尋找。 如果您不希望評論出現在產品頁面上,可以禁用評論。 要禁用評論,請轉到產品。 如果您無法添加或編輯評論,您可能需要清除瀏覽器緩存。 如果清除緩存後問題仍然存在,您可能需要修改主機設置。 使用 WordPress 主題時,您可能需要修改其評論設置。 您可以通過外觀進入評論部分。 您必須將滑塊設置為 true 或屏幕右側的一個。
如何將 Woocommerce 產品添加到 WordPress 頁面
將 WooCommerce 產品添加到WordPress 頁面是一個簡單的過程,只需幾個步驟即可完成。 1. 登錄您的 WordPress 網站並轉到您要添加產品的頁面。 2. 點擊編輯器上方的“添加媒體”按鈕。 3. 單擊“上傳文件”選項卡。 4. 從您的計算機中選擇您要添加的 WooCommerce 產品。 5. 單擊“插入頁面”按鈕。 該產品現在將添加到 WordPress 頁面。
將產品添加到 WooCommerce 商店中的任何帖子或頁面的過程。 如果您使用 Product Table 插件,您可以在表格/列表佈局中顯示產品,允許用戶將它們添加到他們的購物車,而無需離開顯示它們的帖子或頁面。 要在任何帖子或頁面中顯示產品,我們將向您展示如何創建產品表。 要在創建表後保存更改,請單擊屏幕右上角的保存更改。 要在帖子或頁面的任何位置插入表格,我們需要表格的簡碼。 要復制短代碼,請轉到插件的常規設置。 此短代碼可用於在您商店的任何帖子或頁面上顯示表格。
要粘貼簡碼,我們必須首先包含一個簡碼塊。 我將在帖子的第一段之後粘貼該塊。 帖子更新後,您可以查看產品表是否已添加。 用戶現在可以在離開博客文章後將任何產品添加到他們的購物車。 使用 WordPress 塊編輯器,您可以將產品添加到任何頁面或帖子。 因為塊編輯器包含在 WordPress 的最新和即將發布的版本中,所以我們不必安裝任何插件來實現此方法。 在安裝 Gutenberg 插件之前,請確保您擁有包含經典編輯器的舊版 WordPress。
按類別選擇產品以將產品添加到您的 WooCommerce 頁面或將它們發佈到您的商店。 通過在搜索欄中輸入產品名稱來查找產品,搜索欄中將顯示與產品相關的所有塊的列表。 選擇類別後,系統會提示您通過單擊“完成”按鈕添加產品。 要更新頁面,請單擊屏幕右上角的更新按鈕。