Filtrar productos de WooCommerce usando campos personalizados: Una guía detallada

A la hora de crear una tienda online en WordPress, el plugin WooCommerce pone a disposición de los usuarios un amplio abanico de opciones de gestión y visualización de productos. Aunque los filtros de productos que vienen con WooCommerce ya son muy potentes, hay ocasiones en las que necesitamos filtros más personalizados, especialmente si hemos añadido campos personalizados a los productos. En este artículo, detallaremos cómo utilizar campos personalizados para filtrar productos de WooCommerce, y mostraremos cómo añadir campos personalizados al constructor de páginas (Elementor o WPBakery) en el que se implementa esta función.

¿Qué son los campos personalizados?

Los campos personalizados son una función de WordPress que permite a los usuarios añadir metadatos adicionales a páginas, entradas, productos, etc. EstosmetadatosPueden ser varios tipos de contenido como texto, números, imágenes, etc. Los productos en WooCommerce también se pueden ampliar con campos personalizados, como añadir nuevos atributos de producto, descripciones especiales, etc.

Por ejemploCampos personalizados avanzados (ACF) ProLa función de campos personalizados del plugin permite añadir nuevos campos a los productos, como "Material", "Marca", "Talla", etc. Estos campos pueden utilizarse como base para los filtros de productos, lo que proporciona a los usuarios una experiencia de filtrado de productos más precisa. Estos campos pueden utilizarse como base para los filtros de productos, proporcionando a los usuarios una experiencia de filtrado de productos más precisa.

¿Por qué utilizar campos personalizados para filtrar productos?

Utilizar campos personalizados para filtrar productos tiene muchas ventajas:

1. Detección precisaFiltrado: el filtrado puede basarse en atributos personalizados del producto para mejorar la experiencia del usuario.
2. destrezaPuede establecer diferentes condiciones de filtrado para diferentes productos con el fin de satisfacer diferentes necesidades empresariales.
3. Presentación mejoradaEn combinación con constructores de páginas como Elementor o WPBakery, se pueden lograr efectos de presentación front-end ricos.

Pasos detallados de la aplicación

A continuación detallaremos cómo filtrar productos de WooCommerce usando campos personalizados, usando el constructor de páginas Elementor como ejemplo. Para WPBakery, los pasos son básicamente los mismos.

Paso 1: Añadir campos personalizados de producto

Es necesario añadir campos personalizados al producto. Aquí vamos a utilizar el plugin ACF para hacer esto.

1. Instalar y activar el plug-in ACFPlugin Advanced Custom Fields: Vaya al repositorio de plugins de WordPress, busque e instale el plugin Advanced Custom Fields y actívelo.

2. Creación de un nuevo grupo de campos::
   • En el backend de WordPress, vaya al menú "Campos personalizados" y haga clic en "Añadir grupo de campos".
   • Asigne un nombre al grupo de campos (por ejemplo, "Atributos del producto") y añada los campos necesarios. Por ejemplo, puede añadir un campo llamado "Material" y seleccionar el tipo como "Texto".

3. Asociar grupos de campos a productos::
   • En la opción Ubicación, configure el grupo de campos para que sólo se muestre en la página del producto.
   • Guarde el grupo de campos.

Paso 2: Definir valores de campo personalizados en el producto

A continuación, hay que definir los valores específicos de los campos personalizados para cada producto.

1. Editar producto::
   • Vaya a la lista Todos los productos para editar un producto.
   • En la página de edición, verá el grupo de campos personalizados que acaba de crear.
2. Rellene los valores de los campos::
   • Rellene los valores de los campos personalizados según la situación real del producto. Por ejemplo, si el campo es "Material", puede rellenar "Algodón", "Piel", etc.

3. Guardar cambios.

Paso 3: Configurar el diseño de la página

Ahora, es necesario crear un diseño en el constructor de páginas que contenga la cuadrícula de productos y los elementos de filtro de la cuadrícula.

1. Crear nueva página::
   • En el backend de WordPress, vaya a Páginas > Añadir nueva página.
   • Elige usar Elementor o WPBakery para editar la página.

2. Añadir un diseño a dos columnas::
   • Añada un diseño de dos columnas a la página y ajuste la anchura de las columnas según sea necesario. Normalmente, las columnas para la cuadrícula de productos ocuparán un ancho mayor, mientras que la columna del filtro será relativamente estrecha.

Paso 4: Añadir elementos de la cuadrícula de productos

En la primera columna de la página, añada un elemento de cuadrícula de productos para mostrar su lista de productos.

1. Añadir cuadrícula de productos::
   • En Elementor, arrastre el elemento de la cuadrícula de productos a la primera columna.
   • Configure las opciones de la cuadrícula de productos, como los tipos de productos que se mostrarán, los métodos de clasificación, la paginación, etc.
2. Especifique el ID de la cuadrícula::
   • En la configuración de la rejilla de productos, especifique un ID de rejilla único (por ejemplo, "Gridtofilter"). Este ID se utilizará para vincular el filtro y la rejilla de productos en pasos posteriores.

Paso 5: Añadir el elemento filtrante de rejilla

En la segunda columna de la página, añada un elemento Filtro de cuadrícula para controlar la visualización de la cuadrícula de productos.

1. Añadir filtros de cuadrícula::
   • En Elementor, arrastre el elemento Grid Filter a la segunda columna.
   • De nuevo, especifique el mismo ID de cuadrícula ("Gridtofilter") que la cuadrícula del producto en la configuración.
2. Configuración de las opciones de filtro::
   • Al editar un filtro de rejilla, vaya a la sección Repetidor de propiedades y añada un elemento repetidor.
   • En el campo Filtrar por, seleccione el grupo de campos ACF añadido anteriormente (por ejemplo, Atributos del producto).
   • En "Seleccionar campo personalizado", seleccione un campo específico (por ejemplo, "Material").
3. Añadir varios filtros::
   • Si hay varios campos personalizados que deben utilizarse como filtros, puede seguir adelante y añadir elementos repetidores y seleccionar un campo personalizado diferente para cada elemento.

Paso 6: Publicar la página y probarla

Una vez finalizada la configuración, puede publicar la página y ver los resultados del front-end.

1. Página de inicio::
   • Guarde y publique la página.
2. Previsualizar y probar::
   • Visualice la página en la interfaz y compruebe que los filtros funcionan correctamente. Prueba a seleccionar diferentes filtros para ver si la cuadrícula de productos se actualiza dinámicamente en función de tus selecciones.

Paso 7: Añadir función de clasificación (opcional)

Si desea mejorar aún más la experiencia del usuario, puede añadir un elemento de ordenación en cuadrícula.

1. Añadir un elemento de ordenación de rejilla::
   • Añade un elemento de rejilla de ordenación a la página y lo asocia con el elemento de rejilla de producto anterior.
2. Configuración de las opciones de clasificación::
   • Seleccione los campos por los que desea que los usuarios puedan ordenar (por ejemplo, precio, fecha de lanzamiento, etc.).

resúmenes

Con los pasos anteriores, ha filtrado con éxito los productos de WooCommerce utilizando campos personalizados en su sitio web WordPress. Este método no sólo mejora la experiencia del usuario, sino que también añade un alto grado de personalización y flexibilidad a su sitio web. Tanto si se trata de una pequeña tienda online como de una gran plataforma de comercio electrónico, este método puede ayudarte a mostrar mejor tus productos y a satisfacer las diversas necesidades de tus usuarios.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres