如何自定義WooCommerce產品頁面

關鍵要點

• WooCommerce 產品頁面定制利用操作和過濾器鉤子，直接修改主題文件，無需修改模板文件的標記。
• 通過加載 single-product.php 文件並在主題中復制模板來定制產品頁面，所有更改都在副本中進行，確保在更新主題和插件時自定義更改不受影響。
• 通過調整這些頁面的自定義模板，並確保添加的新產品或類別位於 content-single-product.php 文件的末尾，可以創建自定義產品頁面或產品類別。
• 使用 Elementor 和 Beaver Builder 等插件，無需編碼知識即可定制 WooCommerce 產品頁面，這些插件提供拖放界面，方便自定義。

在規劃 WooCommerce 商店時，您需要提前回答許多問題，這些問題將嚴重影響商店未來的成功。商店的設置是一項嚴峻的挑戰，因為一旦完成，對商店設置和設計的更改總是很困難。要自定義 WooCommerce 產品頁面，您必須考慮可用的選項，我將在本文中介紹這些選項。

現在，商店上線後，下一個挑戰是產品頁面上的雜亂無章。 WooCommerce 單個產品頁面有很多元素並不直接有助於商店的自定義設計和設置。兩個常見的罪魁禍首是產品類別和星級評定。並非 每個 商店都需要在單個產品頁面上顯示這兩個元素。同樣，其他元素也需要重新定位才能適應商店的自定義設計。

所有這些挑戰都可以通過 WooCommerce 操作和過濾器鉤子輕鬆解決。我創建了這個簡短的列表，以演示您可以在產品頁面中自定義的內容。

自定義 WooCommerce 產品頁面

您可能希望做的第一件事是以與默認模板不同的模板顯示產品。應加載 single-product.php 文件，該文件控制在前端顯示產品信息的模板文件。

自定義父主題和插件的模板頁面的常用做法（通常建議）是在主題中復制模板。現在只在副本中進行所有更改。這樣，如果更新主題和插件，您的自定義更改將保持不變。

幾個插件和主題提供了大量的自定義操作和過濾器鉤子，允許直接修改主題文件。所有這一切的好處是您不必修改模板文件的標記。結果是更簡潔的代碼，沒有凌亂的文件重複。

我將使用 single-product.php 來調用控制產品信息以及產品信息在產品頁面上顯示方式的格式的模板文件。類似地，content-single-product.php 是產品模板，修改它可以更改產品頁面的信息和样式。現在打開 single_template 並添加以下代碼以更改單個產品頁面的模板：

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

以及以下包含在模板 _include 中的代码
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}

構建自定義 WooCommerce 產品/類別

在這一點上，我假設您有一個活動的 WooCommerce 商店，並且非常熟悉設置產品頁面和產品類別的過程。總有一些情況需要自定義產品頁面或自定義產品類別頁面。這是通過調整這些模板的自定義模板來完成的。

調整 WooCommerce 模板文件

現在請記住，在使用 content-single-product.php 文件時，對其進行修改，以便您添加的任何產品或類別都應位於文件的末尾。另一個好習慣是為其命名，使其脫穎而出並易於識別。例如，如果您有一個名為“書籍”的類別，請將文件名更改為 content-single-product-books.php。這個簡單的更改將確保您可以立即識別特定類別的正確文件。此文件用於進行各種更改（添加或刪除側邊欄、循環中的更改等），以確保產品或產品類別頁面完全符合您的要求。

接下來的工作是更改 single-product.php 文件。此文件包含確定要加載哪些模板以顯示產品的循環。

我將添加一個 if 條件，該條件檢查產品是否屬於特定類別，然後在自定義模板中加載相關的 single-product.php。現在，實際上不需要重命名文件。為了向其中添加代碼，請打開文件並找到以下代碼片段：

woocommerce_get_template_part( 'content', 'single-product' );

您需要將其替換為以下代碼：

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

在代碼中，找到 YOURCATEGORY，並將其替換為您選擇的類別 slug。此外，您需要將 content-single-product.php 替換為文件的新名稱。使用上面使用的示例，其中類別 slug 為“書籍”，content-single-product.php 重命名為 content-single-product-books.php。此時，代碼如下所示：

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

此時，所有文件都已成功編輯和/或重命名。下一步是將這些文件上傳到 WooCommerce 商店。為了確保一切順利，請確保主題目錄中有一個名為 /woocommerce/ 的子文件夾。請記住，這兩個文件（content-single-product.php 和 single-product.php）將位於同一個文件夾中。最好更改主題此文件夾中的代碼元素，以便您可以防止難以調試的錯誤，即覆蓋原始 WooCommerce 文件。

最後一步是檢查產品和產品類別頁面，以確保自定義模板代碼中所做的所有更改都已應用並完美顯示。

結論

學習自定義 WooCommerce 產品頁面和產品類別頁面是添加和修改鉤子的問題。重要的是要理解，所有這些更改都會直接影響這兩個頁面在商店前端的呈現方式。如果您需要有關代碼或此想法任何其他方面的幫助，請留下評論，我會回复您。

關於自定義 WooCommerce 產品頁面的常見問題

自定義我的 WooCommerce 產品頁面的基本步驟是什麼？

自定義您的 WooCommerce 產品頁面涉及多個步驟。首先，您需要在您的 WordPress 網站上安裝並激活 WooCommerce 插件。然後，導航到 WooCommerce 設置並選擇“產品”選項卡。在這裡，您可以調整產品頁面的顯示設置。您還可以使用子主題或 Elementor 等插件來進一步自定義產品頁面的佈局和設計。請記住，在將更改上線之前始終預覽更改。

我可以在不進行編碼的情況下自定義我的 WooCommerce 產品頁面嗎？

是的，您可以在沒有任何編碼知識的情況下自定義您的 WooCommerce 產品頁面。有幾個插件可用，例如 Elementor 和 Beaver Builder，它們提供拖放界面，方便自定義。這些工具允許您只需點擊幾下即可更改佈局、添加或刪除元素以及調整產品頁面的設計。

如何在我的 WooCommerce 產品頁面中添加自定義字段？

可以使用 Advanced Custom Fields 或 WooCommerce Custom Fields 等插件將自定義字段添加到您的 WooCommerce 產品頁面。這些插件允許您向產品頁面添加其他信息，例如尺寸表、送貨信息或產品視頻。安裝並激活插件後，您可以創建自定義字段並將其添加到您的產品頁面。

如何更改我的 WooCommerce 產品頁面的佈局？

可以使用子主題或頁面構建器插件來更改 WooCommerce 產品頁面的佈局。這些工具允許您重新排列產品頁面上的元素、添加新部分或刪除不必要的元素。您還可以調整產品頁面的寬度、更改產品圖像的位置或添加側邊欄以獲取其他信息。

如何在我的 WooCommerce 產品頁面中添加產品變體？

可以通過 WooCommerce 設置中的“產品數據”部分添加產品變體到您的 WooCommerce 產品頁面。在這裡，您可以為您的產品創建不同的變體，例如尺寸、顏色或材質。每個變體都可以有自己的價格、SKU 和庫存狀態。您還可以為每個變體添加圖像，以幫助客戶直觀地了解他們的選擇。

如何提高我的 WooCommerce 產品頁面的移動響應能力？

可以使用響應式主題或移動優化插件來提高 WooCommerce 產品頁面的移動響應能力。這些工具確保您的產品頁面在所有設備上都能很好地顯示和運行，無論屏幕尺寸如何。您還可以使用 WordPress 自定義器來調整產品頁面的移動視圖。

如何在我的 WooCommerce 產品頁面中添加自定義產品描述？

可以在 WooCommerce 設置的“產品數據”部分添加自定義產品描述到您的 WooCommerce 產品頁面。在這裡，您可以撰寫產品的詳細描述，包括其功能、優點和規格。您還可以使用 HTML 來格式化您的描述並添加鏈接、圖像或視頻。

如何在我的 WooCommerce 產品頁面中添加客戶評論？

可以在 WooCommerce 設置的“產品數據”部分添加客戶評論到您的 WooCommerce 產品頁面。在這裡，您可以為您的產品啟用評論。您還可以使用 YITH WooCommerce 高級評論或 WooCommerce 產品評論專業版等插件來增強評論的功能，例如添加評論提醒、星級評定或評論過濾器。

如何優化我的 WooCommerce 產品頁面以進行 SEO？

優化您的 WooCommerce 產品頁面以進行 SEO 包括幾個步驟。首先，您需要使用相關的關鍵詞編寫獨特且描述性的產品標題和描述。您還可以向產品圖像添加元標記和替代文本。此外，您可以使用 Yoast SEO 等 SEO 插件來進一步優化您的產品頁面，例如創建 SEO 友好的網址、添加模式標記或生成 XML 網站地圖。

如何在我的 WooCommerce 產品頁面中添加相關產品？

可以在 WooCommerce 設置的“產品數據”部分添加相關產品到您的 WooCommerce 產品頁面。在這裡，您可以選擇“鏈接產品”選項卡並在“追加銷售”或“交叉銷售”字段中添加相關產品。您還可以使用 WooCommerce 相關產品或 YITH WooCommerce 經常一起購買等插件以更動態和引人入勝的方式顯示相關產品。

以上是如何自定義WooCommerce產品頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！