Woo commerce：在循环外编辑产品类别页面

Question

我已经建立了一个自定义的 Wordpress 主题，并且正在使用 Woo Commerce 作为购物车插件。其中大部分都集成得很好（我在functions.php中添加了主题的钩子，并将Woo commerce模板页面复制到主题中的woocommerce子文件夹中。）但是我试图在循环之外添加一个包装器（）产品类别页面，并且无法在我的一生中弄清楚我需要编辑什么才能使其正常工作。我需要这样做才能通过 CSS 重新定位产品。我可以将 css 应用于但这对我来说不够具体

到目前为止，我有：

• 对 content-product_cat.php 和 content-product.php 进行了实验（但两者都在循环中运行。
• 尝试了许多其他模板页面
• 我已将标签添加到 wrapper-start.php 和 wrapper-end.php 页面。这适用于其他页面，但不显示在产品类别中

我在网上和 Wordpress 网站上查看过，但它没有提供任何帮助。任何帮助将不胜感激！

原文由 nickstaw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于像这样的小改动，不需要覆盖整个文件。首先尝试使用 WooCommerce 提供的钩子。您可以在您的主题functions.php 中执行此操作。这些函数在您的首页包装器中输出一个自定义包装器。

  function start_wrapper_here() { // Start wrapper
    echo '<div class="custom-wrapper">';
 }

 add_action(  'woocommerce_before_main_content', 'start_wrapper_here', 20  );

 function end_wrapper_here() { // End wrapper
   echo '</div>';
 }

 add_action(  'woocommerce_after_main_content', 'end_wrapper_here', 20  );

如果您想在所有 WooCommerce 页面上添加唯一的包装器，您可以通过向上述函数添加条件语句来实现。 访问 WooCommerce 网站上的此页面以 获取更多条件标签。

  function start_wrapper_here() { // Start wrapper

     if (is_shop()) { // Wrapper for the shop page

        echo '<div class="shop-wrapper">';

     } elseif (is_product_category()) {  // Wrapper for a product category page

        echo '<div class="product-category-wrapper">';

     } elseif (is_product()) { // Wrapper for a single product page

        echo '<div class="product-wrapper">';

     }
 }

 add_action(  'woocommerce_before_main_content', 'start_wrapper_here', 20  );

不要忘记再次关闭它们。

  function end_wrapper_here() { // End wrapper
    if (is_shop()) {

       echo '</div>';

    } elseif (is_product_category()) {

       echo '</div>';

    } elseif (is_product()) {

       echo '</div>';

    }
 }

 add_action(  'woocommerce_after_main_content', 'end_wrapper_here', 20  );

如果您不想更改实际的首页包装器（默认值： <div id="container"> ），您应该为此编辑 WooCommerce 函数。此函数通常会使用 get_template_part() 调用 wrapper-start.php 和 wrapper-end.php 文件。我们现在覆盖这个函数并回显我们自己的包装器。

 function woocommerce_output_content_wrapper() { // Start wrapper for all the page contents
  echo '<div class="custom-wrapper">';
}

add_action(  'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 20  );

function woocommerce_output_content_wrapper_end() { // End wrapper for all the page contents
echo '</div>';
}

add_action(  'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 20  );

原文由 Tim 发布，翻译遵循 CC BY-SA 3.0 许可协议