La mejor forma de personalizar la página de producto de Woocommerce con Divi Builder

Es difícil encontrar una tienda online, creada con WordPress y el complemento Woocommerce, que ofrezca una página de producto diferente a lo establecido por el plugin. Los diferentes temas pueden mostrar cambios sutiles en la tipografía o los colores, pero la programación de Woocommerce es la que es y no admite cambios directos sobre el plugin para adaptarlo a algo nuevo.

Para poder adaptar y personalizar nuestra propia página de producto no necesitas saber programar, ya hay gente que se ha encargado de hacerlo para nuestro beneficio, está todo integrado de forma visual en el constructor Divi, que puedes tenerlo instalado junto al tema con el mismo nombre, o como un plugin independiente con un tema diferente.

Este puede ser el momento ideal para hacerte con una suscripción a Elegant Themes, con la que podrás disfrutar de los temas premium Divi y Extra, e instalar el constructor Divi Builder donde quieras. Sólo desde el siguiente enlace podrás contar con un pequeño descuento que se activa durante 24 horas.

Cómo gestiona Divi la página de producto

Los programadores de Elegant Themes han creado unos módulos que separan cada elemento de la página de producto, permitiendo que seamos nosotros quienes elijamos dónde queremos colocarlo, creando nuestro propio diseño personalizado.

No todos los módulos son para crear una página de producto en venta, con ellos podemos diseñar también la página de pago, la del resumen de compra o la misma página de la tienda donde se muestran todos los artículos.

Pero ¡basta de rollos técnicos!, vamos al lío y empecemos a construir una página de producto personalizada.

Elementos que debe tener una página de producto en Woocommerce + Divi

Aunque el límite es nuestra imaginación, hay elementos básicos que tenemos que añadir sí o sí para que se comporte como una verdadera página de producto.

• Nombre o título del producto
• Descripción
• Imagen principal del producto o artículo
• Precio
• Botón de añadir al carrito
• Notificaciones para el usuario

Estos apartados serían suficientes para empezar a vender, pero podemos añadir más información que refuerce la calidad del producto o que ofrezcan otras opciones al usuaria de la tienda online.

• Tabla de categorías y opciones
• Galería de imágenes adicionales
• Caja de información adicional del producto
• Migas de pan
• Revisiones
• Productos relacionados
• Productos destacados o interesantes
• Lista de productos añadidos al carrito
• ...

Si ya tienes experiencia en este tipo de diseños, adelante, parte de cero, pero si estás empezando, mi recomendación es que edites un producto individual de los que tengas ya configurados en tu tienda, o te descargues alguna plantilla de las que ofrece Elegant Themes en su blog de forma gratuita.

Cómo crear una plantilla básica para todos los productos

Para poder modificar el aspecto y la disposición de cada elemento en todos los productos, primero tenemos que editar uno de los productos que ya tenemos configurado en Woocommerce, para luego exportar el diseño a una plantilla que afecte a toda la tienda online.

Generar el diseño de la página con Divi

Abrimos la pestaña de los productos en la administración y editamos cualquier producto de la tienda. Una vez que se abra picamos en el botón "Usar el constructor Divi".

Cuando termine de recargar la página podrás ver que Divi ha añadido varios módulos que corresponden a cada sección o elemento de la página de producto, pero cuidado, sólo para el producto que estamos editando. Si realizas cambios aquí, sólo afectaran a ese artículo y el resto de productos seguirán estando igual.

Sin modificar nada guardamos el diseño en la biblioteca picando en la opción de la barra del constructor Divi con forma de círculo y flecha.

Seguidamente picamos en la opción "Volver al editor estándar" para mantener el producto como estaba. Podemos salir del editor sin guardar los cambios.

Crear nueva plantilla en el Generador de temas de Divi

La forma de replicar el diseño en todos los productos de la web automáticamente es crear un diseño desde el "Generador de temas" de las opciones del Divi, y asignar ese diseño a todas las páginas de producto, las que ya tengan artículos y la futuras que añadamos.

Todo lo que hagas en esta sección no afectará a la web hasta que asignes el diseño que hayas creado a una página, artículo o producto. Hasta entonces seguirán mostrando el aspecto por defecto de WordPress y del tema que utilices.

Los pasos del diagrama anterior, son para para modificar cualquier página, pero tras acceder al "Generador de temas", dejamos el primer cuerpo de diseño vacío y añadimos un nuevo diseño picando en "Build New Template" para que sea exclusivo para los productos.

Lo hacemos en un nuevo cuadro de diseño porque el primero está reservado para el aspecto general de la web, y nosotros solo queremos modificar la página de producto sin que afecte al resto del sitio.

Cuando se desplieguen todas las opciones para asignar el nuevo diseño, buscamos la que corresponde a la página de productos llamada "Todos productos" (All products), la marcamos y aceptamos en el botón inferior "Crear plantilla" de la ventana desplegada.

Ya hemos creado la plantilla para la página de producto, pero aún está vacía y hay que añadir el diseño que hemos guardado en la biblioteca de Divi.

Cargar diseño en la nueva plantilla para todos los productos

La plantilla dispone de tres secciones individuales que podemos personalizar, la cabecera y el footer pueden tener un diseño diferente a la preestablecida en toda la web y que solo se mostrará al abrir los productos. Pero esto es otra historia.

Nos vamos a centrar en la opción del medio y vamos a picar en "Añadir cuerpo personalizado", seleccionamos "Añadir desde biblioteca" y buscamos nuestro diseño básico de página de producto.

Si es la primera vez que guardamos algo en la biblioteca lo encontraremos rápido en la pestaña "Cargar Diseño", pero si ya hemos guardado más cosas tendremos que buscar el diseño para seleccionarlo.

Picamos sobre el diseño guardado y lo cargamos en la plantilla. A partir de ahora todo lo que hagamos en esa plantilla y diseño se trasladará a todos los productos que tengamos en la tienda. Solo tenemos que picar en el lapicero para editar el diseño y modificar, añadir o quitar lo que queramos.

Podrás cambiar la fuente tipográfica, ampliar o reducir el precio, cambiar de lugar el título del producto, añadir descripciones adicionales y todo lo que se te ocurra que Divi te permite hacer.

Desde este enlace (en inglés) puedes ver un ejemplo de cómo modificar los módulos de una página de producto.

Descargar diseño de página de producto ya creado en Divi

Una opción que puede ayudarnos a ahorrar tiempo a la hora de realizar cambios en la página de producto es descargar algún diseño ya creado desde el blog de Elegant Themes. Debes saber que la información oficial de Divi se encuentra en inglés, por lo que la búsqueda tendrá que ser del tipo "Product Page Template".

Da igual que la página de producto no corresponda con el tipo de artículo que vendes, eso lo puedes cambiar después, céntrate en que te guste la disposición de los elementos y el formato que tienen.

Para descargar los archivos, a lo largo del texto aparece un formulario donde sólo tienes que dejar tu correo electrónico para que aparezca el botón de descarga.

Lo habitual es descargar un archivo .zip que tenemos que descomprimir para quedarnos solo con el archivo .json.

Para cargar el nuevo diseño vamos a la opción "Generador de temas" y picamos en la opción de "Exportar/Importar"

Marcamos la pestaña "Importar" y picamos sobre el recuadro punteado para buscar el archivo en el ordenador, o arrastramos el archivo .json directamente al recuadro. Este método es válido para cargar cualquier diseño desde un archivo descargado en el ordenador.

Cuando termine de cargarse, automáticamente se creará la nueva plantilla para todos los productos con el nuevo diseño ya incluido. Podemos editarlo para cambiar los colores y adaptarlos a nuestra imagen corporativa o realizar algún cambio, si es necesario, que consideremos oportuno

¿A que ya ves con otros ojos los artículos y productos de tu tienda? Las posibilidades de modificación son infinitas, y si sabes un poquito de CSS y hojas de estilo entonces no habrá quien te pare.

Recuerda que para poder disfrutar de Divi necesitas una suscripción y que desde nuestra web te ofrecemos un pequeño descuento. Anímate y no dejes pasar la oportunidad. Mi consejo es que elijas la opción "Life Time" y te olvides de renovaciones para siempre.

Descargo de responsabilidad : Existe una relación publicitaria con SiteGround, Hostgator, Sered y Elegant Themes por la que genero una pequeña comisión si adquieres el/los producto/-os por medio de los enlaces de esta página. Gracias a ello puedo ofrecerte ofertas como estas, a ti no te supone ninguna carga adicional económica ni compromiso alguno y a mí me sirve para tomarme un café. GRACIAS