¿Buscas una alternativa al diseño de página de categoría de WooCommerce predeterminado en tu tema de WordPress? Crear un diseño personalizado para tus categorías de productos de WooCommerce te permite ofrecer una experiencia de compra optimizada, lo que puede tener un efecto positivo en los resultados de tu tienda.

Con el plugin adecuado, crear tu propio diseño de página de categoría de WooCommerce personalizado tampoco tiene por qué ser difícil. Eso es lo que vamos a mostrar en este post. Cubriremos cómo crear un diseño personalizado basado en tablas para tus categorías de WooCommerce. Esto te permite controlar exactamente qué información se muestra y cómo los compradores interactuarán con tus productos.

Aquí tienes un ejemplo de lo que construirás en este post:

Comenzaremos con algunos de los beneficios de este enfoque de tabla. Luego, entraremos en una guía paso a paso sobre cómo hacerlo en tu propia tienda de WooCommerce con el plugin WooCommerce Product Table.

Los beneficios de usar un diseño de tabla para tus páginas de categoría

Aunque el diseño exacto del diseño de la página de categoría de tu tienda de comercio electrónico depende de tu tema de WordPress, los diseños de la página de categoría de la mayoría de los temas se parecen a esto:

Este diseño está bien para algunas situaciones, pero limita el número de productos que puedes mostrar. También restringe la cantidad de información que puede proporcionar sobre cada producto (aunque la adición de botones de vista rápida del producto es una manera de mitigar esto).

Woo Multistore han escrito sobre la importancia de diseñar la página de categoría de WooCommerce de una manera que impulsa las conversiones. Un diseño de tabla le ayuda a superar las deficiencias mostrando más productos e información en un diseño compacto que acaba utilizando menos espacio, además de añadir funciones de navegación adicionales como la búsqueda y el filtrado.

Esto significa que puede poner más productos/detalles de productos delante de los ojos de los compradores, lo que garantiza que puedan ver todo su catálogo y aumenta las posibilidades de que realicen una compra.

También verá beneficios de SEO con los motores de búsqueda, ya que puede mostrar más contenido personalizado en una página totalmente personalizada (o páginas de destino también). Esto le permite mostrar productos que son relevantes, y luego añadir texto contextual también. Todo esto debería ser recompensado con un mejor posicionamiento.

Aunque este tipo de diseño puede beneficiar a todo tipo de tienda de comercio electrónico, es especialmente útil para:

• Tiendas de venta al por mayor
• Archivos digitales (vídeos, archivos de audio, ebooks, etc.)
• Restaurantes
• Catálogos de productos
• … ¡muchos más!

Cómo crear un diseño de página de categoría de WooCommerce personalizado con WooCommerce Product Table

Otra de las ventajas de utilizar un diseño de tabla para el diseño de tu página de categoría de WooCommerce es que puedes configurarlo todo sin necesitar ningún conocimiento técnico especial.

Para ello, utilizarás el plugin WooCommerce Product Table. Este plugin enumera tus productos de WooCommerce en un diseño de tabla flexible que tú controlas, junto con la posibilidad de añadir filtros, cuadros de búsqueda, paginación y mucho más.

También puedes utilizar el plugin para mostrar sólo productos de categorías o subcategorías específicas. WooCommerce Product Table proporciona dos maneras de hacer esto:

1. Puedes habilitar centralmente el diseño de la tabla de productos en todas las páginas de categorías de productos. (Ideal si quieres personalizar todas tus páginas de categoría de producto.)
2. Alternativamente, puedes usar un shortcode para crear manualmente tus propias páginas de categoría de WooCommerce. (Por ejemplo, si quieres usar la tabla para listar productos de categorías específicas solamente.)

A continuación, te mostraremos cómo configurar la Tabla de Productos de WooCommerce para lograr ambas opciones.

Configuración de la Tabla de Productos de WooCommerce

Una vez que hayas instalado y activado el plugin de la Tabla de Productos de WooCommerce, querrás configurar sus ajustes por defecto.

Esto te permite controlar qué información se muestra en tu tabla de productos y cómo funciona todo, como por ejemplo si se muestran o no ciertos atributos del producto o cómo funcionará la funcionalidad de añadir al carrito.

Para empezar, ve a WooCommerce → Ajustes → Productos → Tablas de productos para acceder a la configuración del plugin de categorías.

Merece la pena examinar detenidamente todos los ajustes disponibles y elegir los que se ajusten a tu situación particular. Sin embargo, sólo vamos a cubrir los aspectos básicos que son esenciales para el diseño de su página de categoría de WooCommerce.

En primer lugar, encontrar la configuración de las columnas en la sección de contenido de la tabla. Aquí es donde controlarás qué información aparece en tu tabla. Además de mostrar la información principal del producto, también puede mostrar los atributos del producto, los campos personalizados y mucho más.

Puede encontrar una lista completa de opciones de columnas aquí, pero esta configuración es una buena versión básica que funcionará para la mayoría de las tiendas:

image, name, description, price, buy

Más abajo, encontrará la sección de columna Añadir al carrito, que le permite controlar los botones de añadir al carrito.

Para atraer las compras masivas, puede añadir casillas de verificación que permitan a los compradores añadir en bloque varios productos a sus carros. O, también puedes simplemente añadir un botón de añadir al carrito por separado a cada producto (¡o ambos!):

Una vez que hayas terminado, asegúrate de guardar los cambios.

Una vez que hayas configurado los ajustes del producto, tienes dos maneras de crear tus categorías reales de WooCommerce. Veremos estos a continuación.

2a. Habilitar las tablas de productos en todas las páginas de categoría

La tabla de productos de WooCommerce viene con una opción para agregar automáticamente el diseño de la tabla de productos a todas las páginas de categoría. Esta es la opción más fácil, y sólo toma un segundo para configurar.

En la página de configuración del plugin, simplemente marque la casilla ‘Archivos de categoría de productos’:

Esto habilitará globalmente el diseño de la tabla para todas las categorías, reemplazando el diseño por defecto que viene con su tema.

Aprenda más sobre este método.

2b. Utiliza un shortcode para crear tu propio diseño de página de categorías de WooCommerce

También puedes utilizar un shortcode para listar los productos de WooCommerce por categorías. Esta opción es perfecta si no quieres utilizar el diseño de tabla de productos en TODAS tus categorías.

Simplemente añade el shortcode del plugin a una página normal de WordPress, y especifica de qué categorías quieres listar los productos. Repita el proceso tantas veces como desee – una vez para cada categoría.

Con este método, está creando esencialmente una nueva página de categoría de producto de WooCommerce para cada categoría de producto que desee mostrar, en lugar de rediseñar la página de categoría de WooCommerce globalmente.

Puede continuar utilizando sus páginas de categoría existentes junto con su nuevo diseño de tabla. O bien, puede simplemente reemplazar los enlaces a cada página de categoría de producto existente con sus nuevas páginas de categoría impulsadas por la tabla. (Consejo: Si ya no utilizas las páginas de categorías integradas, redirígelas a las nuevas en las que utilizas tablas de productos.)

Para empezar, ve a Páginas → Añadir nuevo para crear una página básica de WordPress. A continuación, añade el shortcode [product_table] a la página. También puedes añadir un título de categoría usando el campo de título normal.

Por defecto, el shortcode mostrará todos tus productos de WooCommerce.

Sin embargo, puedes usar el parámetro del shortcode de categoría para filtrar productos de categorías y/o subcategorías específicas. También puedes combinar múltiples categorías, o crear condiciones como que un producto tenga que estar en múltiples categorías o subcategorías para ser mostrado.

Por ejemplo, para filtrar productos de la categoría «silla», podrías usar el siguiente shortcode:

[product_table category="chair"]

Si quieres añadir una imagen de categoría o un nombre de categoría, también puedes hacerlo encima del shortcode usando el editor normal de WordPress.

Una vez que publiques la página, deberías ver el diseño de tu nueva página de categoría de WooCommerce:

Para crear páginas para categorías adicionales de WooCommerce, repite el proceso para cada categoría de producto o subcategoría que quieras mostrar.

Haz que tus categorías de WooCommerce sean más buscables con filtros

Si quieres añadir más herramientas de búsqueda y filtrado a tus categorías de WooCommerce, tienes dos opciones:

1. Puedes añadir opciones de búsqueda, ordenación y filtrado a través de la configuración de la tabla de productos de WooCommerce. Estos aparecerán por encima o por debajo de su tabla de productos.
2. La Tabla de Productos de WooCommerce incluye widgets que puede utilizar para añadir filtros a su barra lateral.

Puede elegir su método preferido, o también está totalmente bien utilizar ambos enfoques al mismo tiempo. Eso permitirá a tus compradores elegir su método preferido.

Para añadir opciones de búsqueda, ordenación y filtrado directamente al diseño de la tabla, ve a WooCommerce → Configuración → Productos → Tablas de productos. A continuación, desplázate hasta la sección Controles de la tabla y configura las opciones según tus preferencias:

Puedes obtener más información en este artículo de ayuda.

Para utilizar los widgets de filtro, puedes ir a Apariencia → Widgets. Allí encontrará cuatro nuevos widgets con el prefijo «Tabla de productos:». Puedes añadir todos los widgets, o sólo elegir los filtros específicos que te gustaría incluir:

Aquí tienes un ejemplo de cómo podrían ser ambos conjuntos de filtros:

Cómo crear un diseño de página de categoría de WooCommerce personalizado con código

Si sabes manejarte con PHP, HTML y CSS, también es posible crear un diseño de página de categoría de WooCommerce personalizado utilizando código, sin un plugin de WooCommerce.

Desea trabajar con el archivo archive-product.php en su tema o tema hijo. También puede utilizar este mismo enfoque para editar sus páginas de productos individuales a través del archivo de productos individuales u otras partes de su tienda.

Desgraciadamente, debido a que tendrá que editar directamente el código en los archivos de la plantilla de su tema para hacer cada cambio, este método no es accesible para los no desarrolladores. Le recomendamos que se ponga en contacto con Codeable si necesita ayuda o que siga con el método de diseño de tabla más sencillo de arriba.

¡Cree su diseño de página de categoría de WooCommerce personalizado hoy mismo!

Crear un diseño de página de categoría de WooCommerce personalizado le permite utilizar una forma más fácil de mostrar sus productos.

Al utilizar un diseño de página de categoría basado en una tabla, puede mostrar más productos, junto con más detalles sobre cada producto.

También puedes añadir un montón de opciones útiles de búsqueda y filtro para ayudar a tus compradores a encontrar los productos.

Al conectar más eficazmente a los compradores con los productos que les interesan, puedes vender más productos y aumentar los ingresos de tu tienda.

Para utilizar un diseño de tabla para tus categorías de WooCommerce, puedes utilizar el plugin WooCommerce Product Table. La configuración es fácil, y no necesitarás ningún conocimiento técnico especial para ponerte en marcha como lo harías si quisieras editar directamente tu archivo de plantilla.

Empiece hoy mismo y cree una forma más eficaz para que los compradores puedan navegar por las categorías de productos en su tienda WooCommerce.