Cómo editar tu tienda WooCommerce + Elementor Pro sin tocar el diseño

Compartir

Si tu tienda fue construida con WooCommerce y Elementor Pro, no necesitas saber programar para mantenerla al día. Esta guía cubre lo esencial para que puedas cambiar textos e imágenes por tu cuenta, sin tocar la estructura del sitio. No cubre cómo crear páginas, secciones o widgets nuevos — eso lo dejamos para tu agencia, así evitamos que un cambio mal hecho afecte el diseño general.

Bloque 0 · Antes de empezar

Lo básico para orientarte dentro del panel de administración de WordPress.

1. Ingresar al panel de WordPress

  1. Ve a tudominio.cl/wp-admin (o el enlace que te compartimos al entregar el sitio).
  2. Ingresa tu usuario y contraseña.
  3. Llegarás al Escritorio, la pantalla principal de administración.

2. Cómo está organizado el panel

En el menú lateral izquierdo vas a encontrar, entre otros:

  • Páginas: el contenido general del sitio (Inicio, Nosotros, Contacto).
  • Productos: las fichas de tu tienda, agregadas por WooCommerce.
  • Pedidos: las compras que hacen tus clientes.
  • Apariencia y Elementor: configuración visual del sitio (uso poco frecuente).

Tip: tanto una página como un producto pueden editarse con Elementor Pro si así se construyó el sitio. El botón para entrar a ese editor es el mismo en ambos casos.

Bloque 1 · Cómo editar con Elementor Pro

Tu sitio está construido con Elementor Pro. Esta guía es solo para cambiar contenido — textos e imágenes — dentro de ese editor, sin romper nada.

3. Abrir una página con Elementor Pro

  1. Ve a Páginas → Todas las páginas.
  2. Pasa el mouse sobre la página que quieres editar y haz clic en Editar con Elementor.
  3. Si ese botón no aparece, entra a Editar y luego haz clic en el botón azul Editar con Elementor arriba de la pantalla.
  4. Se abre el editor visual: a la izquierda el panel de edición, al centro la vista previa en vivo del sitio.

Importante: Elementor Pro trae widgets y funciones avanzadas (formularios, plantillas dinámicas, pop-ups). Esta guía no las cubre — si necesitas algo más allá de cambiar un texto o una imagen, escríbenos por WhatsApp antes de intentarlo.

4. Editar un texto existente

  1. Haz clic directamente sobre el texto que quieres cambiar en la vista previa (título, párrafo o botón).
  2. Se activa el panel de edición a la izquierda, mostrando el contenido de ese bloque.
  3. Reemplaza el texto ahí, o directamente sobre la vista previa, según el tipo de bloque.

Tip: dentro del panel izquierdo solo necesitas la pestaña Contenido. Evita las pestañas Estilo y Avanzado — ahí se controla el diseño, no el texto, y un cambio accidental puede desordenar la página.

Video oficial de Elementor (en inglés) sobre el widget de texto:

5. Reemplazar una imagen existente

  1. Haz clic sobre la imagen que quieres cambiar.
  2. En el panel izquierdo, haz clic sobre la miniatura de la imagen actual.
  3. Sube la imagen nueva desde tu computador (pestaña Subir archivos) o elige una ya cargada en la Biblioteca de medios.
  4. Haz clic en Insertar medio o Usar imagen.

Video oficial de Elementor (en inglés) sobre el widget de imagen:

6. Guardar y publicar los cambios

  1. Abajo a la izquierda del editor verás un botón verde: Actualizar (si la página ya estaba publicada) o Publicar (si es la primera vez).
  2. Ningún cambio queda visible en el sitio hasta que hagas clic en ese botón.

7. Vista previa, deshacer un cambio y salir sin publicar

  • El ícono de ojo, arriba del editor, te muestra una vista previa antes de publicar.
  • El ícono de flecha hacia atrás, abajo a la izquierda, deshace el último cambio.
  • Para salir sin guardar nada, cierra la pestaña o haz clic en la X arriba a la izquierda y confirma “Salir sin guardar”.

Bloque 2 · Productos (WooCommerce)

Los productos se editan desde su propia pantalla — no siempre necesitas abrir Elementor para esto.

8. Editar el título y las descripciones de un producto

  1. Ve a Productos → Todos los productos y haz clic en el nombre del producto.
  2. Cambia el título en el campo grande de arriba.
  3. La descripción larga se edita en el cuadro de texto principal.
  4. La descripción corta se edita en el cuadro “Descripción corta del producto”, en la columna derecha.

Tip: la descripción corta suele mostrarse junto al precio, arriba en la ficha del producto; la larga aparece más abajo, normalmente en una pestaña o sección aparte.

Algunas recomendaciones para que el producto se posicione mejor en buscadores:

  • Título: entre 50 y 60 caracteres. Incluye la palabra clave principal de forma natural — por ejemplo, el nombre del producto más una característica clave (marca, tamaño, uso). Evita escribirlo en mayúsculas sostenidas.
  • Descripción corta: entre 150 y 300 caracteres. Resume el beneficio principal e incluye la palabra clave una vez.
  • Descripción larga: idealmente entre 300 y 600 palabras, en párrafos cortos. Repite la palabra clave 2 o 3 veces de forma natural, sin forzarla.

9. Cambiar la imagen principal y la galería de un producto

  1. En la misma pantalla de edición del producto, busca la columna derecha.
  2. Para la foto principal: haz clic en Establecer imagen del producto, sube o elige la nueva imagen, y confirma con Establecer imagen destacada.
  3. Para fotos adicionales: haz clic en Añadir imágenes a la galería del producto, selecciona o sube las fotos, y confirma con Añadir a la galería.
  4. Para quitar una imagen de la galería, pasa el mouse sobre ella y haz clic en la X que aparece.

Antes de subir la foto de un producto, revisa que cumpla con esto:

  • Formato: WebP (preferido) o JPG.
  • Proporción: cuadrada, 1:1.
  • Tamaño: 1000×1000 px es un buen equilibrio entre nitidez y peso.
  • Peso máximo: 200 KB por imagen.
  • Nombre del archivo: descriptivo antes de subirlo, por ejemplo perfume-carolina-herrera-212-100ml.jpg en vez de IMG_2481.jpg.

Tip: al subir la imagen, complétale el campo Texto alternativo en la Biblioteca de medios (nombre del producto + palabra clave). Ese texto también suma para el posicionamiento en buscadores.

Ejemplo de foto de producto: fondo blanco, formato cuadrado 1:1, producto centrado
✓ Así se ve una foto de producto correcta: fondo blanco, formato 1:1, producto centrado y bien iluminado, sin recortes ni sombras marcadas.

10. Cambiar el precio y el precio de oferta

  1. Baja hasta el bloque Datos del producto, debajo del editor de descripción.
  2. Campo Precio regular: el precio normal del producto.
  3. Campo Precio rebajado: el precio de oferta (opcional). Puedes definir fechas de inicio y término haciendo clic en Programar.

Tip: si el producto tiene variantes (talla, color, etc.), los precios se configuran variante por variante, dentro de la pestaña Variaciones.

11. Actualizar el producto

  1. Haz clic en el botón azul Actualizar, arriba a la derecha.
  2. Revisa el producto en la tienda para confirmar que los cambios se ven como esperabas.

Bloque 3 · Páginas del sitio (Inicio, Nosotros, Contacto)

El mismo procedimiento del Bloque 1, aplicado con Elementor Pro a las secciones que ya existen en tus páginas.

12. Editar el banner principal (Hero)

  1. Abre la página de Inicio con Elementor Pro (ver punto 3).
  2. Haz clic sobre la imagen de fondo del banner y reemplázala igual que en el punto 5.
  3. Haz clic sobre el título y el texto del banner y edítalos igual que en el punto 4.

Tip: si el banner tiene un botón, puedes cambiar su texto, pero evita modificar el enlace de destino sin avisarnos — un enlace mal configurado puede romper la navegación del sitio.

13. Editar los textos de una sección existente

  1. Ubica la sección que quieres actualizar en la vista previa (por ejemplo “Nuestros servicios”, “Por qué elegirnos” o testimonios).
  2. Haz clic en cada texto, ícono o imagen dentro de esa sección y edítalos uno por uno, igual que en los puntos 4 y 5.

Importante: esta guía cubre solo el contenido. No arrastres, elimines ni dupliques bloques o secciones — eso cambia la estructura de la página y puede afectar el diseño en otras partes del sitio.

14. Actualizar los datos de contacto en el footer

  1. El pie de página (footer) suele repetirse igual en todas las páginas del sitio, porque viene de una plantilla global.
  2. Si al hacer clic sobre él con Elementor Pro no puedes editarlo directamente, es porque pertenece al Theme Builder — en ese caso, escríbenos por WhatsApp y lo actualizamos nosotros, ya que un cambio mal hecho ahí afecta todo el sitio a la vez.

Bloque 4 · Buenas prácticas

Dos hábitos simples que evitan la mayoría de los problemas.

15. Tamaño y peso recomendado de imágenes de banners y secciones

Para fotos de producto, usa los valores del punto 9. Para banners y otras imágenes del sitio:

  • Comprime la imagen antes de subirla (herramientas gratuitas como TinyPNG o Squoosh).
  • Formato: WebP (preferido) o JPG.
  • Banner o Hero: horizontal, entre 1600 y 2000 px de ancho.
  • Peso recomendado: menos de 500 KB por imagen, para que el sitio cargue rápido.

16. Qué hacer si algo se ve raro después de guardar

  1. Refresca la página con Ctrl+F5 (Windows) o Cmd+Shift+R (Mac) para limpiar la caché del navegador.
  2. Si el sitio usa un plugin de caché, puede ser necesario vaciarla desde el panel de WordPress.
  3. Si el problema persiste, escríbenos por WhatsApp con una captura de pantalla antes de seguir haciendo cambios.

Recursos oficiales

Elementor y WooCommerce dieron de baja sus centros de ayuda en español (las versiones en español ya no están disponibles), así que estos enlaces van a la documentación oficial en inglés — verificada y siempre actualizada:

Con esto puedes mantener tu tienda al día — textos, precios, fotos de producto y las secciones principales del sitio — sin depender de nosotros para cada cambio pequeño. Para todo lo que implique estructura nueva, integraciones o algo que no aparezca aquí, escríbenos por WhatsApp y lo vemos juntos.

WhatsApp: +56 9 4002 8305