Cree una página de las categorías de productos de WooCommerce con el constructor de temas de Div.

Las páginas de categoría son una parte importante de cualquier sitio de comercio electrónico. Los clientes navegan por categorías de productos para encontrar lo que necesitan. Por lo tanto, las páginas de su categoría deben verse tan bien como sus páginas de productos. Con el creador de temas de Divin, la creación de plantillas de página de categoría es más fácil que nunca. En este tutorial, le mostraremos cómo crear una plantilla de página de categoría paso a paso y estilizarla utilizando las opciones incrustadas del Div. Además, le mostraremos cómo hacerlo filtrable con la ayuda de los filtros de productos WooCommerce.
Abra dos pestañas de navegador una al lado de la otra. Use la primera pestaña para el generador de temas y la segunda pestaña para la vista previa en vivo de una página de categorías. Trabaja de esta manera para ver el progreso a medida que avanza. Para su comodidad, agregué la plantilla como una descarga gratuita. ¡Vamos a eso! Vista previa antes de comenzar a recrear la plantilla, eche un vistazo a cómo se ve la plantilla de página de categoría en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la página Categoría WOO de forma gratuita en la categoría Woo para poner su mano en la plantilla de página de categoría WOO, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Actualice sus productos y categorías antes de construir su plantilla, asegúrese de que sus productos estén organizados en las categorías correctas. Verifique y si están etiquetados correctamente. Estos serán importantes al configurar el complemento para el filtro de producto.
2. Configuración del complemento Descargar e instalar Descargar los filtros de productos WooCommerce. Navegue al enchufe en el enchufe y cargue el archivo .zip del complemento para instalarlo. Como alternativa, busque el complemento en el directorio. El complemento agregará una nueva pestaña al menú del tablero. Asegúrese de activar el complemento.

Agregue un nuevo formulario de filtro Haga clic en la pestaña Plugin en el tablero. En la configuración del complemento, haga clic en el botón para agregar un nuevo formulario de filtro.


Configure el formulario de filtro para que la barra lateral de filtrado se vea exactamente como la de la vista previa de esta publicación, use la configuración mencionada a continuación. Puede ajustar estas configuraciones en cualquier momento.

Apariencia: vertical
Campos vacíos: no mostró el campo si está vacío
Clasificación de productos: oculte la clasificación de productos
Opción de paginación: Infinituton RESET sin terminar: sin botón de reinicio
La relación lógica entre las taxonomías: y
Plantilla de página con resultados: Mostrar resultados en la misma página
Cree el campo Categoría en la barra de menú debajo del área principal, verá una selección de archivos. Deslice y fije la pestaña “Categoría” en el constructor debajo de él. Luego ajuste la configuración de la siguiente manera:
Título del campo: categorías

Incluir niños: si
Visualización como: cuadro de selección
Lógica: o
Pedido: nombre, descendente
Apariencia: horizontal, 2 columnas
Cree el campo de la etiqueta ahora se desliza y fije la pestaña “Etiqueta” en el constructor. Asegúrese de que se coloque en la pestaña “Categoría”. Ajuste la configuración de la siguiente manera:
Título del campo: Tipo


Visualización como: cuadro de selección
Pedido: nombre, descendente
Apariencia: horizontal, 2 columnas
Íconos de color
Antecedentes: transparente
Color de texto: intenso marrón # 44000d
Haga clic en Guardar para generar un brevemente Guardar su trabajo y cerrar el constructor. Verá el código corto en el menú principal del complemento. Copielo, lo necesitará más tarde.
3. Recrear la plantilla de página para la categoría de productos en el constructor de temas abiertos de temas / agregar una nueva plantilla es hora de comenzar a recrear la plantilla! Abra el generador de temas y agregue una nueva plantilla.


Establezca la configuración de plantilla en la configuración de plantilla, seleccione “páginas con categorías de productos específicas”. Haga clic en las categorías que desea asignar esta plantilla. Seleccionaremos artículos de cuero hechos a mano.


Agregue el cuerpo personalizado y luego haga clic en “Agregar un cuerpo personalizado”.

Seleccione Construir cuerpo personalizado. Recrearemos esta plantilla desde cero, así que continúe y elija “Build Cuerpo personalizado”. Construya desde cero una vez que llegue al Visual Builder, seleccione la opción de construir una vez desde cero.

Sección 1 Configuración del sótano Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y agregue un color de fondo.

Color de fondo: Transparent Blue Grey – RGBA (68,66,109,02)

Agregar fila La estructura de la columna Ahora agregue una nueva fila con la siguiente estructura de columna:

Dimensión luego ajuste la configuración de dimensionamiento de la fila.
El ancho de la canaleta: 1


Ancho

Escritorio: 90%
Tableta y teléfono: 85%
Ancho máximo: 1920px
Espacio entonces, aplique algunos valores de espaciado diferentes en diferentes tamaños de pantalla.
Margen izquierdo y derecho
Desktop: automáticamente

Tableta: 55 PX
Teléfono: 30 PX
Revestimiento superior: 100 px
Agregue el módulo de publicación en los elementos de la primera columna es el momento de agregar módulos, comenzando con una publicación de título en la columna 1. Habilite solo el título.
Muestra el título: Sí
Fondo Agregar un color de fondo adicional.

Color: # E8E8E8
El texto del título va a la pestaña Design y estiliza el texto del título.

Nivel de título: H1
FUENTE: Josefin Sans

Peso: en negrita
Estilo: TT
Color: # 44000d
Talla
Escritorio: 32 PX
Tableta: 28 PX
Teléfono: 30 PX
Altura de la línea: 1.2 em
Extienda el ajuste y la distancia.
Forro de arriba
Escritorio y tableta: 100 px

Finamiento inferior: 80 PX
Forro izquierdo
Escritorio y tableta: 30 PX
Revestimiento recto
Escritorio y tableta: 30 PX
Teléfono: 10 PX
El borde le da al módulo algunas esquinas redondeadas.
Esquinas redondeadas: 15 px las cuatro
Box Shadow y agregue una sombra de sutil box.box Shadow: Segunda opción

Posición horizontal: 12 PX
Posición vertical: 12 PX

Fuerza de harina: 20 PX
Poder de propagación: -5px
Shadow Color: #dddddd
Agregue un módulo de texto al contenido de la primera columna Agregue un módulo de texto justo debajo del módulo anterior. En el cuadro de contenido, agregue el código corto que copió del complemento.
Cuerpo: código corto para complemento
Fondo Agregar un color de fondo adicional.
Color: # E8E8E8

El texto estiliza el texto.
FUENTE: Josefin Sans

Color: # 44000d
Talla

Escritorio: 20 PX
Tableta: 18 PX
Teléfono: 16 PX
Distancia: 1 PX
Extender la configuración de ajuste y espaciado.
Margen superior: 50 PX
Revestimiento superior e inferior: 40 px
Junta izquierda y derecha: 30 PX

Borde entonces, agregue algunas esquinas redondeadas.
Esquinas redondeadas: 15 px las cuatro
Sombra de cuadro y complete la configuración del módulo agregando un tono de caja sutil.
Box Shadow: segunda opción

Posición horizontal: 12 PX
Posición vertical: 12 PX

Fuerza de harina: 20 PX
Poder de propagación: -5px
Shadow Color: #dddddd
Agregue el módulo de almacenamiento al contenido de la segunda columna ¡Vaya a la siguiente columna! Agregue un módulo de almacén y ajuste la configuración principal de la siguiente manera:
Tipo de vista del producto: predeterminado
Use la página actual: sí
Columnas de apariencia: 3 columnas

Imagen Vaya a la pestaña Diseño y estilice la imagen en consecuencia:
Esquinas redondeadas de la imagen: 15 px las cuatro
Sombra de cuadro de imagen: segunda opción
Posición horizontal: 6 PX

Posición vertical: 6 PX
Fuerza de harina: 18 PX
Shadow Color: #dddddd
El texto del título acolza el texto del título.
FUENTE: Josefin Sans
Peso: semi en negrita
Alineación: Correctulores: # 44000D


Talla
Escritorio: 26 PX
Tableta: 24 PX
Teléfono: 17 PX
Espacio: 2 PX
El texto del precio no olvida estilizar el precio del precio.
FUENTE: Josefin Sans
Alineación: correcto
Color: # 44000d
Dimensión: 15 PX

Espacio de letras: 2 PX
Altura de línea: 46 PX
Extender la configuración de ajuste y espaciado.
Forro de arriba
Tableta y teléfono: 50 px
Forro izquierdo
Escritorio: 50 PX

Tableta y teléfono: 0 PX
CSS personalizado y no menos importante, agregue dos líneas de código CSS personalizadas a la pestaña avanzada para generar un espacio entre los diferentes elementos en el módulo de la tienda. ¡Eso es todo!
Imagen: Formando Bottom: 20 PX
Precio: Llenado Bottom: 40 PX
Bottom: 20px; Bottom de relleno: 40px;
Vista previa terminé de recrear la plantilla de página para la categoría de productos de WooCommerce. Echemos un vistazo nuevamente en el diseño completado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales Esta plantilla de página para la categoría de productos se puede aplicar a todas las categorías y etiquetas en su tienda WooCommerce. Con el complemento del filtro de producto, puede agregar la configuración del filtro que coincida con la tienda y los productos. Esperamos que esta plantilla lo ayude a agregar un aspecto personalizado a sus dibujos. ¡Cuéntanos en comentarios si tienes alguna pregunta o sugerencia!