關鍵要點

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

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

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

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

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

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

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

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

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

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 產(chǎn)品/類別

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

調整 WooCommerce 模板文件

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

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

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

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 文件。

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

結論

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

關於自定義 WooCommerce 產(chǎn)品頁面的常見問題

自定義我的 WooCommerce 產(chǎn)品頁面的基本步驟是什麼？

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

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

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

如何在我的 WooCommerce 產(chǎn)品頁面中添加自定義字段？

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

如何更改我的 WooCommerce 產(chǎn)品頁面的佈局？

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

如何在我的 WooCommerce 產(chǎn)品頁面中添加產(chǎn)品變體？

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

如何提高我的 WooCommerce 產(chǎn)品頁面的移動響應能力？

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

如何在我的 WooCommerce 產(chǎn)品頁面中添加自定義產(chǎn)品描述？

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

如何在我的 WooCommerce 產(chǎn)品頁面中添加客戶評論？

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

如何優(yōu)化我的 WooCommerce 產(chǎn)品頁面以進行 SEO？

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

如何在我的 WooCommerce 產(chǎn)品頁面中添加相關產(chǎn)品？

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

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