Los desarrolladores de WooCommerce personalizaban el checkout de forma extensa: WooCommerce Checkout Field Editor añadía campos personalizados, la lógica condicional mostraba u ocultaba campos según los productos, y los hooks de PHP personalizados como woocommerce_checkout_before_order_review inyectaban HTML arbitrario en cualquier posición del checkout. El checkout de Shopify es alojado y está mucho más restringido — pero las Checkout UI Extensions (introducidas en 2023) y la app Checkout Blocks ofrecen una capacidad de personalización significativa sin necesidad de Shopify Plus.

Personalización del checkout en WooCommerce vs Shopify

Enfoque en WooCommerce	Equivalente en Shopify	Requiere
WC Checkout Field Editor (campos personalizados)	Checkout UI Extension o app Checkout Blocks	Shopify estándar o Plus
Campo de notas de pedido	Notas de pedido nativas (activar en ajustes del tema) o Checkout Blocks	Shopify estándar
Selector de fecha de entrega	Checkout UI Extension (personalizada) o app (DeliveryDate, Zapiet)	Shopify estándar
HTML personalizado en el checkout	Solo componentes de Checkout UI Extension	Shopify estándar
Personalización completa con checkout.php	checkout.liquid (obsoleto) o Checkout UI Extensions	Shopify Plus
Pasos de checkout personalizados / multipágina	No compatible (el flujo de checkout de Shopify es fijo)	N/D
Visualización condicional de campos	Checkout UI Extension con lógica React	Shopify estándar
Order bump / upsell en el checkout	Checkout UI Extension o extensión posventa	Shopify estándar
Insignias de confianza en el checkout	Checkout Blocks o Checkout UI Extension	Shopify estándar

App Checkout Blocks (sin código, Shopify estándar)

Checkout Blocks es una app de Shopify gratuita/de pago que añade bloques al checkout sin código — la forma más rápida de replicar muchas personalizaciones de checkout de WooCommerce:

Bloques disponibles: campo de texto, área de texto, casilla de verificación, desplegable, selector de fecha, imagen, texto, banner, producto de upsell, insignia de confianza, fecha de entrega, mensaje de regalo, banner HTML personalizado.
Ubicación: se pueden colocar en el paso de dirección, paso de entrega, paso de pago y página de confirmación de pedido.
Visualización condicional: mostrar bloques según el contenido del carrito, etiquetas de producto, total del carrito, etiquetas de cliente.
Datos guardados: los valores de los campos personalizados se guardan como metafields del pedido (accesibles en el panel de administración, confirmación de pedido y fulfillment).
Plan gratuito: bloques limitados. De pago: ~$15–99/mes según las funciones necesarias.

Notas de pedido nativas

Los temas de Shopify pueden activar un campo de notas de pedido en el carrito — técnicamente no es el "checkout" pero es funcionalmente equivalente al campo de notas de pedido de WooCommerce en muchos casos:

Activar en los ajustes del tema: Dawn → Carrito → activar "Nota del pedido".
Las notas aparecen en el pedido en el panel de administración y en el correo de confirmación.
Limitación: los clientes introducen las notas en el carrito, no en el checkout — algunos abandonan antes de llegar al checkout.
Para notas específicamente en el checkout: usar el bloque "área de texto" de Checkout Blocks en el paso de entrega o de pago.

Checkout UI Extensions (enfoque para desarrolladores)

Para campos de checkout personalizados más allá de lo que ofrece Checkout Blocks, los desarrolladores crean Checkout UI Extensions usando la API de extensión React de Shopify:

// checkout-extension/src/Checkout.tsx
import {
  reactExtension,
  useApplyMetafieldsChange,
  useMetafield,
  TextField,
  BlockStack,
  Text,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.delivery-address.render-after", () => (
  <DeliveryInstructions />
));

function DeliveryInstructions() {
  const applyMetafieldsChange = useApplyMetafieldsChange();
  const currentValue = useMetafield({
    namespace: "custom",
    key: "delivery_instructions",
  });

  return (
    <BlockStack>
      <Text size="medium">Instrucciones de entrega (opcional)</Text>
      <TextField
        label="p. ej. Dejar en la puerta, llamar al timbre"
        value={currentValue?.value ?? ""}
        onChange={(value) =>
          applyMetafieldsChange({
            type: "updateMetafield",
            namespace: "custom",
            key: "delivery_instructions",
            valueType: "string",
            value,
          })
        }
      />
    </BlockStack>
  );
}

Posiciones de destino de las extensiones

purchase.checkout.contact.render-after — después del campo de email/contacto
purchase.checkout.delivery-address.render-after — después de la dirección de entrega
purchase.checkout.shipping-option-list.render-after — después de las opciones de envío
purchase.checkout.payment-method-list.render-after — después de los métodos de pago
purchase.checkout.actions.render-before — antes del botón "Completar pedido"
purchase.thank-you.block.render — en la página de gracias / confirmación de pedido

Upsells en el checkout

Upsell en el propio checkout (Checkout UI Extension)

Mostrar una recomendación de producto relevante en el checkout ("Añadir X por £Y antes de completar tu pedido").
Añadir al carrito con un solo clic desde la extensión del checkout.
Condicional: mostrar solo si el carrito no contiene el producto o si el total del carrito está por encima o por debajo de un umbral.
Apps: Checkout Blocks incluye el bloque de upsell. Apps dedicadas: ReConvert, Upsell de Zipify.

Upsell posventa (página de gracias)

Oferta que aparece en la página de confirmación del pedido tras el pago — el cliente puede añadir el producto a su pedido existente.
Sin necesidad de volver a introducir los datos de pago — se carga al mismo método de pago.
Ideal para complementos de bajo esfuerzo (producto relacionado, garantía extendida, accesorio incluido en el pack).
Apps: ReConvert, Zipify One-Click Upsell, bloque de Checkout Blocks para la página de gracias.

Selector de fecha de entrega

Las tiendas WooCommerce usaban habitualmente WooCommerce Delivery Date o Iconic WooCommerce Delivery Slots. Equivalentes en Shopify:

Zapiet Store Pickup + Delivery: Gestión completa de fecha y franja horaria de entrega. Se integra con el checkout para la selección de fechas. Admite entrega local y recogida en tienda con franjas horarias.
DeliveryDate: Selector de fecha de entrega en el checkout mediante Checkout UI Extension. Basado en bloques, con fechas bloqueadas y tiempos de preparación configurables.
Checkout Blocks: Bloque de selector de fecha disponible en el plan de pago.
Fecha guardada como metafield del pedido: accesible en el flujo de fulfillment, el correo de confirmación y los sistemas de fulfillment de terceros.

Señales de confianza en el checkout

El checkout de WooCommerce solía incluir insignias de confianza inyectadas mediante hooks. Equivalente en el checkout de Shopify:

Checkout Blocks: añadir imagen de insignia de confianza (SSL seguro, garantía de devolución del dinero, etc.) en el paso de pago.
Banner personalizado: banner "Devoluciones gratuitas en 30 días" encima del botón "Completar pedido".
El plan gratuito de Checkout Blocks incluye bloques básicos de texto e imagen — suficiente para señales de confianza.

Shopify Plus: checkout.liquid (heredado) y editor de checkout

Los comerciantes de Shopify Plus disponen de opciones adicionales:

Editor de checkout (Plus): personalización de checkout mediante arrastrar y soltar, incluidos bloques HTML personalizados, branding y más tipos de sección.
checkout.liquid (obsoleto pero aún funcional): plantilla Liquid para el checkout — control completo del HTML. En proceso de sustitución por Checkout UI Extensions + editor.
Las nuevas tiendas Plus deberían usar Checkout UI Extensions + el editor de checkout en lugar de checkout.liquid.

Lista de verificación para la migración del checkout

Auditar las personalizaciones actuales del checkout de WooCommerce: campos personalizados, notas, lógica condicional, upsells.
Mapear cada personalización de WooCommerce a su equivalente en Shopify (Checkout Blocks o UI Extension).
Instalar la app Checkout Blocks para personalizaciones sin código (notas de pedido, insignias de confianza, mensaje de regalo).
Crear Checkout UI Extension para campos personalizados no disponibles en Checkout Blocks.
Configurar el selector de fecha/franja horaria de entrega si procede (Zapiet o DeliveryDate).
Configurar el upsell posventa en la página de gracias.
Verificar que todos los valores de campos personalizados se guardan como metafields del pedido y son accesibles en el flujo de fulfillment.
Asegurarse de que la plantilla de correo de confirmación del pedido incluye los valores de los campos personalizados (configurar en los ajustes de la plantilla de correo).
Probar el flujo completo del checkout con todos los campos personalizados en móvil y escritorio.

La personalización de checkout más crítica para la mayoría de los migrantes de WooCommerce es el campo de notas de pedido o instrucciones de entrega — los clientes están acostumbrados a que esté ahí, y perderlo genera más carga de atención al cliente, ya que los compradores envían correos para añadir instrucciones manualmente. Se trata de una configuración de 10 minutos en Checkout Blocks: instalar el plan gratuito, añadir un bloque de área de texto en el paso de entrega y etiquetarlo "Instrucciones de entrega o notas del pedido". El valor del campo aparece automáticamente en el pedido en el panel de administración. No conviene sobrediseñar esta funcionalidad concreta — Checkout Blocks la resuelve de forma limpia sin ningún código.

Extensiones de checkout de Shopify tras migrar de WooCommerce (2026)