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

时间:2014-05-22 08:09:00

标签: php wordpress woocommerce

其实我正在使用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单一产品页面。

任何帮助都会受到赞赏。

由于

2 个答案:

答案 0 :(得分:14)

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

完成上述操作后,在主题文件夹的woocommerce文件夹中查找文件内容单品。你会看到很多钩子和do_action。别恐慌。这些只是调用single-product文件夹中woocommerce文件夹中的文件。在该文件夹中,文件很好地标题和分组,您只需通过查看文件标题就可以知道一个文件的负责人。例如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 -->

答案 1 :(得分:2)

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

  

\ woocommerce \包括\ WC-模板hooks.php

通过修改挂钩(更改或添加新挂钩),您可以更改单个产品页面中的布局和所有内容。