如何自定義 WooCommerce 產品頁面

已發表: 2021-04-15

自定義 WooCommerce 產品頁面您是否正在尋找一些方法來自定義您的產品頁面？產品頁面的設計和用戶體驗可以對您的銷售產生積極影響。這些頁面以最佳方式展示您的產品，促使購物者按下“添加到購物車”按鈕。

一個好的產品頁面應該是信息豐富的，並且應該有一個整潔的設計。此頁面還應表達您的獨特品牌。

有很多不同的方式來定製商店頁面。您可以使用內置選項、自定義代碼片段和插件。

自定義 WooCommerce 產品頁面

WooCommerce 中進行最多定制的兩個主要頁面是商店頁面和產品頁面。您需要自定義它們以提高您的銷售額並優化購買過程的開始。

我們建議採用簡潔的設計，重點在於提供最佳客戶體驗以提高轉化率。

在這篇文章中，我們將分享一些以編程方式編輯產品頁面的解決方案。

首先，讓我們看一下默認的產品頁面佈局。

WooCommerce 產品頁面佈局

這是產品頁面的顯示方式：頁面佈局

有 2 個主要的 WooCommerce 文件負責產品頁面的輸出。

single-product.php：它為當前佈局構建所需的模板
content-single-product.php：此文件打印模板中的內容

您可以使用子主題覆蓋模板文件。您還可以使用 WooCommerce 掛鉤，而不是在可能的情況下覆蓋模板文件。這是 WordPress 推薦的最佳實踐之一。

讓我們看一些如何自定義產品頁面的實際示例。

使用 Hooks 編輯 WooCommerce 產品頁面

在本節中，我們將使用鉤子來自定義產品頁面。

1.刪除元素

有幾個鉤子可以刪除產品頁面上的不同元素。鉤子適用於特定元素。

這意味著您必須使用正確的鉤子、函數和優先級值。

以下是一些用於刪除不同元素和自定義產品頁面的腳本。將其複制並粘貼到 functions.php 文件中：

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

2.添加新元素

您可以通過創建自己的函數將新內容添加到產品頁面。您應該將其複制並粘貼到 functions.php 文件中：

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

這是結果：添加元素

3. 編輯產品標籤

您可以使用 woocommerce_product_tabs 過濾器掛鉤在“附加信息”部分中刪除、添加、重新排序或添加新選項卡。

下面是一個腳本示例，它將刪除描述選項卡及其內容，重命名評論選項卡，並將附加信息的優先級更改為第一位。您應該將其複制並粘貼到 functions.php 文件中：

add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

這是結果：編輯產品標籤

您可以使用以下代碼創建一個新選項卡。您應該將其複制並粘貼到 functions.php 文件中：

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

這是結果：新標籤

自定義覆蓋 WooCommerce 模板文件的產品頁面

您還可以通過覆蓋模板文件以編程方式編輯 WooCommerce 產品頁面。

但是，需要注意的是，這種方法比前一種方法風險更大。因此，我們建議您在繼續之前創建站點的完整備份。

此過程類似於覆蓋子主題中的任何其他文件。

我們建議創建子主題或插件來進行更改。

1.編輯元信息

在本節中，我們將編輯元信息。這意味著我們要對模板文件負責打印相應的數據。它是 meta.php 文件。

該文件位於 WooCommerce 插件中，遵循以下路徑：woocommerce/templates/single-product/meta.php。

下一步是編輯您的子主題文件目錄並創建一個 WooCommerce 文件夾。

在其中創建另一個名為 single-product 的文件夾並粘貼 meta.php 文件：Child_theme/woocommerce/single-product/meta.php

這將允許您編輯 meta.php 文件並在前端查看您的更改。

以下 meta.php 示例文件將：

將 SKU 的標籤更改為 ID
將標籤更改為發佈於
移除類別標籤

global $product;
?>

<div class="product_meta">

            <?php do_action( 'woocommerce_product_meta_start' ); ?>

            <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

                        <span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>

                                    <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

                                    </span>

                        </span>

            <?php endif; ?>

            <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>

這是結果：更改元描述

2. 使用 CSS 腳本自定義產品頁面

您可以使用 CSS 代碼以編程方式輕鬆編輯 WooCommerce 產品頁面。

它將幫助您設計產品頁面並賦予其業務的外觀和感覺。

您需要做的第一件事是在您的子主題中創建一個帶有 .css 擴展名的新文件，以便您可以在其中添加 CSS 腳本。您可以將其命名為 single-product.css。

將文件放在與functions.php和style.css文件同級的子主題主文件夾中。

將以下腳本粘貼到您的子主題的 functions.php 文件中，並在必要時替換您的 CSS 文件的名稱。

add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );

wp_enqueue_style('product_css');

}

}

if(is_product()) 條件將檢查當前頁面是否為產品頁面。這可以防止在 CSS 文件不是產品頁面時不必要地加載它。

至此，您應該能夠使用自定義 CSS 規則編輯產品頁面的樣式。

結論

在這篇文章中，我們分享了一些自定義產品頁面的方法。但是，在您進行任何更改之前，我們建議您使用像 Hotjar 這樣的工具，它可以為您提供有關訪問者如何與您的頁面交互的數據。

您還可以查看亞馬遜和沃爾瑪等在線零售商在做什麼。您可以通過包含共同特徵來模仿它們的外觀和感覺。

如果您在自定義此頁面時需要任何幫助，請聯繫合格的 WordPress 開發人員。

類似文章

100 多個提示、技巧和片段終極 WooCommerce 隱藏指南
WooCommerce 鉤子列表 » 全球、購物車、結帳、產品
如何以編程方式創建產品 WooCommerce
如何更改店面每行產品數量
如何設置 WooCommerce 產品每公斤價格
在 WooCommerce 中結帳後如何獲取訂單詳細信息
古騰堡 vs Elementor 哪個是更好的 WordPress 頁面構建器
如何在 WooCommerce 中創建自定義類別頁面
如何設置 WooCommerce 結帳頁面的樣式
如何在 WooCommerce 中註銷時清除購物車
如何更改添加到購物車按鈕以閱讀更多 WooCommerce
如何在 WooCommerce 中刪除產品圖像佔位符
如何將貨幣添加到 WooCommerce [自定義貨幣]
如何保持 WooCommerce 描述選項卡默認打開
如何隱藏產品描述標題 WooCommerce
在 WooCommerce 中如何在價格前添加文本 » 在價格前添加文本
如何設置 WooCommerce 店面主題產品頁面全寬
如何更改每頁的產品 WooCommerce 店面主題
如何獲得 WooCommerce 產品標題
如何設置 WooCommerce 店面縮略圖大小