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

问题描述

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

一切都很好，但它显示在第二列中。可能是因为有 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/

标签： phpwordpresswoocommercehtml-tablewoocommerce-theming

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

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
}

添加过滤器woocommerce_product_tabs和钩子标签生成功能woo_new_product_tab
将您的选项卡配置数组（不言自明）推送到钩子函数参数中$tabs
最后，返回参数$tabs

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

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

它的外观：

繁琐冗长的维护方式：

要完成您想要的更改，您必须覆盖模板，但是当您在添加到购物车按钮上方添加表格数据时存在复杂性。但是您可以按照本教程中说明的过程覆盖模板。

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

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

function woocommerce_show_product_images() { wc_get_template( 'single-product/product-image.php' ); }
在 WooCommerce 插件single-product/product-image.php的以下相对路径中的路径中获取模板wp-content/plugins/woocommerce/templates/single-product/product-image.php
希望您了解结构流程，如果您确实需要覆盖它，请了解这些模板如何粘合在一起并将其覆盖为您想要的方式
当主题提供者更新您必须再次更新的模板时，您所做的这种定制方式将导致定制时间延长

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

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

两个部分模板是：

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

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

问题描述

解决方案

推荐阅读