關(guān)鍵要點(diǎn)

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

在規(guī)劃 WooCommerce 商店時(shí)，您需要提前回答許多問(wèn)題，這些問(wèn)題將嚴(yán)重影響商店未來(lái)的成功。商店的設(shè)置是一項(xiàng)嚴(yán)峻的挑戰(zhàn)，因?yàn)橐坏┩瓿桑瑢?duì)商店設(shè)置和設(shè)計(jì)的更改總是很困難。要自定義 WooCommerce 產(chǎn)品頁(yè)面，您必須考慮可用的選項(xiàng)，我將在本文中介紹這些選項(xiàng)。

現(xiàn)在，商店上線後，下一個(gè)挑戰(zhàn)是產(chǎn)品頁(yè)面上的雜亂無(wú)章。 WooCommerce 單個(gè)產(chǎn)品頁(yè)面有很多元素並不直接有助於商店的自定義設(shè)計(jì)和設(shè)置。兩個(gè)常見(jiàn)的罪魁禍?zhǔn)资钱a(chǎn)品類(lèi)別和星級(jí)評(píng)定。並非 每個(gè) 商店都需要在單個(gè)產(chǎn)品頁(yè)面上顯示這兩個(gè)元素。同樣，其他元素也需要重新定位才能適應(yīng)商店的自定義設(shè)計(jì)。

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

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

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

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

幾個(gè)插件和主題提供了大量的自定義操作和過(guò)濾器鉤子，允許直接修改主題文件。所有這一切的好處是您不必修改模板文件的標(biāo)記。結(jié)果是更簡(jiǎn)潔的代碼，沒(méi)有凌亂的文件重複。

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

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;
}

構(gòu)建自定義 WooCommerce 產(chǎn)品/類(lèi)別

在這一點(diǎn)上，我假設(shè)您有一個(gè)活動(dòng)的 WooCommerce 商店，並且非常熟悉設(shè)置產(chǎn)品頁(yè)面和產(chǎn)品類(lèi)別的過(guò)程?？傆幸恍┣闆r需要自定義產(chǎn)品頁(yè)面或自定義產(chǎn)品類(lèi)別頁(yè)面。這是通過(guò)調(diào)整這些模板的自定義模板來(lái)完成的。

調(diào)整 WooCommerce 模板文件

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

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

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

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，並將其替換為您選擇的類(lèi)別 slug。此外，您需要將 content-single-product.php 替換為文件的新名稱(chēng)。使用上面使用的示例，其中類(lèi)別 slug 為“書(shū)籍”，content-single-product.php 重命名為 content-single-product-books.php。此時(shí)，代碼如下所示：

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' );
}

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

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

結(jié)論

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

關(guān)於自定義 WooCommerce 產(chǎn)品頁(yè)面的常見(jiàn)問(wèn)題

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

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

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

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

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

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

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

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

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

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

如何提高我的 WooCommerce 產(chǎn)品頁(yè)面的移動(dòng)響應(yīng)能力？

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

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

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

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

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

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

優(yōu)化您的 WooCommerce 產(chǎn)品頁(yè)面以進(jìn)行 SEO 包括幾個(gè)步驟。首先，您需要使用相關(guān)的關(guān)鍵詞編寫(xiě)?yīng)毺厍颐枋鲂缘漠a(chǎn)品標(biāo)題和描述。您還可以向產(chǎn)品圖像添加元標(biāo)記和替代文本。此外，您可以使用 Yoast SEO 等 SEO 插件來(lái)進(jìn)一步優(yōu)化您的產(chǎn)品頁(yè)面，例如創(chuàng)建 SEO 友好的網(wǎng)址、添加模式標(biāo)記或生成 XML 網(wǎng)站地圖。

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

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

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