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

26 de septiembre - 2022

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.

Suscríbete:

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.

Módulos adicioanles al instalar Woocommerce en Divi
Módulos adicionales al instalar Woocommerce en Divi

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".

Usar el constructor divi en Woocommerce
Usar el constructor Divi en Woocommerce

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.

Guardar diseño o plantilla en biblioteca de Divi
Guardar plantilla en biblioteca de Divi

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.

Opción "Generado de temas" de Divi
Generador de temas del constructor Divi

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.

Generador de temas en DIVI
Construir un diseño desde cero con el Generado de temas de Divi

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.

Nuevo layout en el Generador de temas de Divi
Nuevo layout en el Generador de temas de Divi

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.

Asignar pagina de producto al nuevo diseño en Divi
Asignar pagina de producto al nuevo diseño en Divi

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.

Añadir diseño desde la Biblioteca de Divi
Añadir diseño desde la Biblioteca de Divi

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.

Cargar diseño de página de producto
Cargar diseño de página de producto

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.

Diseño añadido a la plantilla de todos los productos en el generador de temas
Diseño añadido a la plantilla de todos los productos

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.

Módulos editables del diseño de la página de producto
Módulos editables del diseño de la 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".

Diseño de página de producto creado por Elengant Themes
Diseño de página de producto creado por Elengant Themes

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.

Formulario de descarga de la plantilla de página de producto en Divi
Formulario 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"

Importar nieva plantilla con diseño en Divi
Importar nieva plantilla con diseño

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.

Arrastrar y cargar el nuevo archivo de diseño en Divi
Arrastrar y cargar el nuevo archivo de diseño

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

Diseño añadido de la página de producto en el generador de temas
Editar la página de producto
Editando la nueva página de producto cargada
Editando la nueva página de producto subida desde el ordenador

¿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

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento