+34 644 20 61 33 / +52 81 321 81 333 info@laraprado.com

Escrito por Lara Prado

Consultora y Formadora en Marketing Online. Directora en la agencia de marketing online Lanzadera Online.

07.08.2021

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:

pagina de resultados de busqueda productos en woocommerce divi fea como cambiar optimizar grid layout

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:

pagina resultados de busqueda de productos en tienda online ecommerce woocommerce como cambiar mejorar productos en grid rejilla layout

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

CREAR PAGINA DE RESULTADOS DE BUSQUEDA CON 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.

COMO HACER UN DISEÑO OPTIMIZADO DE PAGINA DE BUSQUEDA RESULTADOS PARA PRODUCTOS DE TIENDA ONLINE EN GRID EN DIVI CON WOOCOMMERCE

2.2 TEXTO DINÁMICO CON PALABRA CLAVE INTRODUCIDA

COMO HACER UN DISEÑO OPTIMIZADO DE PAGINA DE BUSQUEDA RESULTADOS PARA PRODUCTOS DE TIENDA ONLINE EN GRID EN DIVI CON WOOCOMMERCE titulo dinamico

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.

COMO HACER UN DISEÑO OPTIMIZADO DE PAGINA DE BUSQUEDA RESULTADOS PARA PRODUCTOS DE TIENDA ONLINE EN GRID EN DIVI CON WOOCOMMERCE 2

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.

Y hasta aquí esta entrada en nuestro blog de marketing online.

¿TE HA SIDO ÚTIL? ¿HA RESUELTO TU PROBLEMA? ¿TE AYUDARÁ EN TU PROYECTO ONLINE?

Si es así…TE RUEGO que por favor contribuyas a nuestra comunidad devolviendo el favor con algunas de las siguientes opciones:

 

Contrata nuestros servicios.

¿Te quedan cosas por hacer en tu proyecto online?

¿Podemos ayudarte en algo más?

Consulta nuestros servicios y precios súper asequibles.

Invítanos a un café.

Igual que a cualquier amigo 🙂

Clica en el icono del café de la esquina o aquí e invítanos a un café virtual con un par de cómodos clics 🙂

Comparte esta entrada.

Ayúdanos a compartir esta entrada en tus redes sociales 🙂

Suscríbete a nuestra newsletter.

Déjanos tu email para enviarte más contenido interesante y gratuito como este.

w

Déjanos un comentario.

Tus comentarios nos dan feedback, ayudan a la comunidad y afectan positivamente a nuestro SEO.

Visita más entradas del blog.

Sigue navegando por nuestra web en cualquiera de nuestras otras entradas del blog.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *