如何在 WooCommerce 中的添加到购物车按钮之前显示全宽表格

Question

我想在添加到购物车按钮之前显示全宽表格数据。

一切都很好，但它显示在第二列中。可能是因为有 2 列。我想在具有完整表格宽度的一列中显示表格，并在带有默认视图的表格之后显示表格。

由于输出第一列区域为空，我的表格显示在第二列。

当前代码：

add_action('woocommerce_before_add_to_cart_button','show_product_table');
function show_product_table(){
    global $product;

    ?>

    <style>
.mxtb {
  font-family: verdana, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.mxtb td , th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.mxtb tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

    <h2>Products</h2>

<table class ="mxtb">
  <tr>
    <th>Product</th>
    <th>Grade</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 3</td>
    <td>A2</td>
    <td>Min 200</td>
  </tr>
  <tr>
    <td>Product 4</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 5</td>
    <td>A2</td>
    <td>Min 200</td>
  </tr>
  <tr>
    <td>Product 6</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
</table>
    <?php
}

---

当前输出：

网址：http://testing.rhkshop.in/product/product-3/

Answer 1

最简单的实施和忘记方法：

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
    $tabs['prd_table'] = array(
        'title'     => __( 'Products', 'woocommerce' ),
        'priority'  => 5,
        'callback'  => 'show_product_table'
    );

    return $tabs;
}

function show_product_table(){
    global $product;

    ?>

    <style>
.mxtb {
  font-family: verdana, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.mxtb td , th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.mxtb tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<table class ="mxtb">
  <tr>
    <th>Product</th>
    <th>Grade</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 3</td>
    <td>A2</td>
    <td>Min 200</td>
  </tr>
  <tr>
    <td>Product 4</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
  <tr>
    <td>Product 5</td>
    <td>A2</td>
    <td>Min 200</td>
  </tr>
  <tr>
    <td>Product 6</td>
    <td>A1</td>
    <td>Min 100</td>
  </tr>
</table>
    <?php
}

1. 添加过滤器woocommerce_product_tabs并hook标签生成功能woo_new_product_tab
2. 将选项卡配置数组（不言自明）推入钩子函数参数$tabs
3. 最后返回参数$tabs

让我们探索我们新推的关联数组prd_table 及其值：

1. 关联键 prd_table 将用作我们前端选项卡元素中的类引用
2. title 键将呈现为前端选项卡的标题
3. 我们将priority 设置为5 最低优先级，它首先显示它（降低在选项卡部分中较早呈现的优先级数字，否则如果数字较高则稍后呈现）
4. 键callback指的是回调函数
5. 在这里，我们将 callback 键的值分配为 show_product_table，它在挂钩函数声明下调用您的自定义函数

外观：

---

繁琐且冗长的维护方式：

要完成所需的更改，您必须覆盖模板，但在添加到购物车按钮上方添加表格数据时会出现复杂情况。但是您可以按照tutorial 中说明的过程覆盖模板。

并且您必须在您的主题中覆盖以下模板（我使用适用于所有覆盖主题的 WooCommerce 插件默认模板进行了解释）。

1. single-product.php（使用 woo 函数 wc_get_template_part 渲染部分模板 content-single-product.php）
2. 如果您进一步向下浏览文件content-single-product.php，您会发现包含产品图片和摘要的<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>> 行
3. 产品摘要包含在 div 标签<div class="summary entry-summary"> 中，即在产品图片右侧呈现的内容
4. 如果您只是注意到该摘要 div 标记上方的几行，您会发现行 do_action( 'woocommerce_before_single_product_summary' ); 执行与此操作挂钩的所有挂钩
5. 如果你用搜索词woocommerce_before_single_product_summary搜索你的项目目录（实际上在WooCommerce官方开发人员评论了这个动作挂钩的功能是什么。一些自定义主题可能会错过这就是为什么我建议你搜索完整的项目目录）
6. 这会将我们重定向到帮助文件wp-content/plugins/woocommerce/includes/wc-template-hooks.php 到add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); 行
7. 如果您注意到这将调用文件wp-content/plugins/woocommerce/includes/wc-template-functions.php 中的函数woocommerce_show_product_images

8. 那个函数声明是

   function woocommerce_show_product_images() { wc_get_template( 'single-product/product-image.php' ); }

9. 获取路径single-product/product-image.php中的模板，该路径位于WooCommerce插件中的以下相对路径wp-content/plugins/woocommerce/templates/single-product/product-image.php中

10. 希望您了解结构流程，如果您确实需要覆盖它，请了解这些模板如何粘合在一起并以您想要的方式覆盖它
11. 这种定制方式会导致定制时间延长，因为主题提供商会更新您必须再次更新的模板

所以主要涉及的模板是一个主模板：

wp-content/plugins/woocommerce/templates/single-product.php

两个部分模板是：

1. wp-content/plugins/woocommerce/templates/content-single-product.php 用于产品摘要，即右侧列
2. wp-content/plugins/woocommerce/templates/single-product/product-image.php 用于产品图片，即左侧列