如何自定义WooCommerce产品页面

以你之姓@ 2022-12-03 09:12 216阅读 0赞

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 only. 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页面的模板：

## 建立自定义的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产品页面和产品类别页面是添加和修改挂钩的问题。 重要的是要了解，所有这些更改都会直接影响这两个页面在商店前端的呈现方式。 如果您在代码或构想的任何其他方面需要任何帮助，请发表评论，我会尽快与您联系。

> 翻译自: [https://www.sitepoint.com/customize-woocommerce-product-pages/][https_www.sitepoint.com_customize-woocommerce-product-pages]

[https_www.sitepoint.com_customize-woocommerce-product-pages]: https://www.sitepoint.com/customize-woocommerce-product-pages/