php: cómo mostrar una tabla de ancho completo antes del botón Agregar al carrito en WooCommerce

La forma más fácil, implementada y olvidada:

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. Añadir el filtro woocommerce_product_tabs y enganche la función de generación de pestañas woo_new_product_tab
2. Inserte su matriz de configuración de pestañas (que se explica por sí misma) en el argumento de la función de gancho $tabs
3. Finalmente, devuelve el argumento. $tabs

Exploremos nuestra matriz asociativa recién impulsada prd_table y su valor:

1. La clave asociativa prd_table se usará como una referencia de clase en nuestro elemento de pestaña frontend
2. La clave title se representará como el título de la pestaña en la interfaz
3. Nosotros fijamos priority a 5 la prioridad más baja lo muestra en primer lugar (baje el número de prioridad que se muestra antes en la sección de la pestaña; de lo contrario, si el número es más alto, se mostrará más tarde)
4. La clave callback se refiere a la función de devolución de llamada
5. Aquí le asignamos callback valor de la clave como show_product_table que llama a su función personalizada debajo de la declaración de función de gancho

Cómo se ve:

Forma de mantenimiento engorrosa y prolongada:

Para lograr los cambios deseados, debe anular la plantilla, pero hay una complejidad cuando agrega los datos de la tabla justo encima del botón Agregar al carrito. Pero puede anular la plantilla siguiendo el procedimiento explicado en este tutorial.

Y debe anular la siguiente plantilla en su tema (se me explica usando la plantilla predeterminada de complementos de WooCommerce que se aplica a todos los temas anulados).

1. single-product.php (que hace que la plantilla parcial content-single-product.php usando la funcion woo wc_get_template_part)
2. Si baja más y echa un vistazo al archivo content-single-product.php encontrarás la línea <div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>> que se adjunta la imagen del producto y el resumen
3. El resumen del producto está incluido en la etiqueta div <div class="summary entry-summary"> es decir, las cosas que se representan en el lado derecho de la imagen del producto
4. Si solo anotó unas pocas líneas arriba de esa etiqueta div de resumen, encontrará la línea do_action( 'woocommerce_before_single_product_summary' ); que ejecutan todos los ganchos enganchados a esta acción
5. Si buscó en su directorio de proyectos con el término de búsqueda woocommerce_before_single_product_summary (En realidad, en WooCommerce, el desarrollador oficial comentó cuáles son las funciones vinculadas a esta acción. Es posible que falten algunos temas personalizados, por eso le sugerí que buscara en el directorio completo del proyecto)
6. Lo que nos redirigirá al archivo de ayuda. wp-content/plugins/woocommerce/includes/wc-template-hooks.php a la linea add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
7. Si notó que esto llama a la función woocommerce_show_product_images que esta en el archivo wp-content/plugins/woocommerce/includes/wc-template-functions.php

8. Esa declaración de función es

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

9. Que buscan la plantilla en la ruta. single-product/product-image.php que está en la siguiente ruta relativa wp-content/plugins/woocommerce/templates/single-product/product-image.php en el complemento WooCommerce

10. Espero que comprenda el flujo estructural. Si realmente necesita anular esto, comprenda cómo se pegan estas plantillas y anúlelas de la forma deseada.
11. Esta forma de personalización que realice dará como resultado una personalización prolongada a medida que el proveedor del tema actualice la plantilla que debe actualizar nuevamente.

Entonces, las plantillas principalmente involucradas son una plantilla principal:

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

Y dos plantillas parciales son:

1. wp-content/plugins/woocommerce/templates/content-single-product.php para el resumen del producto, es decir, la columna del lado derecho
2. wp-content/plugins/woocommerce/templates/single-product/product-image.php para la imagen del producto, es decir, la columna del lado izquierdo