Uso del paquete de diseño de moda de Divi para crear una tienda en línea con WooCommerce

El nuevo Fashion Layout Pack de Divi tiene una excelente configuración para cualquier tienda en línea. La integración del módulo de la tienda y la organización de los diseños de página le brindan una ventaja significativa. Pero para que este diseño funcione como una tienda en línea funcional, necesitamos el complemento WooCommerce. Y es posible que se sorprenda de lo bien que funcionan juntos Divi y WooCommerce.

En este tutorial, le mostraré cómo crear una tienda en línea usando el paquete de diseño de moda de Divi usando Woocommerce. Lo guiaré a través de cómo configurar correctamente sus diseños para personalizarlos, cómo dar vida a la página de la tienda con la integración de Woocommerce y algunos consejos sobre cómo usar elementos de su diseño y el personalizador de temas para diseñar páginas de Woocommerce.

La puesta en marcha

Por el bien del tiempo, comenzaré este tutorial con ciertos pasos ya completados.

1. Instale y active el tema Divi
2. Instale y active WooCommerce
3. Descargue el paquete de diseño de moda e importe el archivo Fashion_All.json a su biblioteca de temas Divi.
4. Cree nuevas páginas para cada diseño.
5. Cree su menú principal.

Si está confundido por la configuración mencionada anteriormente, puede encontrar instrucciones más detalladas sobre cómo configurar su diseño correctamente consultando estos 10 pasos para usar un paquete de diseño para su nuevo proyecto.

Una vez que haya completado los 5 pasos anteriores, estará listo para comenzar.

El adelanto

Aquí hay un vistazo a algunas de las páginas de WooCommerce que creará.

Uso del paquete de diseño de moda de Divi para crear una tienda en línea con WooCommerce

Suscríbete a nuestro canal de Youtube

Cambie su color de acento global

Para empezar, vamos a cambiar el color de acento global del tema Divi. Cambiar el color de acento global para que coincida con su diseño siempre es una buena idea, pero también es la forma más fácil de combinar sus páginas de WooCommerce con su combinación de colores sin tener que usar CSS personalizado. Notará que este color de acento se usa para diseñar elementos en cada una de sus páginas de WooCommerce, como la página de un solo producto, la página del carrito, etc.

Para cambiar el Color de acento global, vaya al Personalizador de temas y vaya a Configuración general> Configuración de diseño y busque la opción Color de acento del tema en la parte inferior.

Estoy usando este color rosa del diseño: # fc7086

Luego, una vez que lo cambie, guarde y publique su configuración y actualice su página para permitir que el color de acento actualice otras configuraciones dentro del personalizador.

Actualizar la configuración de tipografía en el personalizador de temas

Dado que WooCommerce utiliza la configuración predeterminada del personalizador de temas para diseñar el texto de cada una de sus páginas, querrá asegurarse de que la tipografía utilizada en sus diseños coincida con la configuración de tipografía en el personalizador de temas.

Para actualizar su tipografía, vaya a Divi> Personalizador de temas> Configuración general> Tipografía y actualice lo siguiente:

Tamaño del texto del cuerpo: 16px
Altura de la línea del cuerpo: 1.9
Tamaño del texto del encabezado: 42
Estilo de fuente de encabezado: B
Fuente de encabezado: Playfair Display
Fuente del cuerpo: Poppins
Color del enlace corporal: [si actualizaste tu color de acento global, este color debería aparecer aquí]

Establecer la página de la tienda WooCommerce

WooCommerce le permite establecer qué página desea que sea su página de tienda base. Esta página debe incluir todas las categorías de productos para que los usuarios sepan todo lo que ofrece su tienda. Dado que nuestro diseño tiene una página de tienda, sigamos adelante y hagamos de esta nuestra página de tienda base.

Desde su Panel de WordPress, vaya a WooCommerce> Configuración y haga clic en la pestaña Productos en la parte superior de la página. En el menú directamente debajo de la pestaña, seleccione Pantalla . A continuación, seleccione la página de la tienda en la página "Tienda" que creó con el nuevo diseño de página de la tienda del paquete de diseño de moda.

Luego, guarde los cambios.

Agrega productos a tu tienda

Es posible que haya notado que su página de la tienda, a pesar de tener dos módulos de la tienda, no muestra ningún producto. Bueno, obviamente, primero debes agregar productos. Para agregar un nuevo producto a su tienda, vaya a su panel de WordPress y siga estos pasos:

1. Navegue a Productos> Agregar nuevo
2. Ingrese el nombre del producto
3. Ingrese una descripción para el producto
4. Ingrese el precio del producto
5. Ingrese una descripción breve para el producto
6. Agregue tres categorías nuevas (Verano, Destacados y En oferta)
7. Seleccione la categoría de su Producto (en este caso sería Verano)
8. Agregar imagen de producto
9. Publicar / Actualizar producto

Asignar categorías a sus productos

A medida que repita los pasos anteriores para crear más productos nuevos, asegúrese de asignar una categoría a cada uno (n. ° 7 en los pasos enumerados anteriormente). Para este tutorial, agregué 6 productos en la categoría "Verano", 6 productos en la categoría "Destacados" y 1 producto en la categoría "En oferta".

Actualizar los módulos de la tienda en la página de la tienda

Ahora que ha creado sus productos, puede agregarlos a la página de su tienda. Como mencioné antes, el diseño de la página de la tienda ya tiene módulos de la tienda integrados en el diseño. Hay uno en la sección Verano y otro en la sección Destacados.

Vaya a la página de la tienda e implemente el constructor visual. Luego, coloque el cursor sobre el módulo de la tienda (que actualmente no muestra ningún producto) debajo de la fila que contiene el título de Moda de verano y haga clic en la configuración del módulo.

Actualice la configuración para incluir solo la categoría "Verano".

Ahora debería ver todos los productos agregados con la categoría verano.

A continuación, busque el módulo de la tienda debajo del Título de productos destacados y actualice la configuración para incluir solo la categoría Destacados.

Agregue un módulo de la tienda para mostrar artículos "en oferta" en la página de la tienda

Dado que tenemos dos categorías (Productos destacados y Moda de verano) en la página de la tienda, sería fácil crear categorías y productos adicionales utilizando los módulos que ya se proporcionan en el diseño.

Creemos otra sección para mostrar nuestros productos "en oferta".

Para hacer esto, implemente el constructor visual y use las opciones de clic derecho para copiar la sección completa que muestra los productos de moda de verano y péguela directamente debajo de la sección Productos destacados.

Ahora todo lo que tiene que hacer es realizar algunas actualizaciones.

En la fila que muestra el título, haga clic en el texto del módulo de texto y cambie el título para que diga "En oferta" en lugar de "Moda de verano".

Luego, cambie la imagen en la columna de la izquierda a algo más consistente con sus productos de venta.

Por último, actualice el módulo de la tienda para incluir solo la categoría "En oferta".

Diseñe sus páginas de WooCommerce con el diseño de moda

WooCommerce genera su propio conjunto de páginas de WooCommerce automáticamente cuando instala el complemento. Estos incluyen los siguientes:

Tienda - que es un marcador de posición para un archivo de tipo de publicación para sus productos.
Carrito: utiliza el código corto [woocommerce_cart] para generar el contenido del carrito.
Pago: utiliza el código corto [woocommerce_checkout] para mostrar la información.
Mi cuenta: utiliza el código abreviado [woocommerce_my_account] para mostrar información específica del cliente relacionada con su cuenta.

Dado que ya hemos seleccionado nuestra página de la tienda, no es necesario ningún otro diseño. Pero para las otras 3 páginas de WooCommerce, necesitamos diseñarlas para que se ajusten al diseño de nuestros otros diseños de página.

Agregar un encabezado de sección al carrito y las páginas de pago

Primero echemos un vistazo a la página del carrito. Así es como se ve antes de que le hagamos algo.

Tenga en cuenta que debido a que actualizamos nuestro color de acento global, nuestros enlaces y botones ya coinciden con el esquema de color. Y, dado que actualizamos nuestra configuración de tipografía en el Personalizador de temas, los encabezados y el texto del cuerpo también coinciden con nuestro tema.

Pero podemos hacer algo mejor que esto con solo unos pocos clics. Primero vaya a la página de la tienda, implemente el constructor visual y guarde la sección superior que contiene el encabezado de la página en la biblioteca. Puede dar el nombre de "sección de encabezado de página".

A continuación, desplácese hacia abajo hasta la parte inferior de la página y busque la última sección que contiene la opción de correo electrónico y los detalles de contacto y guárdelo en su biblioteca con el nombre "sección de pie de página".

Ahora ve a editar la página de tu carrito. Desde el editor de página predeterminado, seleccione usar Divi Builder, luego "Use Visual Builder". El constructor debería haber puesto automáticamente el código corto [woocommerce_cart] en un módulo de texto dentro de una fila de una columna de una sección normal. Si no es así, deberá crearlo usted mismo. A continuación, haga clic en el icono azul más para agregar una nueva sección debajo de la actual, seleccione la pestaña "Agregar desde la biblioteca". Luego, seleccione la nueva sección que acaba de crear llamada "Sección de encabezado de página".

Luego arrastre esa sección a la parte superior de su página y cambie el texto del título a "Su carrito". ¡Eso es todo!

También puede repetir este proceso para la página de pago.

Diseño de la página Mi cuenta con Divi Builder

Ahora que sabe cómo agregar un encabezado a estas páginas de WooCommerce, siga adelante y haga lo mismo con la página Mi cuenta. Esta vez puede agregar la sección de pie de página que guardó en la biblioteca al final de esta página.

Es posible que desee darle a esta página un diseño distinto para que sea más obvio que esta es una página que administra su cuenta. Entonces, en lugar del fondo degradado rosa para las secciones de encabezado y pie de página, vaya a la configuración de la sección para cada uno y cambie los colores del degradado de fondo a # 9599e2 y # 8bc6ec.

Use la configuración del módulo de texto para diseñar el contenido de código corto de WooCommerce

Debido a que el código corto de WooCommerce ahora reside dentro de un módulo de texto, puede usar esto para su ventaja para diseñar algunos de esos elementos dentro de la configuración del módulo.

Hagamos esto para nuestra página Mi cuenta. Desde el constructor visual, actualice la configuración del módulo de texto que contiene el contenido del código corto de la siguiente manera:

En la pestaña de diseño…

Tamaño del texto del texto: 20px
Altura de la línea de texto: 1.6em

Ahora haga clic en la pestaña del enlace debajo de la sección Texto para diseñar los enlaces de la siguiente manera:

Fuente de enlace: Poppins
Peso de la fuente del enlace: Semi negrita
Tamaño del texto del enlace: 27px
Altura de la línea de enlace: 1.5em

Guardar ajustes

Ahora consulte su página de Mi cuenta.

¿Utiliza CSS personalizado para diseñar páginas de archivo de WooCommerce?

Algunas de las páginas de archivo utilizadas por WooCommerce no se generan con un código corto como las otras páginas, por lo que no se pueden modificar con Divi Builder. Entonces, para estas páginas, necesitaría romper algunos CSS personalizados.

Veamos la página de Categoría destacada como ejemplo.

Ahora abramos el Personalizador de temas y hagamos clic en CSS adicional y agreguemos lo siguiente:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Esto aplicará estilo al cuadro desplegable de clasificación, las rutas de navegación y la fuente de precios. El resto del texto se puede cambiar usando la configuración de Tipografía del personalizador de temas.

Pensamientos finales

Crear una tienda en línea para su sitio web es mucho más fácil con la ayuda de este increíble paquete de diseño, WooCommerce y Divi Builder. Obviamente, hay algunas necesidades que aún deben hacerse y que están más allá del alcance de este artículo. Por ejemplo, aún deberá decidir qué pasarela de pago usar, cómo desea manejar el envío y otros elementos de acción más específicos de la empresa. Pero WooCommerce debería poder manejar la mayor parte de lo que necesita.

En todo caso, espero que esta publicación te haya inspirado a crear algo increíble por tu cuenta.

Espero tener noticias tuyas en los comentarios.

¡Salud!