Cómo personalizar la página de categoría de WooCommerce (complementos y codificación)

¿Quieres editar tus páginas de categoría? En esta guía, le mostraremos diferentes métodos para personalizar la página de categorías de WooCommerce con y sin complementos .

La página de categoría suele ser una de las páginas más ignoradas y menos personalizadas en una tienda de comercio electrónico. Esto se debe a que normalmente actúa como un puente hacia la jerarquía entre el producto y la página de la tienda. Sin embargo, existen varios escenarios prácticos en los que los usuarios confían en la página de categoría para buscar productos, por lo que tiene sentido editarla y aprovecharla al máximo.

Antes de echar un vistazo a los diferentes métodos para personalizar la página de categoría en WooCommerce, comprendamos mejor los beneficios de hacerlo.

¿Por qué editar la página de categorías de WooCommerce?

La página de categoría muestra todos los productos de tu tienda WooCommerce incluidos en esa categoría . Aunque los usuarios normalmente buscan productos en otras páginas, a veces a los clientes les resulta más fácil buscar los artículos en la página de categorías. Por ejemplo, si no está seguro del nombre del producto pero conoce su categoría, probablemente buscará el producto utilizando la página de categoría.

Además de eso, sus clientes pueden permanecer más tiempo en su sitio web si la página de categoría los influye positivamente. Como estas páginas generalmente se pasan por alto, si las personaliza, se destacará y mejorará la experiencia de sus clientes.

La buena noticia es que WooCommerce te permite personalizar fácilmente tu página de categoría. La mala noticia es que las opciones predeterminadas que ofrece WooCommerce son bastante limitadas. Solo puede editar el nombre, el slug, la categoría principal, el texto de descripción, el tipo de visualización y la miniatura para cada página de categoría.

También puede editar otros elementos con el personalizador de temas, pero si necesita llevar su página de categoría a un nivel completamente nuevo, necesita algo más.

Por eso, en esta guía, le mostraremos diferentes métodos para editar su página de categoría en WooCommerce y ayudar a sus clientes a navegar su sitio más fácilmente.

Cómo personalizar la página de categorías de WooCommerce

Existen diferentes métodos para personalizar fácilmente su página de categorías de WooCommerce en WordPress:

1. con divi
2. Usar un complemento dedicado
3. Programáticamente (codificación)

En esta sección, veremos cada método paso a paso, para que pueda elegir el que mejor se adapte a sus necesidades.

NOTA : Antes de comenzar, asegúrese de haber configurado correctamente WooCommerce y haber creado todas las páginas necesarias.

1. Personaliza la página de categorías de WooCommerce con Divi

Divi es uno de los temas de WordPress más populares y por una buena razón. Viene con muchas funciones y es totalmente compatible con WooCommerce, lo que lo hace ideal para personalizar las páginas de categoría.

Este tema viene con un generador de arrastrar y soltar incorporado que le permite crear una plantilla de página de categoría personalizada . De esta manera, puede crear una plantilla para las páginas de categoría y usarla para todas ellas en su tienda WooCommerce.

Lo que hace que Divi sea tan fácil de usar es que puedes ver todos los cambios que haces con el constructor en tiempo real con la vista previa en vivo. Divi también proporciona varios módulos para agregar fácilmente muchos elementos a sus páginas, ayudándole a ahorrar mucho tiempo al crear o editar sus páginas de categorías.

1.1. Instalar y activar Divi

Para comenzar a usar Divi, primero debe instalarlo y activarlo. Puede descargar el archivo zip de Divi desde su sitio web oficial.

Luego, vaya a su tablero de WordPress y diríjase a Apariencia> Temas > Agregar nuevo .

Presione Cargar tema y elija el archivo Divi .zip recientemente descargado para cargarlo en su sitio. Una vez que se carga, haga clic en Instalar ahora para instalar el tema y activarlo una vez que se complete la instalación.

La activación del tema Divi también instalará automáticamente el constructor Divi, que es el constructor de páginas incorporado que usaremos para personalizar las páginas de categorías.

1.2. Crear una plantilla de página de categoría personalizada

Para comenzar a crear una plantilla de página de categoría personalizada, debe ir a Divi > Generador de temas y presionar Agregar nueva plantilla .

Luego, marque la casilla Todas las páginas de categorías de productos en Páginas de archivo y haga clic en Crear plantilla .

Después de eso, seleccione Agregar cuerpo personalizado en la nueva plantilla que acaba de agregar. Dado que estamos creando una plantilla completamente nueva con Divi, seleccione también la opción Crear cuerpo personalizado .

Allí verás 3 opciones diferentes:

• Crea tu plantilla desde cero
• Use una de las plantillas de la biblioteca Divi y utilícela para personalizar su página de categoría de WooCommerce
• Clone una página existente y utilícela como plantilla para todas sus páginas de categorías de productos

Puedes elegir cualquiera de las opciones que mejor se adapte a ti. Para este tutorial, seleccionaremos Build from Scratch, así que presionamos el botón Comenzar a construir .

Se le redirigirá al diseño de la página Categoría desde donde utilizará Divi Builder para crear su plantilla.

Para comenzar a construir su plantilla, debe seleccionar la estructura. En Fila nueva , seleccione el tipo de fila que desea para sus páginas de categoría. Puede agregar varias filas y columnas. Necesitará al menos 2 filas para el encabezado y el cuerpo de la página de categoría, pero también puede tener más columnas si desea agregar una barra lateral en el cuerpo de la página de categoría.

Después de seleccionar la cantidad de filas y columnas, deberá agregar los módulos Divi para personalizar aún más el diseño de la página de categorías.

1.3. Encabezado de página de categoría

Para el encabezado de la página de categoría, debe agregar el título de la página y la ruta de navegación para las páginas de su categoría.

Para agregar el título de la publicación, haga clic en el ícono ' + ' en la fila, busque Título de la publicación en la barra de búsqueda y selecciónelo.

Verá las diferentes opciones de título de publicación. Puede agregar la meta y la imagen destacada, pero no las usaremos para este tutorial, por lo que desactivaremos las opciones Mostrar meta y Mostrar imagen destacada en la sección Elementos .

Vale la pena señalar que no necesita agregar ningún título aquí, ya que mostrará automáticamente el título dinámico de la publicación cuando obtenga una vista previa del sitio web. Además, desde la pestaña Diseño , puede editar el color de fondo y las fuentes del encabezado.

También hay algunas opciones avanzadas para agregar ID de CSS, clases, CSS personalizado, efectos de desplazamiento y más. Una vez que haya realizado todos los cambios necesarios, haga clic en el icono " marcar " para guardar los cambios.

1.3.1 – Agregar módulo de ruta de navegación

También necesitará un módulo de migas de pan para una navegación adicional en las páginas de categoría, así que haga clic en el ícono ' + ' nuevamente para agregar un nuevo módulo y busque " Woo Breadcrumb ".

Luego, seleccione la opción Este producto en la sección Producto en la pestaña Contenido . Esto agregará el título dinámico para la categoría de producto que sus clientes desean ver.

Una vez más, realice los cambios necesarios utilizando las pestañas Diseño y Avanzado y, finalmente, haga clic en el icono " marcar" para guardar los cambios.

1.4. Cuerpo de la página de categoría

Una vez que haya terminado de editar el encabezado, puede pasar al cuerpo de la página de categoría. Si aún no ha incluido una fila, haga clic en el icono verde " + " y seleccione el tipo de fila que desea agregar. Después de eso, deberá agregar el módulo de la tienda aquí porque contiene todos los productos para su tienda.

Presiona el ícono “ + ” en la fila y busca el módulo Tienda .

Una vez que haga clic en él, podrá configurar las opciones para sus productos en la página de categoría.

En la pestaña Contenido , puede editar todos los elementos de su página de categoría. Asegúrese de habilitar Usar página actual para mostrar los productos de la categoría de producto específica que sus clientes seleccionan en su tienda en línea.

Ahora todo lo que necesita hacer es editar los otros elementos de visualización de la página. Por ejemplo, puede agregar la cantidad de columnas o productos para mostrar por página y paginación desde aquí. Además, también puede editar las fuentes de los textos de productos y precios y mucho más desde las pestañas Diseño y Avanzado . Una vez que haya realizado todos los cambios necesarios, presione el icono “ tick ” para guardar los cambios.

Puede agregar más filas o personalizar las áreas de pie de página con Divi Builder, solo recuerde guardar el cuerpo de la plantilla de página en la parte inferior derecha de su pantalla una vez que haya hecho todo.

Después de guardar sus cambios, cierre Divi Builder y será redirigido al panel de Theme Builder. Haga clic en Guardar cambios aquí también para guardar los cambios en su plantilla.

Ahora, cuando obtenga una vista previa de la página de categoría de cualquier categoría de producto, podrá ver todos sus cambios.

2. Personalice la página de categoría de WooCommerce usando un complemento

Si no usa Divi y no desea reemplazar su tema actual, la mejor opción para editar la página de categoría de WooCommerce sería usar un complemento de WordPress dedicado.

Para este tutorial, utilizaremos el complemento Editor de categorías, ya que es gratuito, fácil de usar y le permite personalizar las páginas de categorías con unos pocos clics. Esta herramienta se enfoca principalmente en el área de descripción de las páginas de categorías y le proporciona un editor para ello. De esta forma, puede editar la descripción de las categorías de productos para mostrarlas en las páginas de categorías.

Para comenzar a usar este complemento, en su panel de control de WordPress, vaya a Complementos > Agregar nuevo . Luego, busque Editor de categorías , haga clic en Instalar ahora y luego active el complemento.

También puede instalarlo manualmente descargando el complemento directamente desde el repositorio de WordPress. Si desea obtener más información sobre este proceso, puede consultar nuestra guía sobre cómo instalar un complemento manualmente.

Después de activar el Editor de categorías, vaya a Productos > Categorías y presione Editar en la categoría en la que desea personalizar la descripción.

Aquí, verá que se ha agregado un editor de texto al área de descripción donde puede cambiar la fuente del texto, los encabezados, las listas y la alineación. Además, puede agregar imágenes de categoría y usar la pestaña Texto para personalizar la descripción de la categoría con un poco de código.

Una vez que haya realizado todos los cambios necesarios, presione Actualizar y obtenga una vista previa de los cambios en las páginas de su categoría.

Así es como puede personalizar sus páginas de categorías de WooCommerce con un complemento. Sin embargo, si desea más opciones de personalización y tiene habilidades de codificación, puede codificar su propia solución. Echemos un vistazo a cómo hacerlo.

3. Personalice la página de categoría de WooCommerce mediante programación

Si no usa Divi y no desea instalar ninguna herramienta de terceros, codificar su propia solución es una excelente opción. La principal ventaja de editar la página de categoría mediante programación es que le brinda más flexibilidad.

Incluso si no es un desarrollador experimentado, WooCommerce le proporciona varios códigos abreviados y atributos de código abreviado para ayudarlo con el proceso. Si no está familiarizado con los códigos abreviados, consulte esta guía para comprender mejor cómo usarlos.

Con estos códigos abreviados, puede mostrar categorías de productos en cualquier página:

• [ product_category ]: muestra una categoría de producto específica
• [ product_categories ]: muestra todas las categorías de productos de su tienda

Puede usarlos junto con los atributos de categoría de productos para modificar la forma en que muestran las categorías de productos. Por ejemplo, si desea mostrar las categorías de productos de nivel superior y ocultar las subcategorías, puede usar el siguiente código abreviado:

[ product_categories number="0" parent="0" ]

Podrá ver las categorías de nivel superior una vez que obtenga una vista previa de su página.

Además, también puede usar varios fragmentos de código para editar su página de categoría en WooCommerce. Uno de los ejemplos más comunes es crear una categoría personalizada.

Antes de que le mostremos cómo hacerlo, asegúrese de hacer una copia de seguridad de su sitio web de WordPress y usar un tema secundario. Cambiaremos algunos archivos del tema central, por lo que si algo sale mal, puede romper su sitio. Es por eso que siempre se recomienda tener una versión de respaldo que pueda restaurar para evitar problemas.

Crear un título de página de categoría personalizado

Para crear un título de página de categoría personalizado usando un fragmento de código, debe ir a Apariencia > Editor de temas y agregar el siguiente fragmento de código al archivo functions.php de su tema secundario.

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

Para obtener más información sobre el fragmento, consulte este sitio.

De esta manera, puede mostrar un título personalizado en lugar del título de categoría predeterminado en la página de categoría.

Cambiar el fondo de la página de categoría de producto

Del mismo modo, también puede cambiar el fondo de la página de categoría de su producto utilizando fragmentos de código. Simplemente pegue el siguiente fragmento de código una vez más en el archivo funtions.php .

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

El código verifica si el elemento es una categoría de producto y cambia el color del fondo. Para obtener más información, consulte este sitio.

Estos son solo algunos ejemplos, pero hay mucho más que puedes hacer. Siéntase libre de tomar este fragmento como base y agregar su propio código personalizado para personalizar la página de categoría en su tienda.

Bonificación: agregue una vista rápida a las páginas de categorías

Otra opción interesante para personalizar su página de categorías de WooCommerce es agregar también una función de vista rápida. Una vista rápida permitirá a sus clientes ver los detalles del producto en la página de la categoría respectiva sin tener que abrir la página del producto real. Esto brindará a los compradores una mejor experiencia de usuario mientras navegan por su tienda en línea.

Para agregar una función de vista rápida a la página de categoría, usaremos el complemento WooCommerce Direct Checkout . Es uno de los mejores complementos de pago para WooCommerce que viene con muchas funciones para ayudarlo a aumentar sus tasas de conversión y ventas.

Aunque este es un complemento freemium, para agregar una vista rápida a las páginas de categorías, debe instalar tanto la versión gratuita como uno de los planes premium. Primero, diríjase a esta página para instalar y activar WooCommerce Direct Checkout.

Una vez que haya instalado y activado el complemento, diríjase a WooCommerce> Pago directo> Archivos en su panel de WordPress. Active la opción Agregar botón de vista rápida seleccionando Sí en el menú desplegable y luego guarde los cambios.

Si revisa su sitio desde el frente, verá que hay un nuevo botón que aparece justo al lado del botón " Comprar ahora/Agregar al carrito ". Por ejemplo, para aquellos que usan el tema Storefront, el botón se ve así.

Al hacer clic en el botón de vista rápida, se abrirá una ventana emergente con toda la información más importante sobre el producto, como el título, el precio, la descripción, etc. De esta manera, los clientes pueden agregar productos directamente a su carrito sin tener que abrir la página del producto.

Puede personalizar aún más el botón de vista rápida y la ventana emergente. Para obtener más información sobre cómo hacerlo, consulte nuestra guía sobre cómo agregar una vista rápida en WooCommerce.

Recomendaciones para renovar tu página de categoría

Como se mencionó anteriormente, el diseño general y la interfaz de sus páginas de categoría son muy importantes para hacer crecer su tienda en línea. Es una página muy útil donde puedes comparar diferentes productos de la misma categoría antes de comprarlos.

Una página de categoría bien diseñada puede ayudarlo a mantener a sus clientes más tiempo en su tienda en línea. Cuanta mejor experiencia tengan en tu tienda, más probable es que compren y se conviertan en clientes leales.

Para asegurarte de aprovechar al máximo tus páginas de categorías y destacarte de tus competidores, estas son algunas recomendaciones para llevarlas al siguiente nivel.

1. Agregue imágenes de productos grandes

Cuando se trata de compras en línea, una imagen vale más que mil palabras. Los compradores quieren ver imágenes grandes y claras de los productos que les interesan antes de tener que ir a la página del producto.

Sin embargo, esto no significa que deba usar imágenes de productos extremadamente grandes para la página de categoría. Las imágenes muy grandes tienden a ser más pesadas y hacen que su sitio sea lento, así que encuentre un buen equilibrio entre las imágenes grandes y la velocidad del sitio.

Por ejemplo, puede usar una página de categoría de 3 columnas con un tamaño de imagen de 300-400 píxeles . Esto debería ser adecuado para mostrar los detalles requeridos del producto en un monitor o dispositivo móvil de tamaño promedio.

Puedes ver un buen ejemplo en las páginas de categorías de Nike, que es una de las marcas de ropa deportiva más famosas. Nike usa imágenes claras y grandes que son adecuadas para una imagen en miniatura del producto.

Además, tenga en cuenta que las compras en línea se realizan ampliamente en dispositivos móviles en la actualidad. Asegúrese de probar sus páginas de categoría tanto en computadoras de escritorio como en dispositivos móviles, de modo que el tamaño y el diseño sean apropiados para cada tamaño de pantalla.

2. Usa imágenes de encabezado atractivas

Todos sabemos que las primeras impresiones importan y más aún cuando se trata de compras en línea. Cuando un cliente abre una página de categoría, lo primero que nota es el encabezado de la página. Es por eso que debe asegurarse de utilizar encabezados atractivos para cada categoría.

Una de las mejores formas de crear un encabezado atractivo es agregar una imagen de encabezado. Tenga en cuenta el diseño general de su sitio y combine la imagen del encabezado con el esquema de color general de su tienda en línea.

Por ejemplo, puede encontrar imágenes de encabezado en muchas tiendas en línea orientadas a la moda, como MAC Cosmetics.

Como puede ver, MAC utiliza una forma muy creativa de mostrar la imagen del encabezado. La imagen del encabezado de la categoría consta de su imagen y también hace coincidir el esquema de color oscuro con los menús del encabezado.

3. Mantenga siempre las migas de pan visibles

Las migas de pan son uno de los elementos más útiles para asegurarse de que los visitantes de su sitio web estén en el lugar correcto. Las migas de pan también ayudan a los usuarios a navegar por su sitio, lo que les ayuda a encontrar lo que buscan más rápido y mejora su experiencia de compra.

Mientras buscan productos, a veces los clientes hacen clic en diferentes cosas y pueden perderse en su tienda. Al tener las migas de pan siempre visibles, los usuarios pueden ver inmediatamente dónde están y volver fácilmente a la categoría deseada.

Algunos sitios prefieren mostrar las categorías en la barra lateral, pero la mayoría de las tiendas en línea usan la ruta de navegación porque es más fácil para los clientes volver a donde estaban antes.

Mostrar migas de pan no será un problema si ha seguido el tutorial anterior con Divi. Si usa un tema diferente, consulte esta guía para aprender cómo agregar y mostrar migas de pan en cada página.

4. Verifique si los productos están en las categorías correctas

Aunque esto parezca obvio, pueden ocurrir errores al agregar productos manualmente. Así que este punto es más un recordatorio que una recomendación.

Realice controles de rutina para asegurarse de que todos los productos estén asignados a las categorías correctas y no se mezclen. No es necesario que verifique esto todos los días, pero es importante hacerlo de vez en cuando. También puede verificar errores ortográficos en productos, categorías y descripciones.

Cualquier error en los productos o sus categorías podría afectar la impresión de los visitantes de su sitio web. ¿Qué pensarías si estuvieras navegando en una tienda online y encontraras unos vaqueros en la categoría de portátiles? Hacer controles de vez en cuando no toma mucho tiempo y te ayudará a mantener todo organizado.

Si quieres mejorar aún más tu tienda de comercio electrónico, echa un vistazo a nuestros consejos de WooCommerce para optimizar tu tienda online.

Conclusión

Con todo, su página de categoría juega un papel importante en su tienda. Para destacarse de sus competidores, debe personalizar su página de categorías de WooCommerce y aprovecharla al máximo. Del mismo modo, también puede editar su tienda, producto, mi cuenta y la página de pago para renovar toda su tienda mientras lo hace.

Para concluir, hemos discutido diferentes métodos para editar su página de categoría:

• con divi
• Usar un complemento dedicado
• Programáticamente

Esperamos que esta guía le haya resultado útil y que pueda editar fácilmente sus páginas de categorías. Además, también le proporcionamos un consejo adicional para agregar una vista rápida del producto en su página de categoría.

Finalmente, también hemos visto algunas recomendaciones para mejorar su página de categoría y aumentar sus tasas de conversión utilizando mejores imágenes y haciendo que las migas de pan estén siempre visibles.

Si este tutorial fue útil, le recomendamos que también eche un vistazo a los siguientes tutoriales:

• Cómo ocultar y eliminar el botón Agregar al carrito en WooCommerce
• Personaliza la página del carrito de WooCommerce
• Cómo agregar tarifas al pago de WooCommerce