如何自定义 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 店面缩略图大小