如何将 HTML 集成到 WordPress Woocommerce 单一产品页面中

Posted 2023-02-19

【中文标题】如何将 HTML 集成到 WordPress Woocommerce 单一产品页面中

【英文标题】：How to Integrate HTML into WordPress Woocommerce Single Product Page

【发布时间】：2014-07-11 03:48:22

【问题描述】：

实际上，我正在开发 WordPress Woocommerce。我在 WooCommerce 插件中搜索过，我在模板文件夹中看到了单个产品页面，即 single-product.php。并且有一个循环显示完整的产品描述。

<?php while ( have_posts() ) : the_post(); ?>
        <?php wc_get_template_part( 'content', 'single-product' ); ?>
        <?php endwhile; // end of the loop. ?>
        <?php
?>

现在我不明白整个页面设置在哪里以及如何重置其顺序以显示价格、图片、产品描述等不同的产品属性。

所以请帮助我了解如何将我的 html 嵌入或集成到 Woo Commerce 单一产品页面中。

我们将不胜感激。

谢谢

【参考方案1】：

您需要在您的主题文件夹中创建一个名为woocommerce 的文件夹，并将woocommere 插件的模板文件夹的内容复制到您的主题文件夹中。通过这种方式，您可以覆盖默认内容。

完成上述操作后，在您的主题文件夹中的 woocommerce 文件夹中查找文件 content-single-product。你会看到很多钩子和do_actions。不要惊慌。这些只是从woocommerce 文件夹内的single-product 文件夹中调用文件。在该文件夹中，文件的标题和分组很好，您只需查看文件标题即可知道哪个文件负责。例如price.php 用于显示价格，product-attributes.php 用于产品属性（如果产品是可变的）。

玩弄这些文件。如果您需要原始的，您可以在 woocommerce 插件的文件夹中再次找到它们。

编辑

查看第 40-60 行之间的 content-single-product.php：

<div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

    </div><!-- .summary -->

这个do_action( 'woocommerce_single_product_summary' );负责调用上面列出的钩子函数。名称旁边的数字是订单。数字越小，顺序越高。假设您想要它们，但以不同的顺序，您将本节替换为以下内容-

<div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            //do_action( 'woocommerce_single_product_summary' );


            // now call these function directly and change their order ;

             woocommerce_template_single_title();
             woocommerce_template_single_rating();
             woocommerce_template_single_price(); // this will output the price text
             woocommerce_template_single_excerpt(); // this will output the short description of your product.
             woocommerce_template_single_add_to_cart();
             woocommerce_template_single_meta();
             woocommerce_template_single_sharing();
        ?>

    </div><!-- .summary -->

【讨论】：

这对我们大有裨益！

【参考方案2】：

转到您的 woocommerce 插件文件夹中的此文件

\woocommerce\includes\wc-template-hooks.php

通过修改钩子（更改或添加新的），您可以更改布局并全部在单个产品页面中。

【讨论】：

感谢您的回答，但如果我更改挂钩位置，它确实会对页面产生任何影响...

如何将我的 html 嵌入到 single-product.php 页面中？

这样修改插件中的代码是不明智的。我们可能会在您更新插件后立即丢失它们。如果您坚持要更改过滤器，那么我建议您查看add_filter 和remove_filter 函数