如何以编程方式编辑 WooCommerce 产品页面

已发表: 2021-01-09

正在寻找在您的电子商务商店中自定义产品页面的方法？在本指南中，我们将向您展示如何以编程方式编辑 WooCommerce 产品页面。

自定义产品页面

即使您可以自定义商店中的任何内容，WooCommerce 中进行大多数自定义的两个主要页面是商店页面和产品页面。如果您想提高销售额并优化购买流程的开始，您需要同时处理这两个问题。我们已经了解了如何自定义 Shop 页面，所以今天我们将向您展示如何以编程方式（使用代码）编辑 Product 页面。

专注于提供最佳客户体验的简洁设计将帮助您改善整体购买流程并提高转化率。自定义产品页面有两种主要方法：

带插件
以编程方式

尽管有些插件可以帮助您，但找到一个具有您想要的所有功能的插件可能是一个漫长的过程。因此，如果您有一些基本的开发人员技能，一个很好的选择是以编程方式编辑 WooCommerce 产品页面。您不仅可以避免安装任何第三方工具，而且还可以更灵活地自定义任何您想要的东西。

如果您想使用插件和页面构建器自定义产品页面，请查看本指南。

如何以编程方式编辑 WooCommerce 产品页面

在本节中，您将学习如何编辑单个产品的 WooCommerce 产品页面。我们将涵盖以下主题。

使用钩子
1. 移除元素
2. 重新排序元素
3. 添加新元素
4. 应用条件逻辑
  1. 登录用户和用户角色
  2. 产品 ID 和分类法
5. 编辑产品标签
6. 支持可变产品
覆盖 WooCommerce 模板文件
1. 编辑元信息
2. 切换到特定产品类别的自定义模板
  1. 编辑 single-product.php 文件
  2. 创建一个新的 content-single-product.php 文件
  3. 创建自定义模板编辑新的 content-single-product.php 文件
使用 CSS 脚本自定义产品页面

WooCommerce 产品页面布局

在开始本教程之前，让我们看一下 WooCommerce 中单个产品的默认产品页面并识别每个元素。请注意模板中的不同部分以及信息的组织方式，因为我们将在本指南的后面部分引用它们。 WooCommerce 单品页面有两个主要的 WooCommerce 文件负责产品页面的输出。

single-product.php ：它为当前布局构建所需的模板
content-single-product.php ：此文件打印模板中的内容

可以使用子主题覆盖这两个文件。这是覆盖 WooCommerce 模板文件的常见做法。但是，您应该尝试使用 WooCommerce 挂钩，而不是在可能的情况下覆盖模板文件，因为这是 WordPress 在自定义网站时推荐的最佳做法之一。

另一方面，对于包含函数或对象的复杂任务，您可能需要编辑模板文件。结合这两种技术，您应该能够实现几乎任何您想要的定制。因此，在本教程中，我们将向您展示如何使用这两种方法编辑 WooCommerce 产品页面。

在我们开始之前，请确保您创建了一个子主题来测试您的脚本或使用插件来生成一个。 让我们看一些实际的例子，这样您就可以了解这些技术中的每一种是如何发挥作用的，从而充分利用您的商店。

1) 使用钩子编辑 WooCommerce 产品页面

注意：如果您不熟悉 WooCommerce 钩子以及如何使用它们，请查看本指南。

1.1) 从单个产品页面中删除元素

您可以使用几个 WooCommerce 挂钩来删除单个产品页面上的任何元素。它们中的每一个都将使用一组特定的元素，因此您需要使用正确的钩子、正确的 WooCommerce 回调函数和正确的优先级值。

例如，如果您想删除所有产品页面的标题，您将在子主题的functions.php文件中使用以下脚本。

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

您将在此处或 WooCommerce 插件的content-single-product.php文件中的注释中找到所有挂钩及其相关参数。现在，让我们看看其他一些示例脚本，以删除不同的元素并自定义产品页面。

 // 删除标题
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
// 移除星级
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
// 删除产品元数据 
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
// 删除描述
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
// 移除图片
remove_action（'woocommerce_before_single_product_summary'，'woocommerce_show_product_images'，20）；
// 删除相关产品
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
// 删除附加信息选项卡
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

1.2) 重新排序元素

重新排序产品页面的元素非常简单。首先，您需要以与我们之前相同的方式移除挂钩，然后您需要使用不同的优先级/订单号再次添加它。例如，以下脚本会将产品描述移动到标题的正下方：

 // 改变描述的顺序
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6);

如您所见，我们删除了该操作，然后以不同的优先级（6 而不是 20）再次添加它。为什么我们选择 6 的优先级/顺序？我们知道 title 元素的优先级值为 5，因此这允许我们知道需要分配给自定义挂钩的优先级值，以便在标题 (6) 之后显示回调元素。

使用我们在第 1.1 点中提供的信息，您可以对任何挂钩和回调执行相同操作，并将它们按您想要的任何顺序放置。

1.3) 添加新元素

如果您需要通过添加新内容来自定义 WooCommerce 产品页面，您可能需要考虑覆盖模板文件。但是，您也可以使用以下钩子添加新内容：

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="? added-content">恭喜，您刚刚添加了一个链接！</a></h4>');
}
);

woocommerce_before_single_product_summary 钩子产品页面定制或者，您可以创建自己的函数：

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
函数 QuadLayers_callback_function(){
    printf('
    <h1> 你好！</h1>
    <div><h5>欢迎来到我的定制产品页面</h5>
    <h4><a href="?link-to-somewere">链接到 somewere！</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

1.4) 单品页面的条件逻辑

我们之前已经看到如何在结帐页面上添加条件字段，但您也可以将它们添加到产品页面。您可以使用任何 WordPress 原生函数创建条件逻辑以满足您想要的要求。让我们看几个例子。

1.4.1) 登录用户和用户角色

user_is_logged_in()是用于验证网站访问者的默认 WordPress 函数。此外，我们可以使用wp_get_current_user()函数来检索与登录用户相关的所有信息。在以下脚本中，我们只是根据用户是否登录及其角色添加一些内容，但您可以添加自定义函数以获得更复杂的功能

add_action('woocommerce_before_single_product','QuadLayers_get_user');
函数 QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    printf ('<h1>你好' .$user->user_nicename.'!</h1>');
    $roles = ( 数组 ) $user->roles;
        if($roles[0]=='管理员'){
            echo "<h4><b>你是 $roles[0]</h4></b>";
        }     
    } 
    别的 {
    返回数组（）；
    }     
}

1.4.2) 产品 ID 和分类法

同样，我们可以检索产品 ID 和/或产品类别。不同之处在于我们将使用全局WP $post对象来获取 ID 和get_the_terms()函数来获取产品类别。

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
函数 QuadLayers_get_product_taxonomies(){ 
    全球 $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
    if($terms_string=='海报'){
        回声“
<h1>这是我们最好的 $terms_string 之一</h1>"; echo "<h2>产品 ID: $post->ID"; } }

上面的脚本将返回一个类别。如果您需要检索多个类别或标签，则需要创建一个更复杂的函数。在应用条件之前，您必须遍历分类法，如下所示：

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
函数 QuadLayers_get_multiple_taxonomies(){
    全球 $post;
    $args = array('taxonomy' => 'product_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $count = count($terms);
 如果 ($count > 0) {
        echo '<div class="custom-content"><h4>标签列表：</h4><ul>';
        foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';}
        回声“</ul></div>”；
    }
}

1.5) 编辑产品标签

woocommerce_product_tabs过滤器钩子允许我们在附加信息部分删除、添加、重新排序或添加新选项卡。以下脚本将删除描述选项卡及其内容，重命名评论选项卡，并将附加信息的优先级更改为第一位。

 add_filter('woocommerce_product_tabs', 'woo_remove_product_tabs', 98);
功能 woo_remove_product_tabs( $tabs ) {
    未设置（$tabs['description']）； // 删除描述选项卡
    $tabs['reviews']['title'] = __('Ratings'); // 重命名评论标签
    $tabs['additional_information']['priority'] = 5; // 首先是附加信息
    返回$标签；
}

以编程方式编辑 WooCommerce 产品页面 - 自定义产品选项卡要编辑选项卡的内容，您需要使用如下回调函数：

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

功能 woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // 自定义描述回调
	返回$标签；
}
功能 woo_custom_description_tab_content() {
	回声'
<h2>自定义说明</h2>
'; echo '这里\'自定义描述'; }

同样，我们可以创建一个新选项卡，如下所示：

 add_filter('woocommerce_product_tabs', 'woo_new_product_tab');
功能 woo_new_product_tab( $tabs ) {	
	// 添加新标签	
	$tabs['test_tab'] = 数组（
		'title' => __( '新产品标签', 'woocommerce' ),
		'优先级' => 50,
		'回调' => 'woo_new_product_tab_content'
	);
	返回$标签；
}
功能 woo_new_product_tab_content() {
	echo '<h2>新产品标签</h2><p>这是您的新产品标签内容</p>。'; 
}

在此示例中，我们刚刚创建了一个名为“新产品选项卡”的新选项卡。这就是它在前端的样子。

1.6) 支持可变产品

产品变体是 WooCommerce 的默认功能，您无需任何自定义即可创建和使用可变产品。但是，您必须遵循 WooCommerce 指南以使自定义解决方案与产品变体兼容。

请务必注意，任何自定义解决方案都必须与整个网站集成，而不是与单个页面集成。所以，记住这一点，我们仍然可以使用一些与可变产品相关的可用钩子。这些钩子只会在它们位于可变产品页面上时触发。

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) 自定义覆盖 WooCommerce 模板文件的产品页面

以编程方式编辑 WooCommerce 产品页面的第二种方法是覆盖模板文件。由于此方法比前一种方法风险更大，因此我们建议您在开始之前创建站点的完整备份。如果您不确定如何操作，请查看本指南以了解如何备份 WordPress 网站。

覆盖 WooCommerce 模板文件类似于覆盖子主题中的任何其他文件，因此为避免在更新主题时丢失自定义项，我们建议您创建子主题或使用这些插件中的任何一个（如果您没有）。

2.1) 编辑元信息

要编辑元信息，我们需要重写负责打印相应数据的模板文件。位于 WooCommerce 插件中的meta.php文件遵循以下路径： woocommerce/templates/single-product/meta.php

现在编辑您的子主题文件目录并创建一个 WooCommerce 文件夹。然后，在其中创建另一个名为single-product的文件夹并将meta.php文件粘贴到那里： Child_theme/woocommerce/single-product/meta.php

在此之后，您应该能够编辑meta.php文件并在前端看到您的更改。以下meta.php示例文件将：

将 SKU 的标签更改为 ID
将标签更改为发布于
移除类别标签

全球$产品；
?>
<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( '发布于：', '发布于：', count( $product->get_tag_ids () ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php do_action('woocommerce_product_meta_end'); ?>
</div>

2.2) 切换到特定产品类别的自定义模板

现在让我们尝试一个更复杂的任务。仅当当前产品属于特定类别时，我们才会覆盖单个产品模板。

2.2.1) 编辑single-product.php文件

首先，复制single-product.php文件并将其粘贴到 WooCommerce 目录中的子主题文件夹中：

Child_theme/woocommerce/single-product.php

然后，打开文件并检查第 37 行： wc_get_template_part('content','single-product');

这就是content-single-product.php文件如何发挥作用，打印当前产品的所有元素以完成循环并构建布局。

我们希望仅当产品属于指定类别时才覆盖此文件，因此我们将删除第 37 行： wc_get_template_part( 'content', 'single-product' ); 并将其替换为以下脚本：

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if ( in_array( '海报', $categories ) ) {
					wc_get_template_part('内容', '单品海报' );
				} 别的 {
					wc_get_template_part('内容', '单一产品');
				}

请注意，我们使用的是 WooCommerce 提供的示例产品，因此我们在此示例中使用了一个名为“海报”的类别。只需将“海报”替换为您网站的现有产品类别即可。

请记住，您可以在WordPress 主仪表板 > 产品 > 类别中找到所有产品类别的 slug。

2.2.2）新建content-single-product.php文件

现在我们需要创建一个新文件来覆盖默认的content-single-product.php文件。该文件的名称中将包含类别 slug。

查看上面的示例，了解如何调用content-single-product-posters.php文件。这很重要，因为文件名必须与上一步中的代码匹配，因此您的文件应命名为content-single-product-/*YOURCATEGORYSLUG*/.php 。

这样， wc_get_template_part( 'content', 'single-product-YOURCATEGORY' )将触发content-single-product-YOURCATEGORY.php文件并覆盖默认的 WooCommerce 模板文件。

只需将默认的content-single-product.php文件粘贴到您的子主题的 WooCommerce 文件夹中，按照上述说明重命名它并制作一些版本来测试它。

2.2.3) 创建自定义模板，编辑新`content-single-product.php`文件

这是一个示例产品页面，仅当当前产品属于“海报”类别时才会显示。您会看到我们添加了一些内容、添加和删除了元素、重新排序并运行了一些短代码。

尽管是一个基本示例，但它会让您了解您可以在模板页面上做什么，并让您探索新的可能性。

 // 移除产品汇总元素
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
remove_action（'woocommerce_single_product_summary'，'woocommerce_template_single_add_to_cart'，30）；
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
	
		// 自定义内容
		printf('<h1>这是<b>'.$post->post_name.' </b>海报</h1>');
		printf('<h4>“海报”类产品的完整定制产品页面</h4>');
		// 描述
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//缩略图
		do_action('woocommerce_before_single_product_summary');
				
		//添加元
		do_action('woocommerce_single_product_summary');
		// 简码
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>联系方式：</h3>".do_shortcode('[wpforms]'); echo "<h3>更多海报：</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

现在，如果我们检查前端，我们将看到以下内容：如何以编程方式编辑 WooCommerce 产品页面 - 特定分类的产品页面模板请注意，我们使用的是全局 post 对象。 var_dump($post); 向您展示与当前产品相关的所有可用信息。您可以使用它的任何数据，就像我们在带有产品描述的示例脚本中所做的那样： $post->post_excerpt 。

3) 使用 CSS 脚本自定义产品页面

以编程方式编辑 WooCommerce 产品页面（和任何其他页面）的另一种方便且简单的方法是使用 CSS 代码。这将帮助您设计产品页面并赋予其业务的外观和感觉。

1. 首先，您需要在您的子主题中创建一个扩展名为.css的新文件，以便您可以在其中添加 CSS 脚本。我们建议您将其命名为single-product.css或类似名称，以便于查找。
2. 然后，将该文件放在与functions.php和style.css文件同级的子主题主文件夹中。
3. 之后，将以下脚本粘贴到您的子主题的functions.php文件中，并在必要时替换您的 CSS 文件的名称。

 add_action('wp_enqueue_scripts', 'load_custom_product_style');
      功能 load_custom_product_style() {
        如果 ( 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 文件不是产品页面时不必要地加载它。

4. 添加此代码段后，您应该能够通过将自定义 CSS 规则添加到 CSS 文件来编辑产品页面的样式。

尽管此方法非常简单，并且可以为您提供快速简便的解决方案，但在某些情况下它可能并不理想。由于可以从前端编辑 CSS，如果用户知道如何使用浏览器开发人员工具，他们可以通过编辑 CSS 轻松使任何隐藏元素可见。

使用 CSS 编辑 WooCommerce 单一产品页面

让我们看看您可以在产品页面上使用一些 CSS 进行的其他一些更改示例。

要应用以下脚本，请在您的 WordPress 仪表板上，转到外观 > 自定义 > 附加 CSS。

更改标题字体大小

这会将您的页面产品标题的字体大小更改为 32。只需调整代码以选择您想要的大小。

 .woocommerce div.product .product_title { 
        字体大小：32px； 
}

更改标题颜色

您还可以自定义产品页面标题的颜色。为此，只需使用以下代码并调整颜色。对于这个例子，我们使用橙色。我们建议您使用像这样的十六进制代码选择器来选择您想要的颜色。

 .woocommerce div.product .product_title { 
            颜色：#FFA500； 
}

更改“立即购买”按钮的颜色

同样，您可以更改“立即购买”按钮的颜色。在此示例中，我们使用的是道奇蓝，但您可以通过调整代码来选择您想要的任何其他颜色。

 .woocommerce div.product .button { 
        背景：#1E90FF； 
}

结论

总之，定制您的在线商店是从竞争对手中脱颖而出的关键。产品页面是任何商店中最重要的页面之一，您可以做很多事情来改善客户体验并提高销售额。

即使您可以为此使用插件，如果您有一些编码技能，我们建议您以编程方式编辑 WooCommerce 产品页面。它为您提供了很大的灵活性来自定义商店的任何元素，而无需安装任何其他工具。在本指南中，我们了解了如何以三种不同的方式自定义产品页面：

使用钩子
覆盖 WooCommerce 模板
使用 CSS 脚本

如果可能，您应该尝试使用 WooCommerce 挂钩而不是覆盖模板文件。这是 WordPress 推荐的最佳实践之一，而且风险较小。但是，对于包含函数或对象的复杂任务，您可能需要编辑模板文件。如果您设法结合这两种技术，您将能够在您的商店中定制您想要的任何东西。

最后，看看包含我们在本教程中使用的所有示例脚本的完整子主题。有关如何自定义商店的更多信息，请查看以下指南：

学习自定义 WooCommerce 模板文件
如何自定义 WooCommerce 商店页面
在 WooCommerce 中自定义添加到购物车按钮
如何删除 WooCommerce 相关产品
如何编辑 WooCommerce 结帐（编码和插件）

您在学习我们的教程后有任何问题吗？请在下面的评论部分告诉我们，我们将尽力为您提供帮助。

如何以编程方式编辑 WooCommerce 产品页面

自定义产品页面

如何以编程方式编辑 WooCommerce 产品页面

WooCommerce 产品页面布局

1) 使用钩子编辑 WooCommerce 产品页面

1.1) 从单个产品页面中删除元素

1.2) 重新排序元素

1.3) 添加新元素

1.4) 单品页面的条件逻辑

1.4.1) 登录用户和用户角色

1.4.2) 产品 ID 和分类法

1.5) 编辑产品标签

1.6) 支持可变产品

2) 自定义覆盖 WooCommerce 模板文件的产品页面

2.1) 编辑元信息

2.2) 切换到特定产品类别的自定义模板

2.2.1) 编辑single-product.php文件

2.2.2）新建content-single-product.php文件

2.2.3) 创建自定义模板，编辑新content-single-product.php文件

3) 使用 CSS 脚本自定义产品页面

使用 CSS 编辑 WooCommerce 单一产品页面

更改标题字体大小

更改标题颜色

更改“立即购买”按钮的颜色

结论

2.2.3) 创建自定义模板，编辑新`content-single-product.php`文件