7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WooCommerce

Cómo crear una tabla de productos WooCommerce gratis

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Las personas crean tiendas de comercio electrónico con la esperanza de vender la mayor cantidad posible de sus productos. Esto requiere mucho trabajo de tu parte: desde elegir la plataforma adecuada hasta promocionar tu tienda. Pero el simple hecho de crear una tienda no generará ventas automáticamente: tendrás que trabajar activamente en la optimización de tu contenido y tu embudo de compra.

Afortunadamente, las cosas se vuelven relativamente más sencillas si sabes cómo usar WooCommerce para crear una tienda de comercio electrónico en WordPress. Esta herramienta tiene un vasto ecosistema de plugins de ayuda para efectuar todo tipo de tareas. En este tutorial de WooCommerce, aprenderemos cómo hacer tablas gratis de productos y precios para añadirlas al sitio web de nuestra tienda.

Ventajas de las tablas de productos WooCommerce

Digamos que tienes una tienda grande de comercio electrónico que vende una gran cantidad de productos. Algunos de estos productos probablemente se pueden utilizar para hacer la misma tarea pero tienen diferentes especificaciones, como lo que ocurre cuando alguien busca una computadora portátil de uso cotidiano. En tal escenario, saber cómo hacer tablas de productos WooCommerce proporcionará muchos beneficios para ti y para tus usuarios.

Comparaciones fáciles

Al comparar productos similares, los usuarios solo querrán ver las diferencias en sus especificaciones clave. Si la tabla de productos de una tienda muestra todas estas diferencias y similitudes, los usuarios podrán ahorrar mucho tiempo que, de otro modo, tendrían que dedicar a saltar de pestaña en pestaña.

Reducción de las dudas de los clientes

Otra ventaja de la tabla de productos de una tienda es que esta tiene el potencial de incrementar tus ventas. Básicamente esto funciona porque, con las tablas de productos y precios, podrás dar a los usuarios más opciones si tienen dudas sobre la compra de un artículo en particular. Por ejemplo, en algunas ocasiones no he estado completamente seguro de si debo comprar un producto porque he sentido que algo falta. Sin embargo, contar con una tabla de productos y precios al final que muestre artículos relacionados con las características exactas que necesito me ha ayudado a tomar al instante la decisión de comprar algo.

Seguramente tú también te has encontrado con la tabla de productos de una tienda al realizar tus compras. Bueno, ¡ahora es momento de añadir una a tu propia tienda! Aprende cómo hacer tablas gratis en este tutorial de WooCommerce.

Opciones para añadir una tabla de productos y precios

Una tabla de productos y precios tiene un propósito importante y será utilizada por muchas personas. Como resultado, hay una gran cantidad de plugins gratuitos y de pago que pueden ayudarte a crear la tabla de productos de una tienda e instalarla en tu propio sitio web. Por lo general, los plugins para crear tablas gratis serán más que suficientes si no necesitas una gran cantidad de funciones y si puedes llevar a cabo una resolución básica de problemas por tu cuenta. Sin embargo, los plugins prémium te proporcionarán más características y también es más probable que te brinden un mejor soporte y actualizaciones periódicas. Si quieres ver ejemplos, puedes echar un vistazo a los plugins de tablas WooCommerce más vendidos en CodeCanyon.

Tablas de productos WooCommerce de CodeCanyonTablas de productos WooCommerce de CodeCanyonTablas de productos WooCommerce de CodeCanyon

Dado que este tutorial de WooCommerce trata sobre cómo crear tablas gratis, vamos a utilizar el plugin WooCommerce Product Table Lite del directorio de WordPress. Se trata de un plugin WooCommerce gratis, cuenta con la mejor calificación y viene con un decente conjunto de características que te permitirán aprender cómo usar WooCommerce para crear la tabla de productos de una tienda.

¡Adelante! Instala y activa el plugin. Dentro del menú del panel de administración de WordPress verás un elemento denominado Tablas de productos.

Cómo hacer tablas de productos WooCommerce

Ahora aprendamos cómo usar WooCommerce para crear tablas gratis. Lo primero que tienes que hacer es navegar a Tablas de productos > Añadir nueva tabla desde el menú del panel de administración. El plugin viene con dos plantillas preestablecidas, una para crear una tabla WooCommerce rápidamente y otra opción en blanco para crear todo desde cero.

Plantillas para crear tablas de productos WooCommerce gratisPlantillas para crear tablas de productos WooCommerce gratisPlantillas para crear tablas de productos WooCommerce gratis

Coloca el cursor sobre la sección Tabla normal y verás un botón con el texto Usar. Haz clic en él para crear una nueva tabla de productos y precios. Esto te mostrará una sección que te indicará que tu tabla WooCommerce ha sido creada. También obtendrás un shortcode similar a [product_table id="111"] que puedes usar para colocar la tabla de productos en cualquier parte de tu sitio web. Una vez hecho lo anterior, el resultado será una tabla WooCommerce similar a la de la imagen a continuación.

Tabla de productos y precios con su configuración inicialTabla de productos y precios con su configuración inicialTabla de productos y precios con su configuración inicial

Recuerda que la imagen anterior está basada únicamente en los valores predeterminados. Puedes cambiar muchas cosas en estas tablas WooCommerce gratis simplemente configurando algunas opciones. También observa que hay un menú desplegable en la esquina superior derecha para que elijas cómo se deben ordenar los productos que se muestran en la tabla. De forma predeterminada, los artículos se ordenan en función del precio (de menor a mayor).

La lista de productos es de uno de nuestros tutoriales anteriores, donde aprendimos a personalizar una página de productos de WooCommerce gratis. Puedes ver que en su mayoría son juguetes, pero hay una sudadera con capucha al final de la lista. A continuación, revisaremos cómo usar WooCommerce y su plugin gratuito para hacer varios cambios en nuestra tabla.

Personalización de la tabla de productos y precios

Puedes ir a Tablas de productos > Tablas de productos desde el menú de navegación del panel de control para ver una lista de todas las tablas WooCommerce que hemos creado. Hasta ahora hemos generado solamente una tabla a partir del ajuste preestablecido Tabla normal. Por lo tanto, solo veremos una tabla llamada Tabla normal. Haz clic en el nombre de la tabla para editarla y, a continuación, cambia su nombre a Tabla de juguetes.

Este plugin WooCommerce gratis te da la opción de utilizar shortcodes así como tu propia interfaz para especificar lo que debe incluirse en la tabla y su comportamiento.

Comenzaremos haciendo algunos cambios en la pestaña Consulta. Nuestra tabla únicamente mostrará juguetes, no prendas de vestir, por lo que tiene sentido establecer la categoría solamente en Juguetes. Esta es la categoría principal, pero también puedes elegir una de las subcategorías si tienes muchos productos o si quieres ser más específico sobre el tipo de productos que deben mostrarse.

Pestaña Consulta de una tabla de productos WooCommercePestaña Consulta de una tabla de productos WooCommercePestaña Consulta de una tabla de productos WooCommerce

También configuraremos la cantidad máxima de productos en cinco, vamos a habilitar la paginación y, al mismo tiempo, ocultaremos los artículos agotados. Mantendremos la ordenación configurada en su valor predeterminado Precio: de menor a mayor.

Adición y eliminación de columnas

El siguiente paso de nuestro tutorial de WooCommerce es aprender a añadir y eliminar columnas. Para eso, vayamos a la pestaña Columnas. Esta nos permite especificar qué columnas o qué información se muestra en diferentes anchos de pantalla. Hay una larga lista de opciones aquí.

En la parte superior, verás las Columnas de computadora portátil. Aquí hay seis columnas diferentes que se mostrarán en las pantallas grandes. De forma predeterminada, el plugin para tablas WooCommerce muestra una imagen del producto, su nombre, descripción, precio, cantidad y un botón Añadir al carrito. Puedes eliminar cualquier columna existente o añadir tus propias columnas adicionales a tus tablas de productos WooCommerce. Vamos a deshacernos de la columna Descripción haciendo clic en el botón de cruz. También puedes cambiar la posición de las columnas o duplicarlas haciendo clic en uno de esos botones.

Columna Descripción de una tabla WooCommerceColumna Descripción de una tabla WooCommerceColumna Descripción de una tabla WooCommerce

Haz clic en el botón + Agregar columna con el fin de añadir una nueva columna para las valoraciones de los productos. El primer texto valoraciones al lado del icono de la computadora portátil es un identificador para ti. El segundo texto Valoraciones especificado en la pestaña Encabezado es el que se muestra a tus visitantes. También puede ser algún otro HTML personalizado en lugar de texto plano. Por ejemplo, podrías mostrar un icono junto con un poco de texto en el encabezado.

Valoraciones en la tabla de productos de una tienda WooCommerceValoraciones en la tabla de productos de una tienda WooCommerceValoraciones en la tabla de productos de una tienda WooCommerce

La pestaña Diseño te permite configurar un conjunto de opciones de estilo, como color de texto, color de fondo, relleno o alineación de texto. Como ejemplo, yo he configurado el color de fuente para el encabezado, así como las valoraciones, en rgb(19, 138, 98).

Diseño de una tabla de productos WooCommerceDiseño de una tabla de productos WooCommerceDiseño de una tabla de productos WooCommerce

La pestaña Plantilla de celda determina el contenido que se mostrará a los usuarios en las diferentes filas de los productos. No todos nuestros productos tendrán valoraciones proporcionadas por los usuarios. En ese caso, lo que debemos hacer es configurar el campo en Sin valoraciones. También adjuntamos nuestra propia clase wc-pdt-rating a las valoraciones para poder aplicar reglas CSS personalizadas. Las columnas también se reorganizan para que las valoraciones de los productos ahora estén junto a sus nombres.

Plantilla de celda de valoraciones en una tabla WooCommercePlantilla de celda de valoraciones en una tabla WooCommercePlantilla de celda de valoraciones en una tabla WooCommerce

Adición de filtros a la tabla de productos

La tabla de productos predeterminada está compuesta por un menú desplegable en la esquina superior derecha que ofrece a los usuarios la opción de ordenar diferentes productos en función de una serie de criterios, como su nombre, precio y la valoración del usuario.

Ahora veamos cómo hacer tablas con una serie de filtros, para que los usuarios puedan optar por ver solamente productos de una subcategoría específica o dentro de un rango de precios particular. Puede agregar estos filtros en una fila de encabezado o en la barra lateral izquierda. En mi caso, decidí colocarlos en la segunda fila de nuestra tabla.

Navegación de una tabla de productos WooCommerceNavegación de una tabla de productos WooCommerceNavegación de una tabla de productos WooCommerce

Haz clic en el botón + Agregar elemento en la segunda fila de encabezado y, a continuación, selecciona Filtro de categoría. Todas las opciones predeterminadas funcionan bien en este caso, pero puedes experimentar con ellas para agregar una clase CSS o un estilo personalizado a los elementos. Si lo deseas, también puedes habilitar la opción para permitir que los usuarios seleccionen solamente una categoría en tu tabla de productos WooCommerce.

Filtro de categoría en una tabla de productos y precios WooCommerceFiltro de categoría en una tabla de productos y precios WooCommerceFiltro de categoría en una tabla de productos y precios WooCommerce

Ahora haz clic en + Agregar elemento nuevamente para agregar un Filtro de precio. Cambia las opciones de Filtro para reflejar los rangos de precios que sean más representativos de los productos que estás mostrando. En este caso, he dividido los rangos de precios en tres segmentos: hasta $7, $7 a $15 y más de $15. Haz clic en el botón Guardar configuración una vez que hayas terminado.

Filtro de precio en una tabla de productos WooCommerceFiltro de precio en una tabla de productos WooCommerceFiltro de precio en una tabla de productos WooCommerce

En este momento, tu tabla de precios debería verse como la que se muestra en la imagen a continuación.

Tabla de productos y precios de WooCommerce con filtrosTabla de productos y precios de WooCommerce con filtrosTabla de productos y precios de WooCommerce con filtros

Adición de estilo propio

Si bien este plugin WooCommerce gratis viene con muchas opciones de estilo incorporadas para diferentes productos, es posible que estas no siempre cubran todas tus necesidades. En ese caso, puedes ir a la pestaña Estilo y agregar un conjunto de reglas CSS tú mismo.

La tabla de productos de WooCommerce no nos muestra directamente todos los selectores de elementos, pero sí nos proporciona marcadores de posición para hacer referencia a esos elementos. Por ejemplo, puedes aplicar estilos a la fila de encabezado utilizando [heading_row] como selector. También puedes utilizar tu propio conjunto de selectores. A continuación puedes ver el CSS que apliqué a nuestra tabla de productos y precios.

Ahora la tabla se parece a la que se muestra en la siguiente imagen. Si pasas el cursor sobre los botones del carrito, estos cambiarán de color de naranja a verde.

Versión final de una tabla de productos WooCommerce gratisVersión final de una tabla de productos WooCommerce gratisVersión final de una tabla de productos WooCommerce gratis

Reflexiones finales

En este tutorial de WooCommerce, analizamos las ventajas de usar tablas de productos WooCommerce, algunas opciones diferentes para agregar tablas de productos a tu sitio web, además de cómo usar WooCommerce para crearlas y personalizarlas. El plugin WooCommerce Product Table Lite que utilicé en este tutorial viene con un decente conjunto de características para cumplir con todos tus requisitos básicos, pero para crear una interfaz de usuario y funciones más avanzadas, echa un vistazo a los plugins de tablas de productos WooCommerce más vendidos en CodeCanyon para ver algunos ejemplos.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.