Cómo reemplazar la estructura del bucle del producto de WooCommerce con un diseño amigable para la bootstrap

En un reciente Hilo de Slack de Business Bloomer Clubun usuario quería reemplazar la estructura HTML de bucle de producto predeterminada de WooCommerce con un diseño más compatible con las clases de Bootstrap «Container – fila – col».

Mientras modifica woocommerce_product_loop_start() reemplazar

con
es sencillo, cambiando el valor predeterminado

marcar en content-product.php requiere una mayor personalización.

Aquí hay una guía sobre las opciones para crear una cuadrícula de productos de WooCommerce amigable para bootstrap sin sobrescribir completamente las plantillas de núcleo.

Paso 1: modificar woocommerce_product_loop_start()

El primer paso es ajustarse woocommerce_product_loop_start() Para reemplazar el valor predeterminado

Etiqueta con un
. Este cambio establecerá un contenedor amigable para bootstrap para su cuadrícula de productos.
En tu functions.php archivo:
 add_action( 'woocommerce_before_shop_loop', 'custom_woocommerce_product_loop_start', 5 ); function custom_woocommerce_product_loop_start() {     remove_action( 'woocommerce_before_shop_loop', 'woocommerce_product_loop_start', 10 );     add_action( 'woocommerce_before_shop_loop', function() {         echo '
';     }); }  add_action( 'woocommerce_after_shop_loop', 'custom_woocommerce_product_loop_end', 5 ); function custom_woocommerce_product_loop_end() {     remove_action( 'woocommerce_after_shop_loop', 'woocommerce_product_loop_end', 10 );     add_action( 'woocommerce_after_shop_loop', function() {         echo '
';     }); } 
Paso 2: ajustar content-product.php Plantilla para columnas de arranque
La estructura predeterminada de WooCommerce envuelve cada producto en un
etiqueta dentro content-product.php. Para cambiar a un
Estructura para una mejor compatibilidad de Bootstrap, el mejor enfoque es copiar content-product.php en el tema de su hijo y reemplazar el
etiqueta.
1. Copiar la plantilla:
   Navegar por wp-content/plugins/woocommerce/templates/content-product.php y copiar este archivo a your-child-theme/woocommerce/content-product.php.
2. Modificar el marcado:
   Dentro del copiado content-product.phpreemplazar
3. > con
   . Este cambio alinea cada elemento del producto con la estructura de la columna de Bootstrap.
Enfoque alternativo: use filtros de WooCommerce para ajustar las clases
Si su configuración de Bootstrap solo requiere clases específicas para manejar el diseño, considere usar los filtros de WooCommerce para agregar o cambiar clases sin modificar los archivos de plantilla.
 add_filter( 'woocommerce_post_class', 'add_bootstrap_product_classes', 10, 2 ); function add_bootstrap_product_classes( $classes, $product ) {     $classes[] = 'col-sm-4'; // Adjust based on Bootstrap grid size (e.g., col-md-3, col-lg-4)     return $classes; } 
Este filtro permite que WooCommerce maneje cada producto como una columna de arranque basada en clases, lo que puede funcionar para diseños de cuadrícula más simples que no requieren cambios de elementos HTML.
Conclusión
Para el control total sobre su estructura de cuadrícula de productos de WooCommerce, copiando content-product.php En el tema de su hijo y modificarlo es el enfoque más confiable. Sin embargo, si las clases por sí solas pueden lograr el diseño deseado, use WooCommerce’s woocommerce_post_class Filtrar para una solución más simple que evita anulaciones de plantillas. De cualquier manera, puede integrar la estructura de Bootstrap en WooCommerce de manera efectiva con estos pasos.


Desarrollador