如何自定义WooCommerce产品页面

关键要点

• WooCommerce 产品页面定制利用操作和过滤器钩子，直接修改主题文件，无需修改模板文件的标记。
• 通过加载 single-product.php 文件并在主题中复制模板来定制产品页面，所有更改都在副本中进行，确保在更新主题和插件时自定义更改不受影响。
• 通过调整这些页面的自定义模板，并确保添加的新产品或类别位于 content-single-product.php 文件的末尾，可以创建自定义产品页面或产品类别。
• 使用 Elementor 和 Beaver Builder 等插件，无需编码知识即可定制 WooCommerce 产品页面，这些插件提供拖放界面，方便自定义。

在规划 WooCommerce 商店时，您需要提前回答许多问题，这些问题将严重影响商店未来的成功。商店的设置是一项严峻的挑战，因为一旦完成，对商店设置和设计的更改总是很困难。要自定义 WooCommerce 产品页面，您必须考虑可用的选项，我将在本文中介绍这些选项。

现在，商店上线后，下一个挑战是产品页面上的杂乱无章。WooCommerce 单个产品页面有很多元素并不直接有助于商店的自定义设计和设置。两个常见的罪魁祸首是产品类别和星级评定。并非 每个 商店都需要在单个产品页面上显示这两个元素。同样，其他元素也需要重新定位才能适应商店的自定义设计。

所有这些挑战都可以通过 WooCommerce 操作和过滤器钩子轻松解决。我创建了这个简短的列表，以演示您可以在产品页面中自定义的内容。

自定义 WooCommerce 产品页面

您可能希望做的第一件事是以与默认模板不同的模板显示产品。应加载 single-product.php 文件，该文件控制在前端显示产品信息的模板文件。

自定义父主题和插件的模板页面的常用做法（通常建议）是在主题中复制模板。现在只在副本中进行所有更改。这样，如果更新主题和插件，您的自定义更改将保持不变。

几个插件和主题提供了大量的自定义操作和过滤器钩子，允许直接修改主题文件。所有这一切的好处是您不必修改模板文件的标记。结果是更简洁的代码，没有凌乱的文件重复。

我将使用 single-product.php 来调用控制产品信息以及产品信息在产品页面上显示方式的格式的模板文件。类似地，content-single-product.php 是产品模板，修改它可以更改产品页面的信息和样式。现在打开 single_template 并添加以下代码以更改单个产品页面的模板：

<code class="language-php">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' );

以及以下包含在模板 _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;
}</code>

构建自定义 WooCommerce 产品/类别

在这一点上，我假设您有一个活动的 WooCommerce 商店，并且非常熟悉设置产品页面和产品类别的过程。总有一些情况需要自定义产品页面或自定义产品类别页面。这是通过调整这些模板的自定义模板来完成的。

调整 WooCommerce 模板文件

现在请记住，在使用 content-single-product.php 文件时，对其进行修改，以便您添加的任何产品或类别都应位于文件的末尾。另一个好习惯是为其命名，使其脱颖而出并易于识别。例如，如果您有一个名为“书籍”的类别，请将文件名更改为 content-single-product-books.php。这个简单的更改将确保您可以立即识别特定类别的正确文件。此文件用于进行各种更改（添加或删除侧边栏、循环中的更改等），以确保产品或产品类别页面完全符合您的要求。

接下来的工作是更改 single-product.php 文件。此文件包含确定要加载哪些模板以显示产品的循环。

我将添加一个 if 条件，该条件检查产品是否属于特定类别，然后在自定义模板中加载相关的 single-product.php。现在，实际上不需要重命名文件。为了向其中添加代码，请打开文件并找到以下代码片段：

<code class="language-php">woocommerce_get_template_part( 'content', 'single-product' );</code>

您需要将其替换为以下代码：

<code class="language-php">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' );
}</code>

在代码中，找到 YOURCATEGORY，并将其替换为您选择的类别 slug。此外，您需要将 content-single-product.php 替换为文件的新名称。使用上面使用的示例，其中类别 slug 为“书籍”，content-single-product.php 重命名为 content-single-product-books.php。此时，代码如下所示：

<code class="language-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' );
}</code>

此时，所有文件都已成功编辑和/或重命名。下一步是将这些文件上传到 WooCommerce 商店。为了确保一切顺利，请确保主题目录中有一个名为 /woocommerce/ 的子文件夹。请记住，这两个文件（content-single-product.php 和 single-product.php）将位于同一个文件夹中。最好更改主题此文件夹中的代码元素，以便您可以防止难以调试的错误，即覆盖原始 WooCommerce 文件。

最后一步是检查产品和产品类别页面，以确保自定义模板代码中所做的所有更改都已应用并完美显示。

结论

学习自定义 WooCommerce 产品页面和产品类别页面是添加和修改钩子的问题。重要的是要理解，所有这些更改都会直接影响这两个页面在商店前端的呈现方式。如果您需要有关代码或此想法任何其他方面的帮助，请留下评论，我会回复您。

关于自定义 WooCommerce 产品页面的常见问题

自定义我的 WooCommerce 产品页面的基本步骤是什么？

自定义您的 WooCommerce 产品页面涉及多个步骤。首先，您需要在您的 WordPress 网站上安装并激活 WooCommerce 插件。然后，导航到 WooCommerce 设置并选择“产品”选项卡。在这里，您可以调整产品页面的显示设置。您还可以使用子主题或 Elementor 等插件来进一步自定义产品页面的布局和设计。请记住，在将更改上线之前始终预览更改。

我可以在不进行编码的情况下自定义我的 WooCommerce 产品页面吗？

是的，您可以在没有任何编码知识的情况下自定义您的 WooCommerce 产品页面。有几个插件可用，例如 Elementor 和 Beaver Builder，它们提供拖放界面，方便自定义。这些工具允许您只需点击几下即可更改布局、添加或删除元素以及调整产品页面的设计。

如何在我的 WooCommerce 产品页面中添加自定义字段？

可以使用 Advanced Custom Fields 或 WooCommerce Custom Fields 等插件将自定义字段添加到您的 WooCommerce 产品页面。这些插件允许您向产品页面添加其他信息，例如尺寸表、送货信息或产品视频。安装并激活插件后，您可以创建自定义字段并将其添加到您的产品页面。

如何更改我的 WooCommerce 产品页面的布局？

可以使用子主题或页面构建器插件来更改 WooCommerce 产品页面的布局。这些工具允许您重新排列产品页面上的元素、添加新部分或删除不必要的元素。您还可以调整产品页面的宽度、更改产品图像的位置或添加侧边栏以获取其他信息。

如何在我的 WooCommerce 产品页面中添加产品变体？

可以通过 WooCommerce 设置中的“产品数据”部分添加产品变体到您的 WooCommerce 产品页面。在这里，您可以为您的产品创建不同的变体，例如尺寸、颜色或材质。每个变体都可以有自己的价格、SKU 和库存状态。您还可以为每个变体添加图像，以帮助客户直观地了解他们的选择。

如何提高我的 WooCommerce 产品页面的移动响应能力？

可以使用响应式主题或移动优化插件来提高 WooCommerce 产品页面的移动响应能力。这些工具确保您的产品页面在所有设备上都能很好地显示和运行，无论屏幕尺寸如何。您还可以使用 WordPress 自定义器来调整产品页面的移动视图。

如何在我的 WooCommerce 产品页面中添加自定义产品描述？

可以在 WooCommerce 设置的“产品数据”部分添加自定义产品描述到您的 WooCommerce 产品页面。在这里，您可以撰写产品的详细描述，包括其功能、优点和规格。您还可以使用 HTML 来格式化您的描述并添加链接、图像或视频。

如何在我的 WooCommerce 产品页面中添加客户评论？

可以在 WooCommerce 设置的“产品数据”部分添加客户评论到您的 WooCommerce 产品页面。在这里，您可以为您的产品启用评论。您还可以使用 YITH WooCommerce 高级评论或 WooCommerce 产品评论专业版等插件来增强评论的功能，例如添加评论提醒、星级评定或评论过滤器。

如何优化我的 WooCommerce 产品页面以进行 SEO？

优化您的 WooCommerce 产品页面以进行 SEO 包括几个步骤。首先，您需要使用相关的关键词编写独特且描述性的产品标题和描述。您还可以向产品图像添加元标记和替代文本。此外，您可以使用 Yoast SEO 等 SEO 插件来进一步优化您的产品页面，例如创建 SEO 友好的网址、添加模式标记或生成 XML 网站地图。

如何在我的 WooCommerce 产品页面中添加相关产品？

可以在 WooCommerce 设置的“产品数据”部分添加相关产品到您的 WooCommerce 产品页面。在这里，您可以选择“链接产品”选项卡并在“追加销售”或“交叉销售”字段中添加相关产品。您还可以使用 WooCommerce 相关产品或 YITH WooCommerce 经常一起购买等插件以更动态和引人入胜的方式显示相关产品。

以上是如何自定义WooCommerce产品页面的详细内容。更多信息请关注PHP中文网其他相关文章！