了解 WooCommerce 主题 - 使用我自己的主题

Question

新闻： 在上面的答案之后，我可以再改变一点，但我仍然无法改变我需要的一切。现在最大的问题是：

• 如何删除操作（@hooked）的内容并将其放入新的挂钩中。我可以这样做吗？例如：

• woocommerce_single_product_summary 带来

        * 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
            * @hooked WC_Structured_Data::generate_product_data() - 60
  

我想删除（我知道我必须使用remove(action)来实现它。并将这些内容放入一个新的钩子中：

• woocommerce_single_product_summary 带来

            * @hooked woocommerce_template_single_title - 5
            * @hooked woocommerce_template_single_rating - 10
            * @hooked woocommerce_template_single_price - 10
  

• 还有一个新的钩子“woocommerce_single_product_NEW with

             * @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
  

我该怎么做？

我的页面现在看起来像这样：

谢谢！

---

我是一名初中生，正在学习 PHP 来制作自己的 WordPress 主题。今天，这不是什么大问题，但我有一个新项目，我正在尝试使用 WooCommerce 插件。

我的页眉、侧边栏和页脚工作得很好，但我无法准确理解如何添加自己的主题来设计单个产品页面和其他 WooCommerce 页面，因为我不知道挂钩和功能如何带来内容。

我的目标：

1. 从此更改我的单页产品的所有项目：

我的代码：

<?php
        /**
         * woocommerce_before_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
         * @hooked woocommerce_breadcrumb - 20
         * @hooked WC_Structured_Data::generate_website_data() - 30
         */
        do_action( 'woocommerce_before_main_content' );
    ?>

  <!-- CLOSE - Shows the path of my site Inicio / Shop -->


  <!-- Page Title -->


  <header class="woocommerce-products-header">

    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

    <h1 class="woocommerce-products-header__title page-title">
      <?php woocommerce_page_title(); ?>
    </h1>

    <?php endif; ?>

    <!-- Close Page Title -->


    <!-- Não mostra nada nesse momento -->


    <?php
            /**
             * woocommerce_archive_description hook.
             *
             * @hooked woocommerce_taxonomy_archive_description - 10
             * @hooked woocommerce_product_archive_description - 10
             */
            do_action( 'woocommerce_archive_description' );
        ?>

      <!-- Fecha - Não mostra nada nesse momento -->

  </header>


  <?php if ( have_posts() ) : ?>

  <?php
                /**
                 * woocommerce_before_shop_loop hook.
                 *
                 * @hooked wc_print_notices - 10
                 * @hooked woocommerce_result_count - 20
                 * @hooked woocommerce_catalog_ordering - 30
                 */
                do_action( 'woocommerce_before_shop_loop' );
            ?>

    <?php woocommerce_product_loop_start(); ?>

    <?php woocommerce_product_subcategories(); ?>

    <?php while ( have_posts() ) : the_post(); ?>

    <?php
                        /**
                         * woocommerce_shop_loop hook.
                         *
                         * @hooked WC_Structured_Data::generate_product_data() - 10
                         */
                        do_action( 'woocommerce_shop_loop' );
                    ?>

      <?php wc_get_template_part( 'content', 'product' ); ?>

      <?php endwhile; // end of the loop. ?>

      <?php woocommerce_product_loop_end(); ?>

      <?php
                /**
                 * woocommerce_after_shop_loop hook.
                 *
                 * @hooked woocommerce_pagination - 10
                 */
                do_action( 'woocommerce_after_shop_loop' );
            ?>

        <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

        <?php
                /**
                 * woocommerce_no_products_found hook.
                 *
                 * @hooked wc_no_products_found - 10
                 */
                do_action( 'woocommerce_no_products_found' );
            ?>

          <?php endif; ?>

          <?php
        /**
         * woocommerce_after_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action( 'woocommerce_after_main_content' );
    ?>



            <?php get_footer( 'shop' ); ?>

对于类似的事情：

---

我已经知道哪一部分带来了内容，但我想了解如何更改其中的每一部分。

如果有人可以帮助我或只是在此处链接一些文档，我将非常感激。

谢谢！

Answer 1

如果您想将 woocommerce 修改为您的主题，只需按照说明操作即可。 首先将 woocommerce 支持添加到您的主题中。

add_theme_support( 'woocommerce' );

WooCommerce 插件附带了许多前端 HTML 模板以及电子邮件模板。您可以将它们复制到您的主题中，而不是直接在插件中编辑这些文件（这是一个非常糟糕的主意，因为一旦更新插件，您的所有更改都将丢失！）

在您的主题目录中，创建一个名为“woocommerce”的新文件夹。
导航到 WooCommerce 插件目录并打开“templates”文件夹。模板文件夹有很多子文件夹，其中包含 WooCommerce 使用的所有不同模板。幸运的是，WooCommerce 中的模板文件结构和命名很容易遵循。
在新创建的“woocommerce”文件夹中，复制要编辑的模板文件。请记住此处保持目录结构相同。如果您要编辑的模板位于子文件夹中，请记住在主题目录中创建该子文件夹。
在“woocommerce”文件夹中编辑文件并保存更改。

然后假设我们要更改 WooCommerce 的“我的订单”屏幕中的一些 HTML。

我们需要做的第一件事是找到正确的模板。在本例中，“我的订单”部分位于 WooCommerce 中的“我的帐户”下。目录结构如下所示：

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php 接下来，在主题中创建一个名为“woocommerce”的文件夹，并在该文件夹中创建第二个名为“myaccount”的文件夹。之后，将

my-orders.php 文件复制到该目录中。

您应该留下以下内容：

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php 对此文件所做的任何更改现在都将覆盖原始文件。

帮助链接：

https://code.tutsplus.com/articles/an-introduction-to-theming-woocommerce-for-wordpress--wp-31577

https://slicejack.com/creating-custom-woocommerce-themes/