# Crear una tienda WooCommerce con WordPress URL: https://canvaswp.com/es/guides/start-a-woocommerce-store-with-wordpress/ Updated: 2026-11-03 Guía WooCommerce se encarga de la tienda: los productos, los pedidos, los impuestos y los pagos. Lo que no hace es que todo eso luzca como su marca. Esta guía crea las cuatro pantallas que realmente ve un comprador, usando bloques en el editor que WordPress ya incluye. Publicado el 5 de septiembre de 2026 Actualizado el 3 de noviembre de 2026 Escrito por el equipo de Canvas en SemiColonWeb ## Paso 1: Instalar WooCommerce WooCommerce es un plugin gratuito del directorio de plugins de WordPress, y se encarga de todo lo comercial: los datos de productos, el inventario, los pedidos, las reglas de impuestos, las zonas de envío y las pasarelas de pago. Canvas nunca reemplaza esa capa, por eso sus otras extensiones de WooCommerce siguen funcionando. ### Dos formas de instalarlo - **Deje que el asistente de configuración lo haga.** Elija un demo de tienda durante la configuración y el paso de plugins instala y activa WooCommerce antes de que se ejecute la importación, porque una tienda necesita un plugin de tienda. - **Instálelo usted mismo** desde Complementos, Añadir nuevo, y ejecute la incorporación de WooCommerce. Haga esto si va a añadir una tienda a un sitio que ya administra. De cualquier forma, recorra una vez la configuración de WooCommerce y responda sus preguntas sobre su país, su moneda y lo que vende. Esas respuestas determinan más adelante los impuestos y los envíos, y corregirlas después es muy tedioso. Configure un servicio de envío de correo electrónico antes de aceptar un pedido real. Las confirmaciones de pedido salen de WordPress a través de su servidor de forma predeterminada, y una tienda cuyos recibos acaban en el spam genera tickets de soporte que no podrá responder. ## Paso 2: Comience con un demo de tienda o con un catálogo vacío Aquí tiene que elegir, y vale la pena dedicarle diez minutos de reflexión. ### Importar una demo de tienda 21 de las 88 demos son tiendas WooCommerce funcionales. Importar una de ellas le da productos, categorías, atributos, muestras de color, una tienda diseñada, una página de producto diseñada, un carrito y el proceso de compra, todo en su lugar y editable. Es la forma más rápida de ver cómo encajan las piezas, y puede revertir toda la importación si decide no usarla. ### Construya sobre su propio catálogo Si ya vende productos y tiene artículos en la base de datos, elija el alcance solo de páginas, en su sitio web existente. Se importan las páginas de los Demos y los registros que usan, sin su configuración, sus menús ni su página de inicio, y su catálogo permanece exactamente donde está. En ambos casos, las páginas de WooCommerce de su sitio se adoptan, de modo que solo hay una tienda, un carrito, una página de pago y una cuenta. [Cómo funciona la importación de demos en detalle](https://canvaswp.com/es/guides/import-a-wordpress-demo-website/) [Los nueve demos de tienda de WooCommerce](https://canvaswp.com/es/wordpress-themes/ecommerce/) ## Paso 3: Agregue sus primeros productos Los productos son registros de WooCommerce, que se añaden en Productos en el panel de administración de WordPress, y esta parte es deliberadamente sencilla. Dedique el tiempo aquí y no al diseño, porque una buena página de producto depende sobre todo de buenos datos de producto. - **Una fotografía clara por producto,** tomada de la misma forma para cada artículo. Una cuadrícula de catálogo parece diseñada cuando las formas coinciden, e improvisada cuando no. - **Una descripción breve que responda a la pregunta que realmente se hace el comprador.** Tamaño, material, cuánto tarda en llegar y qué sucede si no le queda bien. - **Categorías que coinciden con cómo compra la gente,** no con cómo está organizado su almacén. - **Atributos para todo lo variable.** Color, tamaño, acabado. Asigne a los términos de color un valor de color real en el panel de administración, ya que eso es lo que luego convierte un menú desplegable en muestras de color. - **Existencias, peso y dimensiones** si envía productos físicos. Las reglas de envío los leen. Añada tres productos antes de diseñar cualquier cosa. Un diseño evaluado con un solo elemento de muestra es un diseño que tendrá que rehacer. ## Paso 4: Diseñe la página de la tienda La tienda es un catálogo, y su objetivo es llevar a alguien a una página de producto con rapidez. Canvas le ofrece bloques para ello, donde la respuesta habitual es una configuración del tema con tres opciones de diseño. ### Los bloques Una cuadrícula de productos muestra resultados de una categoría, una etiqueta, una búsqueda o una lista seleccionada a mano. Un carrusel de productos hace lo mismo en una fila para la página de inicio. Las tarjetas de categorías de productos llevan a los visitantes a una sección. Un filtro de precios permite a los compradores reducir un catálogo extenso. Cada uno es un bloque con un panel de ajustes, de modo que el número de columnas, el origen y el orden son controles, no código. ### La plantilla de base La tienda en sí es una plantilla de bloques que puede abrir en el Editor del sitio. Configúrela a ancho completo, con una barra lateral izquierda, una derecha o ambas, según si los filtros y las categorías aportan valor a su catálogo. Hay 18 plantillas de tienda en total, que cubren la tienda, la página de producto, los archivos, el carrito y el proceso de pago. ### Los valores predeterminados de toda la tienda Opciones del tema reúne 39 ajustes de la tienda distribuidos en 5 pestañas: el catálogo, la página del producto, el carrito y la compra, el mini carrito del encabezado y el modo catálogo. Ahí se configuran la cantidad de productos por página, la paginación, la forma de la imagen del producto, si las imágenes adicionales de la galería aparecen al pasar el cursor y lo que ofrece la superposición que se muestra al pasar el cursor. Un bloque que defina uno de estos valores por su cuenta sigue prevaleciendo en la página donde se encuentre. **Opciones del tema, Tienda.** Valores predeterminados para toda la tienda, que cualquier bloque con configuración propia sustituye. ## Paso 5: Diseñe la página de producto Esta es la página que vende, así que merece algo más que la distribución predeterminada que usan todas las tiendas en internet. ### Constrúyalo a partir de piezas Cada parte de una página de producto es un bloque: la galería de imágenes, el precio, la calificación con estrellas, los metadatos, la descripción corta, los selectores de variaciones, el botón de añadir al carrito, las pestañas, la fila de compartir y los productos relacionados. Muévalos, cambie su estilo o quite uno por completo, y la página seguirá funcionando porque cada bloque solicita a WooCommerce sus propios datos. ### O empiece desde un diseño incluido Si prefiere no empezar desde piezas, elija uno de los diseños de producto individual incluidos y reorganice los elementos: el predeterminado, un resumen fijo que sigue a la galería al desplazarse, una lista, un diseño con protagonismo del color, un diseño de tienda, dos diseños de galería con enlaces personalizados y variantes con una barra lateral a la izquierda, una a la derecha o dos barras laterales. Asigne un diseño a cada producto desde el editor o defina el predeterminado de la tienda en Opciones del tema. ### Qué colocar en la parte superior visible La fotografía, el nombre, el precio, la selección de variantes y el botón Añadir al carrito. Todo lo demás, incluida la descripción que casi nadie lee, puede ir debajo. Compruébelo en un teléfono antes de decidir que no le convence. ## Paso 6: El carrito y el pago Estas dos pantallas son donde se pierde el dinero y, en la mayoría de los temas, son las dos pantallas que no se pueden tocar. Aquí, en cambio, son bloques como cualquier otro elemento. ### El carrito Una tabla del carrito para el contenido, un bloque de totales del carrito para las cifras y un bloque de venta cruzada para el producto que un comprador podría añadir de verdad. Sea breve y haga que el botón resalte. El error más común en el carrito es un muro de contenido promocional entre los totales y el botón de finalizar compra. ### El checkout Un bloque de facturación para el formulario, un bloque de revisión del pedido para lo que se está comprando, y un bloque de avisos para los mensajes que informan al cliente de lo ocurrido. WooCommerce sigue gestionando el pedido, el pago y los correos electrónicos; usted decide cómo se presenta la pantalla. ### Reglas que se pagan solas - Solicite solo los campos que realmente requiere el envío. - Muestre el costo total, incluido el envío, antes del paso de pago. - Indique en días y con palabras cuándo llegará el pedido. - Coloque su política de devoluciones donde la verá un comprador primerizo y nervioso. ## Paso 7: Selectores de variantes, añadir al carrito y estilos de tarjeta Tres comportamientos de la tienda que suelen requerir un plugin cada uno están incluidos en la integración. - **Muestras de color para atributos.** Asigne un color al término de un atributo de producto en el administrador y los productos variables mostrarán puntos de color o botones tipo píldora en lugar de un desplegable. Así, el comprador elige una variación al verla, algo especialmente útil en un teléfono. - **Añadir al carrito sin recargar la página.** Al añadir un producto desde una cuadrícula, un carrusel o una superposición de tarjeta, el carrito se actualiza en su lugar, así el comprador permanece en la página que estaba viendo y el carrito del encabezado sigue contando los productos. - **Estilos de tarjetas de producto.** Fije todas las imágenes del catálogo a una misma forma para que la cuadrícula quede alineada, elija si las imágenes adicionales de la galería aparecen al pasar el cursor o se muestran como presentación, y decida qué ofrece la superposición al pasar el cursor: comprar, vista rápida o ambas. Las tres son ajustes. Ninguna requiere un fragmento de código, un tema hijo ni un segundo plugin, y cada una puede desactivarse si prefiere un comportamiento más simple. Algunos temas venden esta capa por separado. OceanWP incluye una integración gratuita con WooCommerce y ofrece Ocean eCommerce Pro como producto aparte, y [cómo se compara Canvas con OceanWP](https://canvaswp.com/es/compare/oceanwp/) detalla lo que incluye cada plan para una tienda. ## Paso 8: Pagos, velocidad y luego un pedido de prueba Primero el dinero, el diseño al final. Repase esto antes de anunciar que la tienda está abierta. ### La configuración comercial, con WooCommerce - Conecte las pasarelas de pago que piensa usar y complete su verificación, que suele tardar más de lo esperado. - Configure las reglas de impuestos y las zonas de envío para los lugares a los que realmente envía. - Redacte las páginas de reembolsos, devoluciones y envíos, y enlácelas desde el pie de página y el proceso de pago. ### Velocidad en Canvas WooCommerce carga scripts y hojas de estilo en todas las páginas de un sitio web, incluidas las que no venden nada. Cinco interruptores revierten eso: quitar el JavaScript de WooCommerce en las páginas que no muestran contenido de la tienda, desactivar el seguimiento de atribución de pedidos, evitar que el script de fragmentos del carrito consulte el servidor en cada página que muestre un carrito, y eliminar las bibliotecas de seguridad de contraseñas y de selección fuera de las páginas de cuenta y de pago. Forman parte de 35 optimizaciones, y todas se pueden revertir. ### Después, realice un pedido real Compre algo en su propia tienda, desde un teléfono, con datos móviles. Pague con una tarjeta real si su pasarela de pago admite un reembolso de prueba. Verifique que llegue el correo de confirmación, que el pedido aparezca en el administrador y luego reembolse el pago usted mismo. Todo lo que encuentre en esos cinco minutos es algo que un cliente habría encontrado en su lugar. **Rendimiento, pestaña WooCommerce.** Cinco interruptores reversibles para los scripts que una página nunca usa. ## Fuentes Cuando esta guía describe algo ajeno a Canvas en sí, estas son las páginas oficiales que lo documentan. - [Instalar y desinstalar WooCommerce](https://woocommerce.com/document/installing-uninstalling-woocommerce/) woocommerce.com · WooCommerce es gratuito, se instala desde la pantalla de Plugins y abre su propio asistente de configuración - [Páginas de WooCommerce](https://woocommerce.com/document/woocommerce-pages/) woocommerce.com · WooCommerce designa una página para cada uno de estos elementos: la tienda, el carrito, la finalización de compra y la cuenta - [Configurar los impuestos en WooCommerce](https://woocommerce.com/document/setting-up-taxes-in-woocommerce/) woocommerce.com · Las tasas de impuestos se configuran en los ajustes de WooCommerce - [Configurar zonas de envío](https://woocommerce.com/document/setting-up-shipping-zones/) woocommerce.com · Una zona de envío es un área geográfica a la que envía sus productos. - [Seguimiento de atribución de pedidos](https://woocommerce.com/document/order-attribution-tracking/) woocommerce.com · Qué registra la atribución de pedidos y la opción de WooCommerce que la desactiva Qué hacer a continuación ## Próximos pasos Dos guías sobre el resto del sitio en torno a la tienda y todas las funciones de la tienda en detalle. [Guía **Crear un sitio web de restaurante** Una importación de principio a fin en un proyecto real, con las ediciones que siguen.](https://canvaswp.com/es/guides/build-a-restaurant-website-with-wordpress/) [Guía **Crear sitios web para clientes** Una sola licencia para todos sus clientes: claves, copias de staging y cómo es la entrega al cliente.](https://canvaswp.com/es/guides/build-client-websites-with-wordpress/) [Producto **Canvas y WooCommerce** 24 bloques de tienda y 18 plantillas de tienda.](https://canvaswp.com/es/woocommerce/) Preguntas ## Preguntas frecuentes [Las preguntas frecuentes completas](https://canvaswp.com/es/faq/) responden el resto, y la [documentación](https://docs.canvaswp.com/) cubre cada ajuste en detalle. **¿Todavía necesito el plugin de WooCommerce?** Sí, una tienda Canvas sigue funcionando con el plugin WooCommerce. Canvas añade bloques, plantillas y opciones sobre él y deja el plugin a cargo, de modo que los pedidos, productos, impuestos, envíos y pagos sigan donde sus otras extensiones esperan encontrarlos. Si parte de una demo de tienda, el Asistente de configuración instala y activa WooCommerce antes de ejecutar la importación. **¿Los bloques de tienda son una compra adicional?** No, los bloques de tienda de Canvas vienen incluidos con todos los planes sin costo adicional. Todos los 24 bloques de tienda son bloques premium, y cada plan incluye todos los bloques premium, junto con todas las 18 plantillas de tienda y todos los 21 demos de tienda. No hay ningún nivel de comercio electrónico ni complemento de tienda. **¿Puedo combinar estos con los bloques de WooCommerce?** Sí, puede combinarlos libremente: los bloques de tienda de Canvas son bloques registrados normales, así que conviven con los bloques de WooCommerce y los bloques básicos de WordPress en la misma plantilla y en la misma página. Reemplace una pieza a la vez y deje intacto el resto del diseño. **¿Importar un demo de tienda me dará dos páginas de pago?** No, al importar un demo de tienda de Canvas queda un único proceso de pago. El importador encuentra las páginas de tienda, carrito, pago y cuenta que tiene su sitio y dirige a ellas los menús y enlaces del demo, así que conserva una de cada una. Sus productos y pedidos existentes no se modifican, y toda la importación se puede revertir.