首页 文章

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

提问于
浏览 次
7

其实我正在研究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单一产品页面 .

任何帮助将不胜感激 .

谢谢

php wordpress woocommerce

2 回答

  • 13

    您需要在themes文件夹中创建一个名为 woocommerce 的文件夹，并在theme文件夹中复制woocommere插件的templates文件夹的内容 . 通过这种方式，您可以覆盖默认内容 .

    完成上述操作后，在主题's folder. You'中查找 woocommerce 文件夹中的文件内容单品，看到很多钩子和 do_action . 不要惊慌 . 这些只是调用 woocommerce 文件夹中 single-product 文件夹中的文件 . 在该文件夹中，文件很好地 Headers 和分组，只要看到文件 Headers 就可以知道一个文件的负责人 . 例如 price.php 用于显示价格， product-attributes.php 用于产品属性（如果产品是可变的） .

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

    EDIT

    查看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

    通过修改挂钩（更改或添加新挂钩），您可以更改单个产品页面中的布局和所有内容 .

    回复于

相关问题