Configuración de Checkout Woocommerce

  • Configuración de Checkout Woocommerce

    Discusión creada por Alberto Enrique Tacea Luna el 15 de octubre de 2025 en 3:14 PM

    Hola tengo una consulta para los expertos en este tema

    Estoy configurando una tienda usando woocommerce, mi consulta es en relación en relación a la confuración de la página de checkout, en lugar de utilizar el «shortcod» construí la sección con los módulos básicos que vienen con DIVi, todo bien pero cuando pasa de «Realizar pedido» a «Información final» la información se muestra en una columna pero no está centrada ¿existe alguna manera de arreglar esto? me gustaría que se mostrara centra (adjunto una captura tratando de explicarme)

    Cualquier ayuda me sería de mucha utilidad

    Jefferson Maldonado ha respondido hace 4 meses, 2 semanas 2 Miembros · 1 Respuesta
  • 1 Respuesta
  • Jefferson Maldonado

    organizador
    15 de octubre de 2025 en 4:22 PM

    ¡Hola, Alberto!

    Esto pasa porque, al no usar el checkout nativo (shortcode/módulo), cuando WooCommerce cambia al endpoint “order-received” (“Información final”) ya no respeta tu maquetación de Divi y pinta su propio contenedor, que queda alineado a la izquierda.

    Tienes dos caminos:

    1) Recomendado (estable)

    Usa el checkout nativo:

    En la página de Checkout coloca el shortcode

    (o el módulo Woo Checkout de Divi si lo tienes).

    • Mantén tus estilos alrededor (sección/fila de Divi).
    • Así Woo aplica el mismo layout también en “order-received” y no se rompe la alineación.

    2) Parche rápido (CSS para centrar la “Gracias”)

    Si quieres conservar tu diseño actual, añade este CSS (en Opciones del tema → CSS personalizado o en tu child theme):

    /* Centrar y limitar ancho del resumen de pedido (página de Gracias) */

    .woocommerce-order,

    .woocommerce-order-received .entry-content,

    .woocommerce-page.woocommerce-order-received .woocommerce {

    max-width: 900px;

    margin: 0 auto;

    }

    .woocommerce-order .woocommerce-order-overview,

    .woocommerce-order .woocommerce-column,

    .woocommerce-order address {

    width: 100%;

    }

    Con eso el bloque de “Información final” (Gracias) quedará centrado y con ancho controlado.

    Saludos.

Inicia sesión para responder.

¡Ver Nuevo Curso!