Los que me seguís ya sabéis que soy una enamorada de WordPress + WooCommerce + Divi.

Peeeeeeeeeeeeeeero, he de admitir que Divi podía mejorar un poquito en relación a las tiendas online y los módulos para productos. Van por el buen camino y han mejorado mucho en los últimos dos años, pero todavía queda mucho por hacer.

Quiere decir esto que no se puedan hacer según que cosas? NO. TODO es posible con Divi, y eso es lo que me enamoró.

Quiere decir que a las agencias de marketing online nos toca currar más, a mano, haciendo las cosas desde cero…en lugar de ahorrarnos trabajo cuando se refiere a la optimización de tiendas online hechas en Divi.

Un ejemplo muy claro: la página de resultados en una tienda online.

Os pongo un ejemplo real: estamos terminando la tienda online para una farmacia, y cuando ponemos en el buscador por ejemplo «crema», esto es lo que nos arroja Woocommerce + Divi:

Como véis es horrible, cero user-friendly, cero navegable, no hay donde hacer una configuración simple que muestre los productos por ejemplo en grid…por no hablar de los metadatos mostrando el nombre del autor del producto y la fecha en la que se creó. Todo mal.

Así que nos toca diseñar la página de resultados de búsqueda de la tienda a mano desde cero, usando todas las posibilidades ofrecidas por el generador de temas de Divi.

Así es como ha quedado nuestra página de resultados:

Y a continuación, el paso a paso para hacer esto a mano desde cero 🙂

PASO 1. CREA UNA PLANTILLA DE RESULTADOS DE BÚSQUEDA EN EL GENERADOR DE TEMAS DE DIVI

Añadiremos un CUERPO PERSONALIZADO, y comenzaremos a construir la página.

PASO 2. DISEÑA TU PÁGINA DE RESULTADOS DE BÚSQUEDA

2.1 MÓDULO BUSCADOR

Una vez estén dentro de la página de búsqueda, quizás quieran probar con diferentes palabras clave, así que he añadido un módulo BÚSQUEDA.

2.2 TEXTO DINÁMICO CON PALABRA CLAVE INTRODUCIDA

Lo siguiente que haremos será introducir un contenedor dinámico que muestre la palabra clave de búsqueda introducida por el usuario.

Para ello, añadimos un módulo de texto, borramos el texto de muestra, clicamos en el icono de contenido dinámico en la esquina superiro derecha de la caja de texto, y seleccionamos ENVIAR/TÍTULO DEL ARCHIVO.

2.3 MÓDULO TIENDA

Ahora añadiremos el módulo de contenido que mostrará los elementos relacionados.

En este caso, será el módulo de tienda, que es el que contiene los productos.

Si quisiéramos hacer esto para entradas de blog, añadiríamos el de blog.

En cualquier caso, lo más importante es activar USAR LA PÁGINA ACTUAL.

PASO 3. EDITA FUNCTIONS.PHP PARA QUE LAS BÚSQUEDAS ARROJEN PRODUCTOS COMO RESULTADOS

Y es que, ahora ya váis entendiendo de porqué os decía que Divi nos complica un poco las cosas para las tiendas online….

El módulo de búsqueda de Divi, viene configurado por defecto sólo para que sean buscables PAGINAS Y ENTRADAS.

El del mnú funcioará, pero esa preciosa barrita que hemos puesto para que puedan hacer más búsquedas dentro de la misma página de resultados, no funcionará para buscar productos…y estamos en una tienda online!!!

Si quieres que se puedan buscar otros elementos como productos, proyectos….hay que aádir un pedacito de código al functions.php DEL TEMA HIJO de Divi.

Os dejo aquí el artículo original sobre este añadido al functions.php recíen publicado por Elegant Themes que a mi me costó 2 días con el chat de soporte conseguir, por si queréis toquetearlo para otras cositas como proyectos o lo que sea, y aquí debajo ya preparado el código para que incluya productos.

Y con estos pasitos hemos acabado con nuestra bonita y optimizada para ecommerce página de resultados de búsqueda 🙂

Saludos,

Lara Prado.