WooCommerce: mostrar productos en un formulario de pedido de mesa

Interesante, ¿no? Esto ha estado en mi lista de cosas por escribir durante mucho tiempo, así que hoy quiero mostrarles mi primer intento de convertir la página de la Tienda en una lista/tabla de productos.

Veamos cómo hice esto: intentaré comentar mi PHP tanto como sea posible para que pueda comprender mi estrategia. ¡Disfrutar!

Mostrar productos de WooCommerce en una tabla

Fragmento de código de PHP: Editar la visualización de elementos del bucle de productos de WooCommerce

Antes de aplicar CSS, debemos asegurarnos de eliminar los elementos no deseados (como la insignia ¡Oferta!) y dejar solo 3 “columnas”: título, precio, agregar al carrito.

/**
 * @snippet       Edit WooCommerce Product Loop Items Display
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.8
 */
  
// -------------------------
// 1. Change number of products per row to 1
// Note: this is specific to Storefront theme
// See https://docs.woocommerce.com/document/change-number-of-products-per-row/
  
add_filter( 'storefront_loop_columns', 'bbloomer_loop_columns' );
  
function bbloomer_loop_columns() {
return 1;
}
  
// -------------------------
// 2. Remove default image, price, rating, add to cart
  
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
  
// -------------------------
// 3. Remove sale flash (Storefront)
  
add_action( 'init', 'bbloomer_hide_storefront_sale_flash' );
  
function bbloomer_hide_storefront_sale_flash() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
}
  
// -------------------------
// 4. Add <div> before product title
  
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_flex_open', 8 );
 
function bbloomer_loop_product_div_flex_open() {
echo '<div class="product_table">';
}
  
// -------------------------
// 5. Wrap product title into a <div> with class "one_third"
  
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 9 );
 
function bbloomer_loop_product_div_wrap_open() {
echo '<div class="one_third">';
}
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 6 );
 
function bbloomer_loop_product_div_wrap_close() {
echo '</div>';
}
  
// -------------------------
// 6. Re-add and Wrap price into a <div> with class "one_third"
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 7 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_price', 8 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 9 );
  
// -------------------------
// 7. Re-add and Wrap add to cart into a <div> with class "one_third"
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 11 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 12 );
  
// -------------------------
// 8. Close <div> at the end of product title, price, add to cart divs
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_flex_close', 13 );
 
function bbloomer_loop_product_div_flex_close() {
echo '</div>';
}

CSS: Editar visualización de elementos del bucle de productos de WooCommerce

Ahora que hemos configurado las nuevas páginas de archivo, necesitamos CSS para completar el trabajo. En detalle, queremos que cada elemento (título, precio, agregar al carrito) se vea como una celda de tabla.

Usaremos la increíble propiedad «flex» en CSS

Nota: una vez más, este CSS es específico para el tema Storefront, por lo que seguramente necesitará cambiar algunas llamadas para asegurarse de que todo se active.

@media (min-width: 768px) {
  
.site-main ul.products li.product {
    width: 100%;
    float: none;
    margin: 0;
}
  
.site-main ul.products {
border-right: 1px solid;
border-bottom: 1px solid;
margin: 1em 0;
}
  
.site-main ul.products li.product .product_table {
  display: flex;
  flex-wrap: wrap;
}
  
.site-main ul.products li.product div.one_third {
    width: 33.3%;
    float: left;
    margin: 0;
    text-align: left;
    background-color: #eee;
    border-left: 1px solid;
    border-top: 1px solid;
    padding: 1em 2em;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: hidden;
}
  
}

¿Hay un complemento para eso?

Si le encantaría codificar pero no se siente 100% seguro con PHP, decidí buscar complementos confiables que logren el mismo resultado. Como de costumbre, elegí proveedores de complementos de WooCommerce en función de la reputación del mercado, la calidad del soporte dedicado, la limpieza del código, la confiabilidad a largo plazo y, probablemente casi igual de importante, donde las «personas detrás» del complemento son partidarios activos del ecosistema de WordPress.

1. Tienda a granel para WooCommerce

Vendido por: WooCommerce.com – Desarrollado por: Consortia AS – Garantía de devolución de dinero de 30 días

Cree vistas de lista de productos y haga posible comprar cantidades de productos fácilmente. Perfecto para soluciones mayoristas, mostrando a los clientes todos los productos en una tabla y permitiendo la compra a granel. Bulk Shop también está optimizado para dispositivos móviles y es totalmente receptivo.

2. Formularios de pedido rápido YITH para WooCommerce

Vendido por: YITH – Desarrollado por: YITH – Garantía de devolución de dinero de 30 días

Ofrezca a los clientes la oportunidad de comprar fácilmente todos o una gama de productos. Facilite la búsqueda, selección y adición de productos al carrito con un solo clic desde la misma página.

3. Tabla de productos de WooCommerce

Vendido por: Barn2 – Desarrollado por: Barn2 – Garantía de devolución de dinero de 30 días

Cree un formulario de pedido rápido de WooCommerce (una tabla que enumera algunos o todos sus productos) y permita que los clientes seleccionen y agreguen al carrito rápidamente. También es útil si los usuarios de WooCommerce acceden y compran con frecuencia a través de dispositivos móviles.

Deja un comentario