Cómo personalizar la página de categoría de WooCommerce sin codificación

Publicado: 2022-05-22

¿Está considerando si debe editar la página de categorías de productos de WooCommerce?

Bueno, si es así, entonces le recomiendo encarecidamente que lo haga. Porque personalizar la página de archivo de WooCommerce y optimizarla puede aumentar sus ventas.

Pero la pregunta es ¿cómo personalizar la página de categorías de WooCommerce?

Bueno, seguro que no tienes que hacer ninguna codificación para personalizar tu página de categoría si sigues el proceso que se muestra en este blog.

En este artículo, aprenderá cómo personalizar la página de categoría de WooCommerce sin ningún tipo de codificación . Y también formas en que puede optimizar su página de archivo para aumentar la tasa de conversión.

Entonces, sigue leyendo….

ocultar contenido
¿Por qué personalizar las páginas de categorías de WooCommerce?
Cómo personalizar la página de categorías de WooCommerce en 6 pasos
Paso #1: Instale el generador de páginas de Elementor y ShopEngine
Paso #2: Cree una plantilla de página de categoría
Paso #3: Elija un Diseño/Estructura para la página de categoría de WooCommerce
Paso #4: Arrastre y suelte los widgets de ShopEngine y personalice la configuración
Paso #5: Personalice la configuración de estilo de la página de archivo de WooCommerce
Paso #6: actualice y obtenga una vista previa de la plantilla de página de categoría personalizada de WooCommerce
Bonificación: 5 formas de optimizar la página de categoría de WooCommerce para aumentar la tasa de conversión
Proporcionar opción de filtro de producto
Agregar opción de comparación de productos
Botón de lista de deseos
Opción de vista rápida
Optimización SEO en la página
Ultimas palabras

¿Por qué personalizar las páginas de categorías de WooCommerce?

Según builtWith, más del 29% de los 1 millón de sitios web principales utilizan WooCommerce. Si bien esta popularidad indica la credibilidad de WooCommerce como herramienta de comercio electrónico, también refleja que miles y miles de sitios web utilizan el mismo diseño predeterminado que ofrece WooCommerce.

WooCommerce
Uso de WooCommerce entre el millón de sitios principales

Y si cree que usar la página predeterminada de WooCommerce solo minimizará la posibilidad de que su sitio web se destaque entre la multitud, entonces está equivocado. Hay otras razones que también debe tener en cuenta. Para conocer estas otras razones, echemos un vistazo a la página de categoría predeterminada de WooCommerce con el tema WordPress veintidós activado.

Página de categoría predeterminada de WooCommerce
Página de categoría predeterminada de WooCommerce

Si ve, la página de categoría predeterminada de WooCommerce tiene un aspecto básico que no es muy atractivo. Además, no tiene opciones avanzadas como buscar productos usando nombres, filtrar productos basados ​​en diferentes atributos, etc. Todo esto es importante para asegurar una buena experiencia de usuario en tu tienda en línea.

Además, ¿a quién no le gusta un sitio atractivo que sea relajante para los ojos y fácil de navegar?

Bueno, la respuesta es todo el mundo! Y pasemos a la siguiente sección, donde aprenderá cómo personalizar las plantillas de página de categoría de WooCommerce sin ningún tipo de codificación.

Personaliza WooCommerce usando ShopEngine

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

Este es un tutorial fácil de seguir sobre cómo personalizar las páginas de categorías de WooCommerce sin ningún tipo de codificación. Al seguir este proceso, puede elegir el diseño y el diseño de su página de archivo de WooCommerce en muy poco tiempo. Entonces empecemos…

Paso #1: Instale el generador de páginas de Elementor y ShopEngine

Para editar la página de categorías de productos de WooCommerce mediante el proceso que se muestra en este blog, necesitará dos complementos de WordPress:

  • Creador de páginas de Elementor
  • ShopEngine y ShopEngine Pro

ShopEngine es el generador definitivo de WooCommerce para el generador de páginas de arrastrar y soltar: Elementor. Es un complemento para Elementor que viene con una enorme cantidad de widgets y módulos para que la personalización de WooCommerce sea sencilla.

Nota : puede usar la comunidad de cupones20 para obtener un 20 % de descuento en ShopEngine Pro . Instale Elementor primero, ya que ShopEngine depende de este creador de páginas. Si necesita ayuda para activar ShopEngine Pro, consulte la documentación.

Use "community20" para obtener ShopEngine Pro con un 20 % de descuento

Paso #2: Cree una plantilla de página de categoría

Una vez que haya instalado y activado todos los complementos necesarios, debe crear una plantilla de categoría. Para crear una plantilla de página de categoría personalizada de WooCommerce,

  • Navegue a: ShopEngine ⇒ Plantilla de constructores
  • Haga clic en Agregar nuevo
  • Proporcione un nombre de plantilla
  • Elija Tipo como archivo en el menú desplegable
  • Active la opción Establecer como predeterminado para anular cualquier categoría existente/plantilla de página de archivo
  • Seleccione la opción en blanco en Diseño de muestra
  • Haga clic en Editar con Elementor para comenzar a construir la plantilla
crear plantilla de categoría de WooCommerce
Cree una plantilla de página de categoría de WooCommerce en blanco

Nota : Elegí la opción en blanco porque en este blog voy a mostrar cómo crear una página de categoría personalizada desde cero. ShopEngine ofrece múltiples plantillas de página de categoría de WooCommerce preconstruidas. Si desea utilizar una plantilla prediseñada, elija la que le guste y vaya al paso 5. (Los pasos 3 y 4 son obligatorios si desea crear desde cero)

Paso #3: Elija un Diseño/Estructura para la página de categoría de WooCommerce

Una vez que esté en el modo de editor, debe elegir una estructura para su página de categorías de WooCommerce.

Voy a usar 3 tipos diferentes de diseños para tres secciones diferentes para crear una página de archivo personalizada. Puedes hacer lo mismo que se muestra en el blog o elegir el diseño que más te guste.

Para elegir una estructura, haga clic en el ícono "+" , luego desplace el cursor sobre el diseño que desee, luego simplemente haga clic en él.

seleccione una estructura para la página de categoría personalizada
Elige una estructura

Nota : puede repetir el mismo proceso para elegir diferentes diseños.

Relacionado: Cómo personalizar la página de productos de WooCommerce

Paso #4: Arrastre y suelte los widgets de ShopEngine y personalice la configuración

ShopEngine proporciona más de 8 widgets dedicados para crear páginas de archivo personalizadas de WooCommerce. Estos widgets de página de categoría son

  • Descripción del archivo
  • Archivo de productos
  • Título del archivo
  • Recuento de resultados de archivo
  • Modo de vista de archivo
  • Ordenar por filtro
  • Filtro de productos por página
  • Lista de productos
  • Filtros de productos

Voy a usar algunos de estos. Puede optar por utilizarlos todos. Pero antes de eso, debe asegurarse de que todos los widgets estén activados y disponibles para su uso.

Puede activar/habilitar los widgets desde ShopEngine ⇒ Widgets . Aquí enciende todos los widgets o los que vayas a usar y finalmente haz clic en el botón Guardar cambios para actualizar el estado .

Habilite todos los widgets de la página de categorías de ShopEngine
Habilite todos los widgets de la página de categorías de ShopEngine

Voy a elegir un diseño de una columna y arrastrar y soltar los widgets Búsqueda avanzada y Recuento de resultados de archivo.

arrastre y suelte el widget de búsqueda y conteo de resultados para la página de categoría de wooCommerce
Arrastre y suelte widgets de búsqueda avanzada y recuento de resultados de archivo

Puede seleccionar el widget y personalizar la configuración relacionada. Por ejemplo, si hace clic en el widget de búsqueda avanzada, en el panel izquierdo, obtiene opciones como Columna de productos, Mostrar categoría en el resultado de búsqueda, Mostrar menú desplegable de categorías, Texto para todas las categorías, Icono de búsqueda, etc.

Personalizar el widget de búsqueda avanzada de WooCommerce
Personalizar el widget de búsqueda avanzada de WooCommerce

Ahora, para la siguiente sección, usaré los pasos descritos en el paso 3 para insertar un nuevo diseño de dos columnas. A continuación, arrastre y suelte los widgets Filtros de productos y Productos de archivo.

filtros de productos drad and drop y widgets de productos de archivo personalizar la página de archivo de WooCommerce
Seleccione una nueva estructura de Elementor

Nota: El widget de filtro de producto solo está disponible con ShopEngine Pro . Por lo tanto, asegúrese de haber instalado y activado ShopEngine Pro.

Obtenga ShopEngine Pro ahora

Puede personalizar las opciones relacionadas con el filtro, como el filtro de precio, el filtro de calificación, el filtro de color, el filtro de categoría, etc. Además, puede personalizar las opciones relacionadas con el diseño, como el modo de vista de filtro, habilitar el botón de cambio de contenedor, columnas (por fila), etc. También puede agregar una lista de atributos personalizados si lo desea.

Personalizar widget de filtros de productos
Personalizar widget de filtros de productos

Puede cambiar la configuración de diseño de los productos de archivo desde la opción de diseño de WooCommerce. Para obtener más detalles sobre cómo cambiar la opción de diseño, puede consultar este documento. Además, puede personalizar la configuración de contenido, como Insignia de venta relámpago, Mostrar categorías, Mostrar calificación de descripción, etc. También puede elegir un ícono de paginación personalizado y un orden personalizado del botón CTA como Agregar al carrito, Agregar a la lista de deseos, Vista rápida, etc. .

Personalizar widget de productos de archivo

Relacionado: Cómo personalizar la página de mi cuenta de WooCommerce

Paso #5: Personalice la configuración de estilo de la página de archivo de WooCommerce

Una vez que haya configurado sus diseños personalizados y widgets personalizados, es hora de cambiar su apariencia cambiando la configuración de estilo de estos widgets. Para cambiar la configuración de estilo, debe hacer clic en el widget y, en el panel, vaya a la pestaña Estilo para acceder a todas las configuraciones de estilo. Echemos un vistazo a la opción de estilo para los widgets utilizados en este tutorial:

Búsqueda avanzada: puede personalizar varias opciones del formulario de búsqueda, icono de búsqueda/estilo de texto, estilo de categoría, estilo de producto, botón de más productos y fuente global.

Cambiar la configuración de estilo del widget de búsqueda avanzada
Cambiar la configuración de estilo del widget de búsqueda avanzada

Recuento de resultados de archivo: puede personalizar las opciones de alineación, color y tipografía.

widget de conteo de resultados de elementsKit
Cambiar la configuración de estilo del widget Recuento de resultados de archivo

Filtros de productos: puede encontrar opciones para diseñar la sección de filtros de productos en diferentes categorías, como Estilos comunes, Filtro de precio / Control deslizante de rango, Filtro de clasificación y Filtro de categoría.

Configuración de estilo de filtro de producto configuración de estilo
Personalice las opciones de estilo del widget de filtro de productos

Productos de archivo: puede personalizar la configuración de estilo de producto de archivo personalizando las opciones proporcionadas en secciones como Contenedor de producto, Imagen de producto, Categorías de producto, Título del producto, Precio del producto, Etiqueta, Botón Agregar al carrito, Calificación, Venta flash y Paginación.

Archivar configuraciones de estilo de producto
Personaliza el estilo del widget de productos de archivo

Relacionado: Cómo personalizar la página del carrito de WooCommerce

Paso #6: actualice y obtenga una vista previa de la plantilla de página de categoría personalizada de WooCommerce

Después de finalizar la personalización del estilo, haga clic en el botón Actualizar para guardar. Ahora puede hacer clic en el botón de vista previa para ver la vista previa o visitar cualquier página de categoría manualmente y debería ver que la nueva plantilla está activada como la vista previa a continuación:

Personalizar la vista previa de la página de categoría
Página de categoría personalizada de WooCommerce usando ShopEngine
Personaliza WooCommerce usando ShopEngine

Bonificación: 5 formas de optimizar la página de categoría de WooCommerce para aumentar la tasa de conversión

Aquí hay algunos consejos útiles que puede seguir para optimizar su página de archivo de WooCommerce para aumentar la tasa de conversión:

Proporcionar opción de filtro de producto

agregue filtros de productos para aumentar la conversión
Filtro de producto en la página de categoría de WooCommerce

Su página de categoría por defecto muestra todos los productos de esa categoría. Pero, por lo general, las personas buscan un producto de cierto color o tamaño o cualquier otro atributo.

Por lo tanto, debe proporcionar las opciones para filtrar y reducir la cantidad de productos de una categoría según su atributo preferido. De esta manera, las personas pueden encontrar fácilmente sus productos y esto te ayudará a aumentar tus ventas.

Agregar opción de comparación de productos

Opción de comparación de productos en WooCommerce

Agregar una opción de comparación de productos a su WooCommerce ayudará a los consumidores a comparar productos de un tipo similar. Esta opción es necesaria sobre todo si ofreces productos digitales como móviles, relojes, etc.

La opción de comparación de productos ayudará a los clientes a tomar una decisión más rápido. Y esto le ayudará a lograr su objetivo de aumentar las ventas rápidamente.

Botón de lista de deseos

personalizar la lista de deseos de la página de archivo de WooCommerce
Botón de lista de deseos en la página de categoría

La lista de deseos brinda la opción de agregar productos al carrito para su posterior compra. Algunas personas no encuentran que la lista de deseos sea tan efectiva cuando se trata de conversión. Pero, sinceramente, es muy eficaz.

Porque las personas generalmente agregan productos a su lista de deseos cuando realmente les gusta el producto, pero por alguna razón no pueden comprarlo de inmediato. Pero eso no significa que esa persona no comprará los productos más tarde.

En la mayoría de los casos, las personas tienden a comprar productos que han agregado a su lista de deseos. Por lo tanto, agregue una opción de lista de deseos en su página de Categoría de WooCommerce.

Opción de vista rápida

agregar vista rápida para aumentar la tasa de conversión de la página de categoría plantilla de página de categoría personalizada de woocommerce
Opción de vista rápida en la página de archivo de WooCommerce

Agregar un botón de vista rápida garantiza una excelente experiencia de usuario, ya que las personas no tienen que visitar páginas separadas para conocer un producto. Con esta opción de vista rápida, su cliente puede permanecer en la página de categoría y conocer los detalles de los productos con solo un clic.

Si las personas tienen que ir a la página de un producto para verlo, pueden abandonar su sitio sin comprar el producto en caso de que no les guste. Sin embargo, si proporciona la opción de vista rápida para que los clientes puedan ver varios productos mientras permanecen en la misma página, mejorará la experiencia de compra. Y como resultado, te ayudará a aumentar las ventas de tu tienda.

Optimización SEO en la página

SEO en la página

Las páginas de categorías son el indicador de la jerarquía de páginas en su sitio web. Por lo tanto, nunca debe descuidarse la optimización de su página de categoría para los motores de búsqueda. Porque, si bien desea que su página de inicio y de productos se clasifiquen, su página de categoría, si está clasificada, también puede generar mucho tráfico.

Cuanto más tráfico reciba en su sitio web, más posibilidades tendrá de obtener más conversiones. Por lo tanto, asegúrese de agregar metadatos de SEO adecuados, optimizar los enlaces internos y externos, optimizar la URL, etc. Puede recibir ayuda de complementos de SEO como Rankmath, Yoast SEO, etc.

¿Está pensando que todos los puntos parecen válidos, pero necesitaré varios complementos para agregar estas opciones a mi sitio para aumentar la conversión?

Bueno, no tienes de qué preocuparte. Porque ShopEngine, además de ser un fabuloso personalizador de WooCommerce con una gran cantidad de widgets de WooCommerce, también proporciona más de 13 módulos como Lista de deseos, Pago rápido, Comparación de productos, etc.

Además, puede personalizar su tienda WooCommerce completa con este complemento. usando este editor de categorías, puede editar todas sus páginas de WooCommerce; desde la página de la tienda hasta la página de agradecimiento. Mire el video para conocer las amplias funciones que ShopEngine tiene para ofrecer.

ShopEngine: el creador de WooCommerce definitivo

Otros blogs relacionados con WooCommerce:

Cómo agregar campos personalizados avanzados a la página de pago de WooCommerce.
Los mejores complementos de carrito de compras para WooCoomerce
Cómo resolver el error del carrito vacío de WooCommerce

Ultimas palabras

Una página de categoría es una página esencial tanto para sus clientes como para el motor de búsqueda. Y personalizar y optimizar sus páginas de categoría solo puede ayudarlo a obtener más éxito en su negocio de comercio electrónico.

Lo bueno es que ahora sabe cómo personalizar la página de categorías de WooCommerce y cómo optimizar la página para duplicar su tasa de conversión.

Puede aprovechar el generador de WooCommerce más completo disponible en el mercado llamado ShopEngine para optimizar la página de categoría de su tienda electrónica. ¡Y puede obtener su complemento WooCommerce completo con un 20% de descuento ahora! Para comprar ShopEngine Pro a un 20 % menos de precio, use la comunidad de códigos de cupón20.

Entonces, ¡apresurémonos y únase a la comunidad de amantes de WooCommerce ahora!

Comienza a personalizar WooCommerce con ShopEngine