El nuevo paquete de diseño de moda de Divi tiene una excelente configuración para cualquier tienda en línea. La integración del módulo de tienda y la organización de los diseños de página le brindan una importante ventaja inicial. Pero para que este diseño funcione como una tienda en línea funcional, necesitamos el complemento WooCommerce. Y puede que te sorprenda 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. Te explicaré cómo configurar correctamente tus diseños para personalizarlos, cómo darle vida a la página de la tienda con la integración de Woocommerce y algunos consejos sobre cómo usar elementos de tu diseño y el personalizador de temas para diseñar las páginas de Woocommerce.
Por cuestiones de tiempo, voy a 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. Crea tu menú principal.
Si está confundido con 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 para el 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 de 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 énfasis actualice otras configuraciones dentro del personalizador.
Actualizar la configuración de tipografía en el personalizador de temas
Dado que WooCommerce usa la configuración predeterminada del personalizador de temas para diseñar el texto de cada una de sus páginas, querrá asegurarse de hacer coincidir la tipografía utilizada en sus diseños con la configuración de tipografía en el personalizador de temas.
Para actualizar tu tipografía, ve a Divi > Personalizador de temas > Configuración general > Tipografía y actualiza lo siguiente:
Tamaño del texto del cuerpo: 16 px
Altura de la línea del cuerpo: 1,9
Tamaño del texto del encabezado: 42
Estilo de fuente del encabezado: B
Fuente del encabezado: Playfair Display
Fuente del cuerpo: Poppins
Color del enlace del cuerpo: [si actualizó su color de énfasis global, este color debería aparecer aquí]
Establecer la página de la tienda de 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 su tienda tiene para ofrecer. Dado que nuestro diseño tiene una página de tienda, avancemos 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 Mostrar . 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 necesitas agregar productos primero. Para agregar un nuevo producto a su tienda, vaya a su panel de control de WordPress y siga estos pasos:
1. Navegue a Productos > Agregar nuevo
2. Ingrese el nombre del producto
3. Ingrese la descripción del producto
4. Ingrese el precio del producto
5. Ingrese la descripción breve del producto
6. Agregue tres categorías nuevas (verano, destacado y en oferta)
7. Seleccione la categoría de su Producto (en este caso sería Verano)
8. Agregar Imagen del Producto
9. Publicar/Actualizar Producto
Asigne Categorías a sus Productos
A medida que repite los pasos anteriores para crear más productos nuevos, asegúrese de asignar una categoría a cada uno (#7 en los pasos enumerados anteriormente). Para este tutorial, agregué 6 productos en la categoría «Verano», 6 productos en la categoría «Destacado» 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 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 generador visual. Luego pase el cursor sobre el módulo de la tienda (actualmente no muestra ningún producto) debajo de la fila que contiene el título 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 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.
Vamos a crear otra sección para mostrar nuestros productos «En oferta».
Para hacer esto, implemente el generador 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 tienes que hacer es hacer algunas actualizaciones.
En la fila que muestra el Titular, 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 izquierda a algo más consistente con sus productos de venta.
Finalmente, actualice el módulo de la tienda para incluir solo la categoría «En oferta».
Dale estilo a tus 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 lo siguiente:
Tienda: que es un marcador de posición para un archivo de tipo de publicación para sus productos.
Carrito: que usa el código abreviado [woocommerce_cart] para generar el contenido del carrito.
Pago: que usa el código abreviado [woocommerce_checkout] para mostrar la información.
Mi cuenta: que 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 Tienda, no se necesita más diseño. Pero para las otras 3 páginas de WooCommerce, debemos 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 a las páginas de pago
Echemos un vistazo a la página del carrito primero. Esto es lo que parece 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 cuerpo del texto también coinciden con nuestro tema.
Pero podemos hacerlo un poco mejor que esto con solo unos pocos clics. Primero vaya a la página de la tienda, implemente el generador 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».
Luego, 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árdela 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 «Usar Visual Builder». El constructor debería haber puesto automáticamente el código abreviado [woocommerce_cart] en un módulo de texto dentro de una fila de una columna de una sección regular. Si no, tendrás que crearlo tú mismo. A continuación, haga clic en el ícono azul más para agregar una nueva sección debajo de la actual, seleccione la pestaña «Agregar de 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, continúe 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 se trata de una página que administra su cuenta. Entonces, en lugar del fondo de 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 de degradado de fondo a #9599e2 y #8bc6ec.
Use la configuración del módulo de texto para diseñar el contenido de código abreviado de WooCommerce
Debido a que el código abreviado de WooCommerce ahora reside dentro de un módulo de texto, puede usarlo a su favor 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 generador visual, actualice la configuración del módulo de texto que contiene el contenido del shortcode de la siguiente manera:
En la pestaña de diseño…
Texto Tamaño del texto: 20 px
Altura de la línea de texto: 1,6 em
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 del enlace: Poppins
Peso de la fuente del enlace: Semi negrita
Tamaño del texto del enlace: 27 px
Altura de la línea del enlace: 1,5 em
Guardar ajustes
Ahora echa un vistazo a tu página Mi cuenta.
¿Usando CSS personalizado para dar estilo a las páginas de archivo de WooCommerce?
Algunas de las páginas de archivo utilizadas por WooCommerce no se generan con un código abreviado como las otras páginas, por lo tanto, no se pueden modificar con Divi Builder. Por lo tanto, para estas páginas, necesitaría desglosar 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
.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 diseñará el cuadro desplegable de clasificación, las migas de pan y la fuente del precio. 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 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 escuchar de usted en los comentarios.
¡Salud!