# Visión General de la Pantalla POS

La pantalla POS es la interfaz principal para vender productos. Es donde pasarás la mayor parte de tu tiempo al usar WCPOS.

<!-- -->

## Diseño de la Pantalla[​](#screen-layout "Enlace directo a Diseño de la Pantalla")

### Cabecera[​](#header "Enlace directo a Cabecera")

La barra de cabecera muestra:

* **Nombre de la tienda** - El nombre de tu tienda WooCommerce conectada
* **Indicador de conectividad** - Punto verde cuando está conectado al servidor, amarillo/rojo cuando está desconectado
* **Menú de usuario** - Haz clic para acceder a la configuración, cambiar usuarios o cerrar sesión

### Cajón de Navegación[​](#navigation-drawer "Enlace directo a Cajón de Navegación")

La barra lateral izquierda proporciona acceso rápido a todas las pantallas principales:

| Icono | Pantalla      | Descripción                               |
| ----- | ------------- | ----------------------------------------- |
|       | **POS**       | Interfaz principal de ventas (estás aquí) |
|       | **Productos** | Gestión de inventario (Pro)               |
|       | **Pedidos**   | Historial de pedidos (Pro)                |
|       | **Clientes**  | Gestión de clientes (Pro)                 |
|       | **Informes**  | Informes de ventas (Pro)                  |
|       | **Registros** | Registros del sistema para depuración     |
|       | **Soporte**   | Canal de soporte en Discord               |

El número de versión se muestra en la parte inferior del cajón.

## Diseño Responsivo[​](#responsive-layout "Enlace directo a Diseño Responsivo")

WCPOS se adapta a diferentes tamaños de pantalla:

### Escritorio / Tableta (Pantallas Grandes)[​](#desktop-tablet-large-screens "Enlace directo a Escritorio / Tableta (Pantallas Grandes)")

En pantallas más grandes, el POS muestra un **diseño de dos columnas**:

* **Columna izquierda:** Panel de Productos - buscar y navegar por productos
* **Columna derecha:** Panel de Carrito - ver y gestionar el pedido actual

Las columnas son **redimensionables** - arrastra el divisor entre ellas para ajustar las proporciones.

<!-- -->

### Móvil (Pantallas Pequeñas)[​](#mobile-small-screens "Enlace directo a Móvil (Pantallas Pequeñas)")

En pantallas más pequeñas, el POS utiliza un **diseño basado en pestañas**:

* **Pestaña Productos:** Navegar y añadir productos al carrito
* **Pestaña Carrito:** Ver carrito, gestionar líneas de artículos y pagar

Cambia entre pestañas utilizando la barra de navegación en la parte inferior de la pantalla.

<!-- -->

## Componentes Principales[​](#main-components "Enlace directo a Componentes Principales")

### Panel de Productos[​](#product-panel "Enlace directo a Panel de Productos")

El lado izquierdo del POS es el [Panel de Productos](/es/pos/product-panel/.md), donde puedes:

* Buscar productos por nombre, SKU o código de barras
* Filtrar productos por estado de stock, categoría, etiquetas, etc.
* Añadir productos al carrito

[Aprende más sobre el Panel de Productos →](/es/pos/product-panel/.md)

### Panel de Carrito[​](#cart-panel "Enlace directo a Panel de Carrito")

El lado derecho del POS es el [Panel de Carrito](/es/pos/cart/.md), donde puedes:

* Ver artículos en el pedido actual
* Editar cantidades y precios
* Seleccionar o añadir clientes
* Acceder a acciones del pedido (notas, anular, pagar)

[Aprende más sobre el Panel de Carrito →](/es/pos/cart/.md)

### Pago[​](#checkout "Enlace directo a Pago")

Cuando estés listo para completar una venta, haz clic en **Pagar** para abrir el [modal de Pago](/es/pos/checkout/.md):

* Aplicar códigos de cupón
* Seleccionar método de pago
* Procesar el pago
* Imprimir o enviar por correo electrónico el recibo

[Aprende más sobre Pago →](/es/pos/checkout/.md)

## Atajos de Teclado[​](#keyboard-shortcuts "Enlace directo a Atajos de Teclado")

WCPOS admite atajos de teclado para una operación más rápida. Accede a la lista completa a través del modal de Configuración o consulta [Atajos de Teclado](/es/settings/store/hotkeys.md).

Atajos comunes:

| Atajo              | Acción                    |
| ------------------ | ------------------------- |
| `Ctrl + F`         | Enfocar barra de búsqueda |
| `Ctrl + Shift + S` | Abrir Configuración       |
| `Escape`           | Cerrar modal/diálogo      |

## Conectividad[​](#connectivity "Enlace directo a Conectividad")

El indicador verde en la cabecera muestra tu estado de conexión:

* **Verde** - Conectado al servidor WooCommerce
* **Amarillo** - Problemas de conexión, reintentando
* **Rojo** - Modo fuera de línea

Mientras estés fuera de línea, aún puedes navegar por productos y clientes almacenados en caché, y comenzar nuevos pedidos. Completar pedidos requiere conectividad.

***