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
- 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
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.
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.
