如何⾃定义WooCommerce产品页⾯
When planning a WooCommerce store, you will have to answer a lot of up-front questions that will have a serious impact on the future success of the store. The setup of the store is a serious challenge because once done, changes to the setup and design of the store are always difficult. To customize WooCommerce product pages, you’ll have to consider the options available to you, which I’ll get into in this post.
在计划WooCommerce商店时，您将不得不回答很多前期问题，这些问题会对商店的未来成功产⽣严重影响。 商店的设置是⼀个严峻的挑战，因为⼀旦完成，更改商店的设置和设计总是很困难的。 要⾃定义WooCommerce产品页⾯，您必须考虑可⽤的选项，我将在本⽂中介绍这些选项。
Now once the store is up, the next challenge is the clutter on the product pages. WooCommerce Single Product page has a lot of elements that do not directly help with the custom design and setup of the store. Two common culprits are product categories and star ratings. Not every store needs these two elements on the Single Product page. Similarly, other elements also need to be repositioned in order to fit into the store’s custom design.
现在，⼀旦商店开张，下⼀个挑战便是产品页⾯上的混乱情况。 WooCommerce单⼀产品页⾯包含许多
元素，这些元素⽆法直接帮助商店的⾃定义设计和设置。 罪魁祸⾸是产品类别和星级。 并⾮每个商店都需要“单⼀产品”页⾯上的这两个元素。 同样，还需要重新定位其他元素以适合商店的定制设计。
All these challenges could be tackled very easily through WooCommerce action and filter hooks. I have created this short list of things to demostrate what you could customize in the Product Page.
所有这些挑战都可以通过WooCommerce动作和筛选器挂钩轻松解决。 我创建了这个简短的清单，以演⽰您可以在“产品页⾯”中⾃定义的内容。
⾃定义WooCommerce产品页⾯ (Customize WooCommerce Product Pages)
The first thing you might wish to do is to display products in a different template than the default. The file single-product.php, which controls the template files that display product information on the frontend, should be loaded.
您可能希望做的第⼀件事是在与默认模板不同的模板中显⽰产品。 应该加载⽂件single-product.php ，该⽂件控制在前端显⽰产品信息的模板⽂件。
A common practice when customizing the template pages of parent themes and plugins that is often recommended is to make a copy of the template in the theme. Now make all changes in the copy onl
y. This way, if the themes and plugins are updated, your custom changes will remain unaffected.
⾃定义⽗主题和插件的模板页⾯时，通常建议的⼀种常见做法是在主题中复制模板。 现在，仅在副本中进⾏所有更改。 这样，如果主题和插件已更新，则您的⾃定义更改将不受影响。
Several plugins and themes provide an extensive collection of custom action and filter hooks that allow changes directly
into theme file(s). The good thing about all this is that you do not have to go through and modify the markup of the template files. The result is a cleaner code and no messy duplication of files.
⼏个插件和主题提供了⼤量⾃定义操作和过滤器挂钩，这些挂钩可直接将更改更改为主题⽂件。 所有这⼀切的好处是您不必遍历和修改模板⽂件的标记。 结果是更简洁的代码，并且不会造成⽂件混乱。
I will use single-product.php to call template files that control the information and the format of how the product’s information will be displayed on the product page. Similarly, content-single-product.php is the product template and is modified to change the information and styling of the product page. Now open single_template and add the following code to change the template for the Single Product page:
我将使⽤single-product.php来调⽤模板⽂件，该模板⽂件控制信息以及如何在产品页⾯上显⽰产品信息的格式。 类似地， content-single-product.php是产品模板，并经过修改以更改产品页⾯的信息和样式。 现在打开single_template并添加以下代码以更改Single Product页⾯的模板：
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' );
as well as following code include in 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产品/类别 (Build Custom WooCommerce Product/Category)
At this point, I am assuming that you have a live WooCommerce store and are pretty familiar with the process of setting up a product page and product category. There are always cases where you need a custom product page or a custom product category page. This is done by tweaking the custom template of these templates.
⾄此，我假设您有⼀家在线WooCommerce商店，并且对设置产品页⾯和产品类别的过程⾮常熟悉。 在某些情况下，您需要⾃定义产品页⾯或⾃定义产品类别页⾯。 这是通过调整这些模板的⾃定义模板来完成的。
调整WooCommerce模板⽂件 (Tweak WooCommerce Template Files)
Now remember that when working with the content-single-product.php file, modify it so that whatever product or category you add should come at the end of the file. Another good practice is to give it a name that makes it stand out and be readily identified. For instance, if you have category with the name “Books”, change the file’s name to content-single-product-books.php. This simple change will make sure that you could identify the correct file for a particular category immediately. This file is used to make all sorts of changes (addition or removal of a sidebar, changes in the loop etc.) to make sure that the product or product category page looks exactly the way you want.
现在请记住，在使⽤content-single-product.php⽂件时，请对其进⾏修改，以便您添加的任何产品或类别都应位于⽂件末尾。 另⼀个好的做法是给它起⼀个醒⽬的名称并易于识别。 例如，如果您的类别名称为“ Books”，则将⽂件的名称更改为content-single-product-books.php 。 这个简单的更改将确保您可以⽴即为特定类别识别正确的⽂件。 该⽂件⽤于进⾏各种更改(添加或删除侧边栏，循环中的更改等)，以确保产品或产品类别页⾯的外观完全符合您的要求。
The next order of business is changes in the single-product.php file. This file contains the loop that decides which templates would be loaded up to display the products.
接下来的⼯作是更改single-product.php⽂件。 该⽂件包含⼀个循环，该循环决定将加载哪些模板来显⽰产品。
I will add an if condition that checks whether a product belongs to a particular category and then load the related single-product.php in the custom template. Now, there is no real need to rename the file. In order to add the code to it, open up the file and find the following code snippet:
我将添加⼀个if条件，该条件检查产品是否属于特定类别，然后在⾃定义模板中加载相关的single-product.php 。 现在，没有真正需要重命名该⽂件。 为了向其中添加代码，请打开⽂件并到以下代码⽚段：
woocommerce_get_template_part( 'content', 'single-product' );
You will want to replace it with the following code
您将要⽤以下代码替换它
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' );
}
In the code, find YOURCATEGORY, and replace it with the category slug of your choice. In addition, you would need to replace the content-single-product.php with the new name of the file. Using the example used above where the category
slug was “books” and the content-single-product.php was renamed to content-single-product-books.php. At this point the code looks like:
在代码中，到YOURCATEGORY ，并将其替换为您选择的类别YOURCATEGORY 。 另外，您需要⽤⽂件的新名称替换content-single-product.php。 使⽤上⾯使⽤的⽰例，其中类别“ slug”是“ books”，并且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' );
}
At this point, all the files have been successfully edited and/or renamed. The next step is to upload these files to the WooCommerce store. In order to make sure that all things go smoothly, makes sure that there is a subfolder named
/woocommerce/ in the theme’s directory. Remember that both files (content-single-product.php and single-product.php) will go in the same folder. It is a good practice to change code elements in this folder of the theme so that you could prevent the difficult-to-debug error of overwriting the original WooCommerce files.
⾄此，所有⽂件均已成功编辑和/或重命名。 下⼀步是将这些⽂件上传到WooCommerce商店。 为了确保⼀切顺利，请确保在主题⽬录中有⼀个名为/woocommerce/的⼦⽂件夹。 请记住，两个⽂件( content-single-product.php和single-product.php )都将放在同⼀⽂件夹中。 更改主题⽂件夹中的代码元素是⼀种很好的做法，这样可以避免覆盖原始WooCommerce⽂件时难以调试的错误。
The final step is to check the product and product category pages to make sure that all the changes made in the code of the custom template have been applied and are showing up perfectly.
最后⼀步是检查产品和产品类别页⾯，以确保在⾃定义模板的代码中所做的所有更改都已应⽤并完美显⽰。
结论 (Conclusion)
Learning to customize WooCommerce product pages and product category pages is a matter of adding and modifying hooks. It is important to understand that all these changes have direct impact on the way these two pages are rendered on the store’s front end. If you need any help with the code or any other aspect of the idea, do leave a comment and I will get back to you.
学习⾃定义WooCommerce产品页⾯和产品类别页⾯是添加和修改挂钩的问题。 重要的是要了解，所有这些更改都会直接影响这两个页⾯在商店前端的呈现⽅式。 如果您在代码或构想的任何其他⽅⾯需要任何帮助，请发表评论，我会尽快与您联系。