Elementor. Elementos para WooCommerce

Diseñe y personalice una experiencia de compra en línea completa en todo su sitio web.

Product Breadcrumbs

Migas de pan de WooCommerce, donde puede controlar los colores y el diseño de WooCommerce Breadcrumbs

Estilo

Color del texto : elija el color del texto de las migas de pan
Color del enlace : elija el color del texto del enlace de Breadcrumbs
Tipografía : establezca las opciones de tipografía para el texto de Breadcrumbs
Alineación : alinee las migas de pan a la izquierda, a la derecha o al centro

Product Title

Use este widget para controlar el estilo y el diseño del título del producto en la plantilla única de WooCommerce

Contenido

Título : Generado dinámicamente automáticamente
Enlace : Ingrese la URL para el enlace del elemento. Haga clic en la rueda dentada Opciones de enlace para agregar rel=nofollow al enlace o para abrir el enlace en una nueva ventana
Tamaño : Elija entre Predeterminado, Pequeño, Mediano, Grande, XL, XXL
Etiqueta HTML : seleccione la etiqueta HTML que se usará para el título, de H1 a H6, o div, span o p
Alineación : alinee el título a la izquierda, a la derecha, al centro o justificado

Estilo

Color del texto : elige el color del texto
Tipografía : cambie las opciones de tipografía para el texto
Sombra de texto : agregue una sombra y desenfoque al texto
Modo de fusión : seleccione entre múltiples efectos de capa, incluidos Normal, Multiplicar, Pantalla, Superposición, etc.

Add To Cart

Agregue un botón Agregar al carrito, vinculado dinámicamente a un producto específico, en cualquier lugar de su sitio arrastrando el widget Agregar al carrito personalizado donde lo necesite.

Contenido

Producto

Producto: seleccione el producto que desea agregar al carrito
Mostrar cantidad: Establézcalo en Sí para permitir que el usuario cambie la cantidad
1. Cantidad: si Mostrar cantidad se establece en No, esta opción estará disponible para que pueda predeterminar la cantidad de artículos que desea agregar al carrito.

Botón

Tipo: Seleccione el tipo de botón a utilizar, eligiendo entre Predeterminado, Información, Éxito, Advertencia y Peligro
Texto: Introduzca el texto que se mostrará en el botón
Alineación: Alinee el [widget] a la izquierda, a la derecha, al centro o justificado
Tamaño: seleccione los tamaños de botón preestablecidos, de Extra pequeño a Extra grande
Icono: Seleccione un icono de Font Awesome para mostrar en el botón
Posición del icono: elija mostrar el icono antes o después del texto del botón
Espaciado de iconos: establezca la cantidad de espacio entre el icono y el texto del botón
ID de botón: (Opcional) Asigne una ID de botón única para usar en situaciones como eventos de Google Analytics

Diseño

En el selector desplegable, elija el diseño que desee. El diseño predeterminado es En línea (flexible); sin embargo, esto puede necesitar ser ajustado para la integración. El diseño apilado es ideal para tiendas en línea que permiten Apple Pay. El diseño automático ajustará el botón a los otros componentes disponibles en el widget. Las opciones de control receptivo se pueden ajustar por punto de interrupción marcando el icono de punto de interrupción.

Estilo

Botón

Opciones de tipografía

Tipografía: desde el ícono del lápiz, haga clic para abrir el panel de opciones de fuente para elegir las opciones de familia, peso, transformación, estilo, decoración, altura de línea y espaciado entre letras

Estas opciones se pueden configurar de forma independiente para los estados normal y flotante.

Color del texto: elija el color del texto del botón
Color de fondo: elija el color de fondo del botón
Animación al pasar el mouse: elija un efecto de animación al pasar el mouse sobre el ícono, como Crecer, Pulso, Sesgar, etc.

Fronteras

Tipo de borde: seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o acanalado
Radio del borde: controla la redondez del borde del botón
Sombra de cuadro: ajuste las opciones de sombra de cuadro

Relleno

Relleno: establece el relleno dentro del botón.

Solución de problemas

Nota: "Habilitar los botones AJAX para agregar a la cesta en los archivos" debe estar habilitado en Configuración de WooCommerce > Productos para que esta función funcione correctamente.

Product Data Tabs

Controle el estilo de las pestañas de datos del producto en la plantilla única de WooCommerce

Estilo

Pestañas

normales | Activo

Las siguientes opciones se pueden configurar de forma independiente para los estados normal y activo.

Color del texto : elija el color del texto de las pestañas
Color de fondo : elija el color de fondo del texto de las pestañas
Color del borde : elija el color del borde de la pestaña

Tipografía : establezca las opciones de tipografía para el texto de las pestañas
Radio del borde : establezca el radio del borde para controlar la redondez de las esquinas

Panel

Color del texto : elija el color del texto del panel
Tipografía : establezca las opciones de tipografía para el texto del Panel

Título

Color del texto : elija el color del texto del encabezado
Tipografía : establezca las opciones de tipografía para el texto del encabezado
Ancho del borde : controle el grosor del borde del panel
Radio del borde : establezca el radio del borde para controlar la redondez de las esquinas del panel
Sombra de cuadro : ajuste las opciones de sombra de cuadro

Products

Muestre productos en cualquier página de su sitio, configurando su contenido y estilo con el widget de productos de WooCommerce

Contenido

productos

Columnas : establezca el número exacto de columnas para mostrar, de 1 a 12
Filas : establezca el número máximo de filas para mostrar
Paginación : seleccione Sí para mostrar Paginación o No para ocultarla
Permitir pedido : seleccione Sí para dar a los usuarios la opción de ordenar los productos por Predeterminado, Popularidad, Clasificación, Más reciente, Precio: De menor a mayor o Precio: De mayor a menor
Mostrar recuento de resultados : seleccione Sí para mostrar el número de resultados de este archivo o No para ocultarlo.

Consulta

Fuente : Seleccione la fuente de resultados, eligiendo entre Consulta actual, Últimos productos, Oferta, Destacados, Selección manual, Relacionado, Ventas adicionales o Ventas cruzadas. Según la fuente que haya elegido para la consulta, se le darán opciones que le permitirán filtrar los resultados.

Incluir

Incluir por : Término, luego use Buscar y Seleccionar para elegir cuáles usar
establece el orden en que se mostrarán los productos. Las opciones incluyen: Título, Precio, Popularidad, Clasificación, Aleatorio y Orden del menú.
Orden : DESC (descendente) o ASC (ascendente)

Nota : Si elige Relacionado como Fuente y Categoría como Incluir por, se mostrarán las publicaciones relacionadas con la categoría asignada a la publicación actual que se muestra. Entonces, si el usuario está viendo una publicación en la categoría Viajes, por ejemplo, la página mostrará publicaciones relacionadas que también están en la categoría Viajes. Si la publicación que se muestra actualmente tiene varias categorías asignadas, las publicaciones relacionadas extraerán las publicaciones de la PRIMERA categoría (alfabéticamente) asignada a la publicación.

Excluir

Excluir por : Publicación actual, Selección manual, Término, luego use Buscar y Seleccionar para opciones manuales o Término
Ordenar por : establezca el orden en que se mostrarán las publicaciones. Las opciones incluyen: Título, Precio, Popularidad, Clasificación, Aleatorio y Orden del menú.
Orden : DESC (descendente) o ASC (ascendente

Estilo

productos

Espacio entre columnas : establezca el espacio exacto entre las columnas
Espacio entre filas : establezca el espacio exacto entre las filas
Alineación : alinea los datos de los productos a la izquierda, a la derecha o al centro

Imagen

Tipo de borde : seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o acanalado
Radio del borde : establezca el radio para controlar la redondez de las esquinas del borde
Espaciado : ajuste la cantidad de espacio entre las imágenes y sus datos

Título

Color : Elija el color del título del producto
Tipografía : establezca las opciones de tipografía para el texto del título
Espaciado : ajuste la cantidad de espacio después del título

Clasificación

Color de estrella : elija el color de una estrella llena
Color de estrella vacía : elija el color de una estrella vacía
Tamaño de estrella : establezca el tamaño de las estrellas
Espaciado : ajuste la cantidad de espacio después de las estrellas de calificación

Precio

Color : Elige el color del producto Precio
Tipografía : establece las opciones de tipografía para el producto Precio

Precio regular

Color : Elige el color del Precio Regular del producto
Tipografía : Establece las opciones de tipografía para el Precio Regular del producto

Botón

normales | Flotar

Las siguientes opciones se pueden configurar de forma independiente para los estados normal y flotante.

Color del texto : elija el color del texto del botón del producto
Color de Fondo : Elija el color de fondo del Botón del producto
Color del borde : elija el color del borde del botón del producto

Tipografía : configure las opciones de tipografía para el texto del botón del producto
Tipo de borde : seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o acanalado
Radio del borde : controla la redondez de la esquina del borde del botón
Relleno de texto : establezca el relleno dentro del botón
Espaciado : ajuste la cantidad de espacio sobre los botones
Alinear botones automáticamente : al activar esta opción, los botones se alinearán con la parte inferior del envoltorio. Esto permite la alineación de botones cuando los títulos de los productos se ajustan a líneas adicionales.

Ver carrito

Color : elija el color del texto Ver carrito debajo de los botones
Tipografía : establezca las opciones de tipografía para el texto Ver carrito

Caja

Ancho del borde : controle el grosor del borde alrededor de la caja del producto
Radio del borde : controle la redondez de la esquina de la caja de productos
Relleno : cambie el relleno dentro de la caja de productos

normales | Flotar

Las siguientes opciones se pueden configurar de forma independiente para los estados normal y flotante.

Sombra de cuadro : ajuste las opciones de sombra de cuadro
Color de fondo : elija el color de fondo de la caja de productos
Color del borde : elija el color del borde de la caja de productos

Venta relámpago

Venta Flash : Mostrar u Ocultar
Color del texto : elija el color del texto Flash de venta
Color de fondo : elija el color de fondo del Flash de venta
Tipografía : establezca las opciones de tipografía para el texto Flash de venta
Radio del borde : controle la redondez de las esquinas del Flash de venta
Ancho : controle el grosor del borde para el Flash de venta
Altura : Establece la altura del Flash de Venta
Posición : Establece la posición del Flash de Venta, Izquierda o Derecha, de la caja de productos
Distancia : establezca la distancia del Flash de venta desde la parte superior de la caja de productos

Nota: el estilo de este widget a menudo se ve afectado por su tema y complementos. Si experimenta algún problema de este tipo, intente cambiar a un tema básico y desactive los complementos relacionados, o ajuste el estilo dentro de la configuración de su tema.

Custom Add To Cart

Agregue un botón Agregar al carrito, vinculado dinámicamente a un producto específico, en cualquier lugar de su sitio arrastrando el widget Agregar al carrito personalizado donde lo necesite.

Contenido

Producto

Producto : seleccione el producto que desea agregar al carrito
Mostrar cantidad : Establézcalo en Sí para permitir que el usuario cambie la cantidad
- Cantidad: si Mostrar cantidad se establece en No, esta opción estará disponible para que pueda predeterminar la cantidad de artículos que desea agregar al carrito.

Botón

Tipo : Seleccione el tipo de botón a utilizar, eligiendo entre Predeterminado, Información, Éxito, Advertencia y Peligro
Texto : Introduzca el texto que se mostrará en el botón
Alineación : Alinee el [widget] a la izquierda, a la derecha, al centro o justificado
Tamaño : seleccione los tamaños de botón preestablecidos, de Extra pequeño a Extra grande
Icono : Seleccione un icono de Font Awesome para mostrar en el botón
Posición del icono : elija mostrar el icono antes o después del texto del botón
Espaciado de iconos : establezca la cantidad de espacio entre el icono y el texto del botón
ID de botón : (Opcional) Asigne una ID de botón única para usar en situaciones como eventos de Google Analytics

Diseño

Estilo

Botón

Opciones de tipografía

Estas opciones se pueden configurar de forma independiente para los estados normal y flotante.

Color del texto : elija el color del texto del botón
Color de fondo : elija el color de fondo del botón
Animación al pasar el mouse : elija un efecto de animación al pasar el mouse sobre el ícono, como Crecer, Pulso, Sesgar, etc.

Fronteras

Tipo de borde : seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o acanalado
Radio del borde : controla la redondez del borde del botón
Sombra de cuadro : ajuste las opciones de sombra de cuadro

Relleno

Relleno : establece el relleno dentro del botón.

Solución de problemas

Nota: "Habilitar los botones AJAX para agregar a la cesta en los archivos" debe estar habilitado en Configuración de WooCommerce > Productos para que esta función funcione correctamente.

WooCommerce Pages

Muestre una página de WooCommerce (página del carrito, página de un solo producto, página de pago, formulario de seguimiento de pedidos o página de mi cuenta) en cualquier lugar de su sitio.

Contenido

Elemento

Página : seleccione una página de WooCommerce para mostrar, eligiendo entre la página del carrito, la página de un solo producto, la página de pago, el formulario de seguimiento de pedidos o la página de mi cuenta. Si se selecciona "Página de un solo producto", aparece un campo adicional disponible que le permite buscar y seleccionar una página en particular para mostrar.

Menu Cart

El widget de carrito de menú le permite colocar un ícono de carrito de WooCommerce en su menú o en cualquier lugar de su página.

Contenido

Icono de menú

Ícono : Seleccione el ícono que desea mostrar, eligiendo entre Carrito, Cesta o Bolsa, en diseños Ligero, Medio o Sólido.
Indicador de artículos : seleccione el tipo de indicador que se usará para la cantidad de artículos en el carrito, eligiendo entre Ninguno, Burbuja o Simple
Ocultar vacío : deslícese a SÍ para ocultar el indicador de artículos si el carrito está vacío
Subtotal : muestra u oculta el subtotal actual del carrito
Alineación : Alinee el carro del menú a la izquierda, a la derecha o al centro

Carro

Opciones principales

Tipo de carro : Seleccione el tipo de carro a mostrar eligiendo entre Carro lateral o Mini carro
Abrir carrito : Seleccione la opción deseada eligiendo entre On Click o On Hover
Posición del carro : Haga clic en el icono de posición Izquierda o Derecha para establecer la posición del carro en el contenedor.

Cerrar carrito

Cerrar icono : Alternar la opción Mostrar/Ocultar en el panel
Posición del icono : haga clic en el icono de posición izquierda y derecha para establecer la posición del icono de cierre en el contenedor.

Remover el artículo

Quitar icono : cambia la opción Mostrar/Ocultar en el panel
Posición del icono : haga clic en el icono de posición superior, central o inferior para establecer la posición del icono de eliminación en el contenedor.

Precio y cantidad

Posición : haga clic en el icono de posición Superior o Inferior para establecer la posición del encabezado Precio y Cantidad en el contenedor.

Divisores de carro : cambie la opción Mostrar/Ocultar en el panel para establecer el estado deseado.

Botones

Ver carrito : cambie la opción Mostrar / Ocultar en el panel para establecer el estado deseado
Pago : cambie la opción Mostrar / Ocultar en el panel para establecer el estado deseado
Posición vertical : haga clic en el icono de posición superior o inferior para establecer la posición de los botones en el contenedor.

Opciones adicionales

Carrito Opciones adicionales

Abrir carrito automáticamente : cambie la opción Mostrar/Ocultar en el panel para abrir el carrito cada vez que se agrega un artículo.
Actualizar carrito automáticamente : cambie la opción Mostrar/Ocultar en el panel para mostrar las actualizaciones del carrito (por ejemplo, un artículo eliminado) a través de Ajax. El carrito se actualizará sin actualizar toda la página.

Estilo

Icono de menú

Normal principal | Opciones de desplazamiento

Color del icono : elija el color del icono del carrito
Color de fondo : elija el color de fondo del contenedor del widget
Color del borde : elija el color del borde del contenedor del widget
Sombra de cuadro : haga clic en el icono para establecer opciones adicionales de sombra de cuadro
Ancho del borde : controle el grosor del borde alrededor del contenedor del widget
Radio del borde : establezca el radio del borde para controlar la redondez de las esquinas

Icono

Tamaño : ajusta el tamaño del icono del carrito
Espaciado : ajuste la cantidad de espacio entre el ícono del carrito y el texto del subtotal
Relleno : cambie la configuración de relleno del contenedor del widget

Indicador de artículos

Color del texto : elija el color del número de elementos en el indicador de elementos
Color de fondo : elija el color de fondo del indicador de elementos
Distancia : establezca la distancia entre el indicador de iconos y el texto del subtotal

Carro

Opciones de estilo principal

Color de fondo : use el selector de color para establecer el fondo del carrito
Tipo de borde : seleccione un tipo de borde o déjelo establecido en ninguno
Radio del borde : use los valores para establecer el radio de los bordes si está seleccionado
Sombra de cuadro : haga clic en el icono para mostrar las opciones de sombra de cuadro
Relleno : Cambie los valores para establecer el relleno deseado del contenedor

Cerrar carrito

Tamaño del icono : use el control deslizante o establezca manualmente los valores del tamaño del icono en % o PX
Color : utilice el selector de color para establecer el valor del icono de cierre

Remover el artículo

Tamaño del icono : use el control deslizante o establezca manualmente los valores del tamaño del icono en % o PX
Color : utilice el selector de color para establecer el valor del icono Quitar elemento

Total parcial

Color : elija el color del texto del subtotal en la superposición del carrito
Tipografía : cambie las opciones de tipografía para el texto del subtotal en la superposición del carrito
Alineación : haga clic en los iconos para elegir entre alineación a la izquierda, al centro o a la derecha
Estilo de divisor : Seleccione el tipo de divisor entre Sólido, Punteado, Discontinuo, Ranurado o déjelo en Ninguno
Ancho : establece el ancho del divisor en los valles
Color : use el selector de color para seleccionar el color del divisor

Productos

Titulo del producto

Color : elija el color del título del producto en la superposición del carrito
Tipografía : cambie las opciones de tipografía para el título del producto en la superposición del carrito

Precio del producto

Color : elija el color del precio del producto en la superposición del carrito
Tipografía : cambie las opciones de tipografía para el precio del producto en la superposición del carrito

Cantidad

Color : elija el color del precio del producto en la superposición del carrito
Tipografía : cambie las opciones de tipografía para el precio del producto en la superposición del carrito

Divisor

Estilo : seleccione el estilo del divisor arriba y abajo del subtotal en la superposición del carrito, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o ranurado.
Color : elija el color del divisor de subtotales en la superposición del carrito
Peso : establezca el grosor del divisor de subtotal
Espaciado : establezca el espaciado entre los divisores de subtotal y el texto de subtotal

Botones

Diseño : elija el diseño de los botones en la superposición del carrito, ya sea en línea o apilados.
Espacio entre : establezca la cantidad de espacio entre los botones de superposición del carrito

Ver carrito

Color del texto : elija el color del texto del botón Mostrar carrito en la superposición del carrito
Color de fondo : elija el color de fondo del botón Mostrar carrito en la superposición del carrito
Color del borde : elija el color del borde del botón Mostrar carrito en la superposición del carrito
Ancho del borde : controle el grosor del borde alrededor del botón Mostrar carrito en la superposición del carrito

Verificar

Color del texto : elija el color del texto del botón Pagar en la superposición del carrito
Color de fondo : elija el color de fondo del botón Pagar en la superposición del carrito
Color del borde : elija el color del borde del botón Pagar en la superposición del carrito
Ancho del borde : controle el grosor del borde alrededor del texto del botón Pagar en la superposición del carrito
Tipografía : cambie las opciones de tipografía para ambos botones en la superposición del carrito
Radio del borde : establezca el radio del borde para ambos botones en la superposición del carrito

Mensajes

Tipografía : cambie las opciones de tipografía para los mensajes en el carrito
Color del mensaje del carrito vacío : use el selector de color para establecer el color del mensaje
Alineación : utilice los iconos para elegir la alineación a la izquierda, al centro, a la derecha o justificada.

Otra información

Configuración predeterminada del minicarro de WooCommerce

Para evitar conflictos con los complementos o temas de WooCommerce que pueden utilizar sus propias plantillas de Mini Cart, Elementor le ofrece la opción de habilitar o deshabilitar la versión de Elementor de la plantilla de Mini Cart. Si WooCommerce está activado, siga estos pasos para habilitar o deshabilitar la plantilla Mini Cart de Elementor.

Ve a Elementor > Configuración > Integraciones > WooCommerce
Elija Habilitar para esta opción a fin de reemplazar la plantilla de minicarrito predeterminada de WooCommerce o la plantilla de minicarrito de su tema con la plantilla de Elementor. A menos que se establezca manualmente en Deshabilitar, esta configuración se habilita automáticamente una vez que el widget del carrito de menú se usa en cualquier parte de su sitio.
Elija Deshabilitar para optar por no usar la plantilla Mini Cart de Elementor.