Los productos en su sitio web de comercio electrónico deben destacarse; creo que eso es algo en lo que todos podemos estar de acuerdo. Cuanta más atención atraigan y más claros sean, más posibilidades tendrá de convertir a los visitantes en clientes. WooCommerce es a menudo la opción obvia cuando estás creando una tienda en línea con WordPress. Pero a veces, es difícil comenzar con una página de producto y convertirla exactamente en lo que tenía en mente.
Tampoco es realmente necesario. Con Divi , puede diseñar cualquier tipo de exhibición de productos e incluir un botón Agregar al carrito que funcione allí mismo, dentro de su diseño Divi. De esa manera, no necesariamente tendrá que guiar a sus visitantes a la página de cada producto para que hagan las compras que desean en su sitio web. En este tutorial, le mostraremos cómo crear impresionantes secciones de productos con botones funcionales Agregar al carrito que puede usar en cualquier tienda en línea que esté creando para usted o un cliente.
¡Hagámoslo!
Ahora, antes de sumergirnos en el tutorial, echemos un vistazo rápido a las secciones de productos que recrearemos en este tutorial y cómo se ven en diferentes tamaños de pantalla.
en el escritorio
en tableta
En el teléfono
Suscríbete a nuestro canal de Youtube
Acercarse
- Toda una sección está dedicada a un producto
- Para crear varios productos en una página, se puede clonar y modificar una sección (agregue tantas secciones de productos a una página como desee)
- Para cada sección de producto, usamos tres filas con diferentes estructuras de columnas
- Estamos eliminando el espacio entre las filas para crear un resultado coherente.
- Cada botón Agregar al carrito tendrá un enlace único que coincida con el producto dentro de su complemento WooCommerce
- Después de hacer clic en el botón Agregar al carrito, el artículo se agregará inmediatamente al carrito del visitante (sin ser redirigido a la página del producto real)
Agregar nueva sección estándar
Espaciado
Abra una página existente o cree una nueva página y agregue una nueva sección estándar. Abra la configuración de la sección, vaya a la pestaña Diseño y agregue el siguiente margen y espaciado:
- Margen superior, derecho, inferior e izquierdo: 50px
- Relleno superior e inferior: 0px
Estamos agregando el margen para que la sombra del cuadro (que agregaremos en el siguiente paso) se muestre en la página. Se necesita el relleno cero superior e inferior para eliminar todo el espacio entre la parte superior e inferior de la sección y las filas que se agregarán más adelante en este tutorial.
Sombra de la caja
Abra la subcategoría Box Shadow a continuación y seleccione la primera opción. Puede modificar la sombra del cuadro según sus necesidades, pero para este ejemplo, estamos usando la configuración predeterminada.
Añadir Fila #1
Configuración de fila
Estructura de la columna
Una vez que haya terminado con la configuración de la sección, continúe y agregue la primera fila usando la siguiente estructura de columnas:
Color de fondo de la columna 2
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue ‘#ededed’ como color de fondo de la segunda columna.
Dimensionamiento
Pase a la pestaña Diseño, abra la subcategoría Tamaño y aplique la siguiente configuración:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
Esto eliminará todo el espacio izquierdo y derecho entre la fila y la sección.
Espaciado
También necesitaremos eliminar el espacio superior e inferior entre la fila, la sección y las filas que siguen. Abra la subcategoría Espaciado y aplique la siguiente configuración:
- Relleno superior e inferior: 0px
- Columna 1 Relleno superior: 50px
- Columna 2 Relleno superior: 50px
- Relleno inferior de la columna 2: ninguno (escritorio), 50 px (tableta), 20 px (teléfono)
Agregar módulo de imagen a la columna 1
Requisitos de imagen
El siguiente paso es agregar un módulo de imagen a la primera columna. Asegúrese de utilizar una imagen de producto con un color de fondo transparente o con el mismo color que el color de fondo de la columna 1 de su fila.
Cargar imagen
Una vez que agregue el módulo de imagen, cargue la imagen del producto.
Espaciado
Pase a la pestaña Diseño, abra la subcategoría Espaciado y aplique el siguiente margen personalizado:
- Superior: 18% (Escritorio), 0px (Tableta y Teléfono)
- Abajo: -10% (Escritorio), 0px (Tableta y Teléfono)
Estos valores dependen de la imagen del producto que esté utilizando. Tendrá que experimentar con estos valores después de agregar todas las filas para asegurarse de que la imagen aparezca centrada entre todas las filas que siguen. El margen inferior negativo permite que su imagen se superponga a las otras filas.
Agregue el Módulo de Texto #1 a la Columna 2
Configuración de texto
Lo único que se necesita dentro de la primera columna es el módulo de imagen que agregamos en el paso anterior. Ahora podemos comenzar a agregar los diferentes módulos de texto a la segunda columna. Agregue un primer módulo de texto que contenga el nombre del producto y aplíquele la siguiente configuración de texto:
- Peso de la fuente del texto: Ultra Bold
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 36px
- Color del texto: #e00b00
Espaciado
Para crear un espacio superior e izquierdo para el módulo de texto, aplique la siguiente configuración a la subcategoría Espaciado:
- Superior: 50px
- Izquierda: 10%
Agregue el Módulo de Texto #2 a la Columna 2
Configuración de texto
Agrega la descripción de tu producto en un segundo Módulo de Texto y modifica la configuración del texto según tus preferencias. El texto del ejemplo no incluye ningún cambio.
Dimensionamiento
Sin embargo, vamos a modificar el Ancho dentro de la subcategoría Tamaño. En lugar de ‘100%’, use ‘75%’.
Espaciado
Para este módulo de texto, también estamos creando un espacio a la izquierda y arriba usando la siguiente configuración:
- Margen superior: 50px
- Relleno izquierdo: 10%
Agregue el Módulo de Texto #3 a la Columna 2
Color de fondo
El último módulo de texto dentro de esta columna incluye ciertas especificaciones de su producto que le gustaría compartir con sus visitantes/clientes. Estamos usando este módulo de texto solo en el teléfono, ya que crearemos una fila y una apariencia separadas para él en el escritorio y la tableta. La versión de escritorio y tableta que crearemos no es compatible con dispositivos móviles , es por eso que estamos usando esta alternativa en su lugar. Comience agregando un nuevo módulo de texto y use ‘#e5e5e5’ como color de fondo.
Configuración de texto
Además de poner los títulos de las especificaciones en negrita, mantenemos la configuración de texto predeterminada de este módulo de texto. Por supuesto, siéntete libre de modificarlos según tus necesidades.
Espaciado
También queremos crear algo de espacio para este Módulo de texto yendo a la subcategoría Espaciado y aplicando el siguiente margen y relleno:
- Margen superior e inferior: 50px
- Relleno superior e inferior: 20px
- Relleno izquierdo: 10%
Visibilidad
Como se mencionó anteriormente, queremos que este módulo de texto aparezca solo en el teléfono. Vaya a la pestaña Avanzado, abra la subcategoría Visibilidad y deshabilite este Módulo de texto en la tableta y el escritorio.
Añadir Fila #2
Configuración de fila
Estructura de la columna
Ahora que hemos terminado la primera fila, continúe y agregue una segunda fila justo debajo que contenga la siguiente estructura de columnas:
Color de fondo de la columna 3
Antes de agregar cualquier módulo a esta fila, abra la configuración de la fila y use ‘#e5e5e5’ como color de fondo para la tercera columna.
Color de fondo de la columna 4
Desplácese un poco hacia abajo y use ‘#e0e0e0’ como color de fondo para la columna 4.
Dimensionamiento
Nuevamente, estamos eliminando toda la distancia en el lado izquierdo y derecho de la fila (y entre las columnas) al aplicar la siguiente configuración a la subcategoría Tamaño:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
También eliminaremos el espacio superior e inferior y agregaremos algo de espacio a cada columna usando la siguiente configuración en la subcategoría Espaciado:
- Relleno superior e inferior: 0px
- Columna 3 Relleno superior e inferior: 20px
- Columna 4 Relleno superior e inferior: 20px
Visibilidad
Esta fila contendrá las especificaciones de su producto. Dado que hemos creado una alternativa compatible con dispositivos móviles en la fila anterior, vamos a deshabilitar toda esta fila para el teléfono dentro de la subcategoría Visibilidad de la pestaña Avanzado.
Agregue el Módulo de Texto #1 a la Columna 3
Configuración de texto
Agregue un primer módulo de texto a la tercera columna de esta fila que contiene los títulos de las especificaciones. Luego, vaya a la pestaña Diseño y aplique la siguiente configuración a la subcategoría Texto:
- Peso de fuente de texto: ultra negrita
- Estilo de fuente de texto: Mayúsculas
Espaciado
Necesitamos crear algo de espacio adicional para este módulo de texto utilizando los siguientes valores de relleno personalizados:
- Superior: 25px
- Abajo: 25px
- Izquierda: 20%
Agregue el Módulo de Texto #2 a la Columna 4
Configuración de texto
El módulo de texto dentro de la columna 4 se realiza utilizando la configuración de texto predeterminada. De nuevo, no dude en modificar estos ajustes de texto según sus necesidades.
Espaciado
Crearemos el espacio para este Módulo de texto como se hizo para el Módulo de texto en la tercera columna:
- Relleno superior: 25px
- Relleno inferior: 25px
- Relleno izquierdo: 20%
Añadir Fila #3
Configuración de fila
Estructura de la columna
La última fila de esta sección contiene el precio y la llamada a la acción. Para crear esta fila, vamos a utilizar la siguiente estructura de columnas:
Color de fondo de la columna 3
Sin agregar ningún módulo a esta fila todavía, abra la configuración de la fila y use ‘#e00b00’ como el color de fondo de la tercera columna.
Color de fondo de la columna 4
Del mismo modo, use ‘#b5b5b5’ como color de fondo para la columna 4.
Dimensionamiento
Eliminaremos el espacio entre esta fila, las columnas y el lado izquierdo y derecho de la sección aplicando la siguiente configuración de tamaño:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
Asimismo, vamos a eliminar el espacio entre esta fila, la fila anterior y la parte inferior de la sección. También crearemos un relleno adicional para la columna 3 (que contiene el CTA) y la columna 4 (que contiene el precio):
- Relleno superior e inferior: 0px
- Columna 3 Relleno superior e inferior: 20px
- Columna 4 Relleno superior e inferior: 20px
Enlace de botón
Ahora que la configuración de las filas está lista, podemos comenzar a agregar los módulos a nuestras columnas. Comience agregando un módulo de botones a la tercera columna. Este módulo de botones permitirá a los visitantes agregar inmediatamente un producto a su carrito sin tener que ir a la página del producto. Agregue el siguiente enlace a la opción URL del botón:
- www.susitioweb.com?add-to-cart=PRODUCTID
Obviamente, tendrás que usar la URL de tu propio sitio web para esto.
Y reemplace el ‘PRODUCTID’ al final de la URL con el ID de producto correcto. Puede encontrar una ID de producto navegando a su Panel de WordPress> Productos> Todos los productos> Pasando el cursor sobre el producto correcto y verá aparecer el número de ID.
Alineación de botones
Una vez hecho esto, puede abrir la pestaña Diseño del Módulo de botones y habilitar la Alineación de botones central.
Configuración de botones
Continúe abriendo la subcategoría Botón y aplíquele la siguiente configuración:
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #FFFFFF
- Ancho del borde del botón: 0px
- Peso de fuente: ultra negrita
- Estilo de fuente: Mayúsculas
- Mostrar icono de botón: Sí
- Ícono de botón: Seleccione el ícono del carrito
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Agregar módulo de texto a la columna 4
Configuración de texto
Por último, agregue el módulo de texto de precio a la cuarta columna de la fila y aplique la siguiente configuración de texto después de agregar el precio:
- Peso de fuente de texto: ultra negrita
- Tamaño del texto: 45px
- Color del texto: #FFFFFF
- Orientación del texto: Centro
Espaciado
Tendremos que agregar un margen superior de ’10px’ al Módulo de botones también, para asegurarnos de que esté a la misma altura que el Módulo de botones.
Clonar Sección Según Número de Productos
Cambiar imágenes
Para cada sección que clone, deberá modificar la imagen del producto.
Ajuste el relleno superior e inferior de la imagen según la imagen
Dependiendo de las dimensiones de su imagen, también deberá modificar el margen superior e inferior. Estos valores dependen totalmente de su imagen. Tendrá que jugar con los valores hasta que vea que la imagen del producto está centrada entre todas las filas.
Modificar el enlace Agregar al carrito
Y, por supuesto, también deberás modificar el enlace de cada Módulo de Botones de acuerdo al producto que representa. ¡Eso es todo!
Resultado
Echemos un vistazo final al resultado que hemos recreado en esta publicación de blog en diferentes tamaños de pantalla.
en el escritorio
en tableta
En el teléfono
Pensamientos finales
En este tutorial, le mostramos cómo crear secciones de productos con botones funcionales Agregar al carrito usando solo las opciones integradas de Divi. Puede crear el diseño que desee, sin tener que concentrarse en las páginas de productos de WooCommerce solo con este método. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!