Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo agregar listas de deseos de productos a su tienda en línea utilizando el nuevo paquete de diseño de tienda de cosméticos de Divi. Agregar listas de deseos a su tienda en línea ayuda a sus visitantes a realizar un seguimiento de sus productos favoritos en su sitio web y lo ayuda a aumentar las conversiones en estos productos. Además del paquete de diseño de la tienda de cosméticos, también necesitaremos los complementos gratuitos WooCommerce y WooCommerce Wishlist.
Antes de sumergirnos en las diferentes partes y pasos, echemos un vistazo rápido a tres cosas que puede esperar de este tutorial:
- Botones ‘Agregar a la lista de deseos’ para cada producto en la página de su tienda
- Una página de lista de deseos que es única para cada visitante, pueden agregar productos de su lista de deseos a su carrito directamente
- Páginas de productos que coinciden con todo el paquete de diseño e incluyen un botón ‘Agregar a la lista de deseos’ también
Parte 1: descargue y active WooCommerce y el complemento de listas de deseos de WooCommerce
Paso 1: descarga y activa WooCommerce
Comience descargando WooCommerce yendo a la siguiente página y haciendo clic en el botón de descarga. Luego, ve a tu Tablero de WordPress > Complementos > Agregar nuevo > Cargar WooCommerce y actívalo .
Paso 2: configurar WooCommerce
Cuando instale WooCommerce en su sitio web por primera vez, deberá realizar la configuración (o puede omitirla por ahora).
Paso 3: Descargue y active las listas de deseos de WooCommerce
También necesitaremos el complemento Listas de deseos de WooCommerce en nuestro sitio web de WordPress. Nuevamente, vaya a su Tablero de WordPress> Complementos> Agregar nuevo> Cargue el complemento Listas de deseos de WooCommerce y actívelo.
Paso 4: Configure las listas de deseos de WooCommerce
El complemento WooCommerce Wishlists también tiene una configuración. Después de omitir la introducción, aplique la siguiente configuración a su configuración de página:
- Nombre de lista de deseos predeterminado: Copia de elección
- Mi lista de deseos: Crear automáticamente
Continúe con el siguiente paso, la configuración de los botones, y modifique la posición del botón y copie según sus necesidades.
En el paso de procesamiento, puede elegir si desea que los productos se eliminen de forma automática o manual. Si va a permitir que los visitantes eliminen los elementos cuando lo deseen, elija ‘Manual’.
Por último, tus visitantes también podrán compartir su lista de deseos en sus redes sociales. Puede habilitar o deshabilitar cualquier red social para la que desee que cuente.
Parte 2: Configuración del complemento de listas de deseos de WooCommerce
Paso 1: Ir a la configuración del complemento
Tendremos que realizar algunos cambios de configuración adicionales en el complemento Listas de deseos de WooCommerce yendo a su panel de WordPress > Lista de deseos de TI > Configuración general .
Desplácese hacia abajo hasta que encuentre ‘Configuración del botón de la página del producto’ y aplique los siguientes cambios:
- Tipo de botón: Botón
- Ícono ‘Agregar a la lista de deseos’: Corazón
- Color del icono ‘Añadir a la lista de deseos’: Blanco
Pase a la parte ‘Configuración del botón de lista de productos’ y aplique la misma configuración al botón que se hizo antes.
Paso 4: Cambios en el producto de la lista de deseos
Dentro de la configuración del producto de la lista de deseos, deshabilite la opción ‘Mostrar el botón Agregar al carrito’. Este botón normalmente aparecería justo al lado de cada uno de los productos dentro de la lista de deseos. Como ya existe allí una alternativa para agregar los productos al carrito (seleccionándolos), vamos a deshabilitar esta opción.
Paso 5: Cambios en el contador de productos de lista de deseos
Por último, aplique la siguiente configuración a la configuración del Contador de productos de lista de deseos también:
- Ícono de lista de deseos: Corazón
- Color del icono de lista de deseos: Blanco
El complemento de lista de deseos ha generado automáticamente una página de lista de deseos en su sitio web de WordPress. Esta página aún no está incluida en el menú principal. Para agregar esta página, vaya a Apariencia > Menús .
Luego, seleccione la página Lista de deseos dentro de sus páginas y agréguela a su menú. Guarde su menú una vez que haya completado este paso.
Parte 4: agregar productos a WooCommerce
Paso 1: Agregar nuevo producto
Ahora que hemos realizado todos los cambios necesarios en el complemento Listas de deseos de WooCommerce, estamos listos para agregar los diversos productos a nuestro sitio web.
Paso 2: agregue el nombre del producto, la descripción, la imagen, la galería y el precio
Cada producto necesita un:
- Nombre
- Descripción
- Breve descripción
- Imagen
- Galería
- Precio
Crea tantos productos como quieras y repite el mismo paso para cada uno de ellos.
Paso 3: Configuración de la publicación Divi
Cada producto también necesita un diseño de página de ancho completo en la configuración del producto Divi.
Parte 5: Modificar el color de énfasis del tema y la tipografía en el personalizador de temas
Paso 1: Abra el personalizador de temas
Si aún no ha cambiado el Color de acento del tema y la tipografía, continúe y hágalo dentro del Personalizador de temas navegando a Apariencia > Personalizar .
Paso 2: cambiar el color de acento del tema
Elija ‘#2f3854’ como su Color de énfasis del tema yendo a Configuración general > Configuración de diseño .
Paso 3: cambiar la tipografía
Vuelve a Configuración general > Tipografía > Y aplica la siguiente configuración que coincida con el paquete de diseño de la tienda de cosméticos:
- Altura de la línea de encabezado: 1,2
- Fuente del encabezado: Yeseva One
- Fuente del cuerpo: Montserrat
Parte 5: Modificar la página de lista de deseos con Visual Builder
Paso 1: Abra la página de contacto con Visual Builder
La página de la lista de deseos se ve por defecto un poco simple. Afortunadamente, podemos modificar esta página usando Visual Builder. Antes de abrir la página de lista de deseos con Visual Builder, vamos a guardar algunas secciones de la página de contacto en nuestra biblioteca Divi para poder reutilizarlas en la siguiente página de lista de deseos. Comience abriendo la página de contacto con Visual Builder.
Paso 2: Guarde la sección de héroe y la sección de suscripción a la biblioteca Divi
Luego, guarde la sección de héroe y la sección de suscripción en su Biblioteca Divi haciendo clic en el ícono marcado en la pantalla de impresión a continuación, dándole un nombre a su diseño y haciendo clic en el botón ‘Guardar en la biblioteca’.
Paso 3: Abra la página de listas de deseos con Visual Builder
Ahora que tenemos estas dos secciones dentro de nuestra biblioteca Divi, podemos continuar y abrir la página de lista de deseos con Visual Builder.
Paso 4: agregue secciones guardadas a la página de deseos
Agregue ambas secciones guardadas dentro de su biblioteca Divi a esta página y colóquelas en el lugar correcto en su página.
Paso 5: modificar el relleno de la sección principal
Para que la lista de deseos aparezca inmediatamente en la página, vamos a reducir el relleno de nuestra sección principal a ’30px’ tanto en la parte superior como en la inferior.
Paso 1: ve a las opciones del tema Divi
WooCommerce y WooCommerce Wishlists son complementos de terceros. Lamentablemente, no podemos realizar ningún cambio en los botones y las páginas de productos con Visual Builder. Vamos a utilizar algunas líneas de código CSS personalizadas para asegurarnos de que los botones y la página del producto coincidan con el paquete de diseño de la tienda de cosméticos. Para agregar estas líneas de código CSS, vaya a su Panel de WordPress > Divi > Opciones de tema .
Paso 2: agregue el código CSS al cuadro CSS personalizado
Desplácese hacia abajo en la pestaña General hasta que encuentre el cuadro CSS personalizado y agregue el siguiente código CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
|
.woocommerce div.product form.cart .button {background-color: #2f3854;border-radius: 20px;font-size: 12px;text-transform: uppercase;border: none;padding-left: 30px;padding-right: 30px;padding-top: 10px;padding-bottom: 10px;color: white;}.single-product div.product form.cart .button.tinvwl_add_to_wishlist_button, div.product form.cart .tinvwl_add_to_wishlist_button, .woocommerce ul.products li.product .button{background-color: #d18aa8;border-radius: 20px;font-size: 12px;text-transform: uppercase;border: none;padding-left: 30px;padding-right: 30px;padding-top: 10px;padding-bottom: 10px;color: white;}.woocommerce.tinv-wishlist button.button.alt, .woocommerce button.button{background-color: #2f3854;border-radius: 20px;font-size: 12px;text-transform: uppercase;border: none;padding-left: 30px;padding-right: 30px;padding-top: 10px;padding-bottom: 10px;color: white;}body.woocommerce .woocommerce-tabs {border: none;}body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs, body.woocommerce div.product .woocommerce-tabs ul.tabs {background: white;border: none;}body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {background: white;border: none;}.woocommerce div.product .woocommerce-tabs ul.tabs::before {border: none;}body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a, body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {color: #d18aa8 !important;}.woocommerce .quantity input.qty {background-color: white !important;color: black !important;} |
¡Eso es todo!
Pensamientos finales
En esta publicación, le mostramos cómo agregar listas de deseos de productos a su sitio web que son exclusivas de los productos favoritos de cada visitante. Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!