Pero con el nuevo widget de Pago en Elementor Pro<\/a>, ahora puede personalizar completamente su p\u00e1gina de pago utilizando la interfaz visual de Elementor y las opciones sin c\u00f3digo. Este widget funciona junto con los widgets de Carrito<\/a> y Mi Cuenta<\/a> de Elementor para ayudarle a dise\u00f1ar todas las p\u00e1ginas clave de su tienda.<\/p>\n\n En este tutorial, aprender\u00e1 c\u00f3mo utilizar el widget de Pago de Elementor<\/a> Pro para personalizar y optimizar la p\u00e1gina de pago de su tienda sin necesidad de salir de Elementor.<\/p>\n\n Luego, tambi\u00e9n compartiremos algunos consejos adicionales sobre c\u00f3mo utilizar los ganchos de acci\u00f3n de WooCommerce para personalizar a\u00fan m\u00e1s la p\u00e1gina de pago. <\/p>\n\n Si bien no necesita utilizar c\u00f3digo si est\u00e1 usando el widget de Pago de Elementor Pro, estos ganchos de acci\u00f3n pueden ser \u00fatiles si desea agregar contenido personalizado a su p\u00e1gina de pago, como un conjunto de insignias de confianza que aparecen debajo de los campos de tarjeta de cr\u00e9dito.<\/p>\n\n Si prefiere ver un tutorial en video, puede ver el video anterior sobre c\u00f3mo utilizar el widget de Pago de Elementor. <\/p>\n\n De lo contrario, contin\u00fae leyendo para obtener el tutorial completo basado en texto que es paralelo al video, as\u00ed como algunos consejos adicionales sobre el uso de ganchos de acci\u00f3n de WooCommerce que no cubrimos en el video.<\/p>\n\n La p\u00e1gina de pago de WooCommerce es la p\u00e1gina donde los compradores finalizan sus pedidos ingresando sus direcciones, detalles de contacto, informaci\u00f3n de facturaci\u00f3n, etc.<\/p>\n\n Es una p\u00e1gina esencial para cualquier tienda, por lo que es importante que la optimice para conversiones y la haga lo m\u00e1s f\u00e1cil de usar posible.<\/p>\n\n Con el widget de Pago de Elementor, puede personalizar completamente la p\u00e1gina de pago de su tienda directamente desde Elementor. Esto le ayuda a crear un dise\u00f1o coherente con el resto de su tienda y optimizar detalles clave en su p\u00e1gina.<\/p>\n\n Podr\u00e1 cambiar colores y tipograf\u00eda<\/a>, ajustar el espaciado, modificar el texto de las secciones y formularios, y m\u00e1s. Puede realizar cambios en todo el proceso de pago o habilitar opciones granulares para aplicar diferentes estilos a partes espec\u00edficas de su pago.<\/p>\n\n Por ejemplo, si desea llamar la atenci\u00f3n sobre el campo del cup\u00f3n, puede agregar colores especiales, un borde, etc., todo sin necesidad de c\u00f3digo.<\/p>\n\n Ahora, pasemos a una gu\u00eda detallada sobre c\u00f3mo puede utilizar el widget de Pago en Elementor Pro<\/a> para personalizar la p\u00e1gina de pago de su tienda.<\/p>\n\n Nuevamente, si prefiere visualizar este tutorial en formato de v\u00eddeo, puede verlo en la parte superior. Ambos tutoriales contienen la misma informaci\u00f3n.<\/p>\n\n Cuando usted crea una tienda WooCommerce<\/a>, WooCommerce autom\u00e1ticamente genera una p\u00e1gina de pago para su tienda que utiliza el c\u00f3digo corto de pago de WooCommerce<\/a>.<\/p>\n\n En este tutorial, puede utilizar esa misma p\u00e1gina por simplicidad. Sin embargo, en lugar de depender del c\u00f3digo corto de WooCommerce, usted editar\u00e1 la p\u00e1gina en Elementor y a\u00f1adir\u00e1 el widget de Pago.<\/p>\n\n Para comenzar, dir\u00edjase a la lista de P\u00e1ginas<\/strong> en su panel de control de WordPress y localice la p\u00e1gina de pago. WooCommerce la marcar\u00e1 autom\u00e1ticamente con un identificador que indica \u00abP\u00e1gina de Pago\u00bb.<\/p>\n\n Una vez que haya encontrado la p\u00e1gina correcta, haga clic en el bot\u00f3n Editar<\/strong> para abrir el editor de WordPress. <\/p>\n\n Una vez dentro del editor, haga clic en el bot\u00f3n Editar con Elementor<\/strong> para habilitar Elementor para esta p\u00e1gina y lanzar el editor de Elementor.<\/p>\n\n Al abrir la p\u00e1gina predeterminada del carrito en Elementor, deber\u00eda ver un dise\u00f1o muy simple. Los \u00fanicos elementos en la p\u00e1gina ser\u00e1n el c\u00f3digo corto [woocommerce_checkout] dentro de un widget de Editor de Texto de Elementor.<\/p>\n\n Para utilizar Elementor para controlar su p\u00e1gina de pago, primero deber\u00e1 eliminar el widget\/c\u00f3digo corto existente:<\/p>\n\n Luego, a\u00f1ada el widget de Pago de Elementor en su lugar. Una vez que a\u00f1ada el widget de Pago, ver\u00e1 una vista previa en vivo de la p\u00e1gina de pago directamente en el editor.<\/p>\n\n Nota<\/strong> – dado que el editor de Elementor le proporciona una vista previa visual que coincide perfectamente con lo que ver\u00e1n los visitantes de su sitio web, querr\u00e1 a\u00f1adir algunos art\u00edculos a su carrito de compras para poder ver c\u00f3mo se ve el proceso de pago real. Esto es todo lo que necesita hacer:<\/p>\n\n Una vez que recargue Elementor, esos art\u00edculos deber\u00edan aparecer en el resumen de pago mientras trabaja en su dise\u00f1o.<\/p>\n\n Ahora, es momento de comenzar a personalizar.<\/p>\n\n Para empezar, abra la configuraci\u00f3n del widget de Pago en la barra lateral de Elementor.<\/p>\n\n Primero, revisemos todas las configuraciones en la pesta\u00f1a de Contenido del widget.<\/p>\n\n Primero, puede utilizar el \u00e1rea de configuraci\u00f3n General<\/strong> para elegir entre un dise\u00f1o de una columna o dos columnas para su p\u00e1gina de pago.<\/p>\n\n Si elige un dise\u00f1o de dos columnas, tambi\u00e9n puede hacer que la columna derecha sea fija. Si habilita la columna derecha fija, obtiene una opci\u00f3n adicional para agregar un desplazamiento, lo que ayuda a evitar que su encabezado se superponga con la columna.<\/p>\n\n La secci\u00f3n Detalles de facturaci\u00f3n y env\u00edo<\/strong> le permite personalizar los detalles del formulario de facturaci\u00f3n y env\u00edo.<\/p>\n\n Ver\u00e1 estos campos juntos si configura que los detalles de facturaci\u00f3n y env\u00edo sean los mismos en la configuraci\u00f3n de WooCommerce. Puede habilitar esto yendo a WooCommerce \u2192 Configuraci\u00f3n \u2192 Env\u00edo<\/strong> y seleccionando Forzar el env\u00edo a la direcci\u00f3n de facturaci\u00f3n del cliente<\/strong>. De lo contrario, los ver\u00e1 por separado.<\/p>\n\n Primero, puede establecer el t\u00edtulo de la secci\u00f3n y la alineaci\u00f3n para esta secci\u00f3n.<\/p>\n\n Luego, puede abrir la configuraci\u00f3n de cada campo individual para personalizar las etiquetas y los marcadores de posici\u00f3n.<\/p>\n\n La secci\u00f3n Informaci\u00f3n adicional<\/strong> le permite personalizar esta \u00e1rea de la p\u00e1gina de pago. Por defecto, aqu\u00ed es donde los compradores pueden dejar notas especiales para el pedido, aunque podr\u00eda ver detalles adicionales dependiendo de la configuraci\u00f3n de su tienda.<\/p>\n\n Al igual que con las otras secciones de su p\u00e1gina de pago, puede personalizar la alineaci\u00f3n y las etiquetas de esta secci\u00f3n.<\/p>\n\n O bien, tambi\u00e9n tiene la opci\u00f3n de ocultar esta secci\u00f3n de la p\u00e1gina de pago, lo que podr\u00eda ser \u00fatil si los compradores no necesitan dejar notas personalizadas.<\/p>\n\n La configuraci\u00f3n de Su pedido<\/strong> le permite personalizar la parte del resumen del pedido en el proceso de pago. Si utiliza un dise\u00f1o de dos columnas, esta secci\u00f3n aparecer\u00e1 en la parte superior de la columna derecha. En un dise\u00f1o de una columna, aparecer\u00e1 debajo de los detalles de facturaci\u00f3n y env\u00edo.<\/p>\n\n La configuraci\u00f3n de Cup\u00f3n<\/strong> tambi\u00e9n le permite personalizar el t\u00edtulo y la alineaci\u00f3n de la secci\u00f3n de cupones. No obstante, tambi\u00e9n se le proporciona una opci\u00f3n para personalizar el texto del enlace para aplicar el c\u00f3digo de cup\u00f3n. Esto puede ayudarle a crear una experiencia m\u00e1s optimizada y amigable para los compradores que est\u00e1n aplicando cupones.<\/p>\n\n La configuraci\u00f3n de Pago<\/strong> le permite modificar la alineaci\u00f3n del bot\u00f3n de compra y tambi\u00e9n personalizar el mensaje de t\u00e9rminos y condiciones y el texto del enlace.<\/p>\n\n Para visualizar el mensaje de t\u00e9rminos y condiciones, ser\u00e1 necesario haber establecido la p\u00e1gina de t\u00e9rminos y condiciones en su configuraci\u00f3n de WooCommerce. Para simplificar el proceso, puede seleccionar esta p\u00e1gina sin salir de Elementor:<\/p>\n\n Si permite el pago como invitado en la configuraci\u00f3n de WooCommerce, tambi\u00e9n obtendr\u00e1 un \u00e1rea de configuraci\u00f3n adicional llamada Cliente Recurrente<\/strong> que le permite personalizar el mensaje que invita a los clientes recurrentes a iniciar sesi\u00f3n en sus cuentas existentes.<\/p>\n\n A continuaci\u00f3n, puede pasar a la pesta\u00f1a Estilo<\/strong> de la configuraci\u00f3n del widget de Pago para personalizar a\u00fan m\u00e1s el estilo y dise\u00f1o de la p\u00e1gina de pago, asegur\u00e1ndose de que coincida con el resto del dise\u00f1o de su tienda.<\/p>\n\n Aqu\u00ed est\u00e1n las opciones generales de dise\u00f1o que puede configurar en las diferentes \u00e1reas de configuraci\u00f3n…<\/p>\n\n En la configuraci\u00f3n de Secciones<\/strong>, puede controlar el estilo general de todas las diferentes partes del pago. <\/p>\n\n Por ejemplo, si cambia el color de fondo, afectar\u00e1 al fondo de todas las secciones. Tambi\u00e9n puede ajustar el borde y el espaciado seg\u00fan sea necesario.<\/p>\n\n En la configuraci\u00f3n de Typograf\u00eda<\/strong>, puede personalizar los colores y la tipograf\u00eda de la mayor\u00eda del texto en su p\u00e1gina de pago, incluyendo t\u00edtulos, t\u00edtulos secundarios, descripciones, mensajes, botones de radio, casillas de verificaci\u00f3n y m\u00e1s.<\/p>\n\n El \u00fanico aspecto de la tipograf\u00eda que no puede personalizar aqu\u00ed son sus formularios, lo cual har\u00e1 desde la siguiente secci\u00f3n.<\/p>\n\n En la configuraci\u00f3n de Formularios<\/strong>, puede controlar todo lo relacionado con los formularios y campos de formulario de su p\u00e1gina de pago, lo que afecta principalmente a los campos de facturaci\u00f3n\/env\u00edo y al formulario de cup\u00f3n.<\/p>\n\n Puede ajustar el espacio entre columnas y filas para los diversos campos del formulario. Tambi\u00e9n puede personalizar la tipograf\u00eda de las etiquetas y campos, as\u00ed como ajustar el espaciado, los bordes y los fondos. <\/p>\n\n Adem\u00e1s de eso, tambi\u00e9n tiene la opci\u00f3n de estilizar el bot\u00f3n de cup\u00f3n, al igual que cualquier otro bot\u00f3n en su sitio.<\/p>\n\n En Resumen del Pedido<\/strong>, puede controlar las filas, lo que afecta al espaciado en la lista de art\u00edculos en el carrito de un comprador.<\/p>\n\n Tambi\u00e9n puede controlar los colores y la tipograf\u00eda de los diferentes elementos del resumen. Por ejemplo, podr\u00eda utilizar una configuraci\u00f3n de tipograf\u00eda para los art\u00edculos y otra diferente para los totales del pedido.<\/p>\n\n En la configuraci\u00f3n de Bot\u00f3n de Compra<\/strong>, puede personalizar completamente el bot\u00f3n de compra, incluyendo tipograf\u00eda, colores, espaciado, bordes y m\u00e1s.<\/p>\n\n Este es probablemente el bot\u00f3n m\u00e1s importante en la p\u00e1gina de pago, por lo que querr\u00e1 asegurarse de que sea llamativo y coincida con el resto de su dise\u00f1o.<\/p>\n\n Por \u00faltimo, el elemento Personalizar<\/strong> le permite agregar controles de estilo individuales para partes espec\u00edficas de su p\u00e1gina de pago. Puede agregarlos para las siguientes \u00e1reas:<\/p>\n\n Por ejemplo, es posible que desee hacer que el resumen del pedido se destaque del resto de la p\u00e1gina de pago a\u00f1adiendo un borde personalizado. <\/p>\n\n Podr\u00eda hacer esto habilitando la configuraci\u00f3n de personalizaci\u00f3n para el \u00e1rea de resumen del pedido y configur\u00e1ndola seg\u00fan sus preferencias. <\/p>\n\n Ahora que ha terminado de personalizar la p\u00e1gina de pago para usuarios de escritorio, querr\u00e1 cambiar al modo responsivo<\/a>, para ver si necesita hacer alg\u00fan ajuste para visitantes m\u00f3viles o de tabletas<\/p>\n\n Al igual que con todos los dise\u00f1os que crea con Elementor, el dise\u00f1o de su p\u00e1gina de pago es responsivo por defecto. <\/p>\n\n No obstante, tambi\u00e9n puede utilizar los controles m\u00f3viles de Elementor para ajustar el dise\u00f1o si fuera necesario. Todo lo que necesita hacer es buscar el icono del dispositivo junto a las configuraciones que pueden ser modificadas para diferentes dispositivos.<\/p>\n\n Por ejemplo, es posible que desee ajustar ligeramente el espaciado de diferentes elementos para su dise\u00f1o m\u00f3vil.<\/p>\n\n Este \u00faltimo paso es completamente opcional, pero vale la pena se\u00f1alar que tambi\u00e9n puede controlar las asignaciones de p\u00e1ginas clave de WooCommerce desde el \u00e1rea de Configuraci\u00f3n del Sitio de Elementor<\/a>.<\/p>\n\n Esto podr\u00eda ser \u00fatil si cre\u00f3 una nueva p\u00e1gina para su p\u00e1gina de pago en lugar de utilizar la p\u00e1gina predeterminada que WooCommerce cre\u00f3.<\/p>\n\n Puede acceder a estas opciones desde la pesta\u00f1a WooCommerce<\/strong> del \u00e1rea regular de Configuraci\u00f3n del Sitio. Encontrar\u00e1 la opci\u00f3n de WooCommerce bajo la secci\u00f3n Configuraci\u00f3n<\/strong>.<\/p>\n\n Para personalizaciones adicionales en la p\u00e1gina de pago de WooCommerce, puede utilizar c\u00f3digo y aprovechar los numerosos ganchos de acci\u00f3n de pago de WooCommerce. <\/p>\n\n Esto puede ser especialmente \u00fatil si desea agregar nuevo contenido a la p\u00e1gina de pago, como insertar insignias de confianza debajo del bot\u00f3n de pago.<\/p>\n\n Lo positivo de este enfoque es que seguir\u00e1 funcionando con el widget de Pago de Elementor, lo que lo convierte en un excelente complemento para Elementor para cambios adicionales.<\/p>\n\n Los ganchos de acci\u00f3n de WordPress esencialmente le permiten usar PHP para inyectar contenido en diferentes partes de la p\u00e1gina de pago. Por ejemplo, podr\u00eda agregar un nuevo mensaje de texto, incluir una imagen (tal vez una insignia de confianza), y as\u00ed sucesivamente.<\/p>\n\n En total, WooCommerce ofrece 16 ganchos de acci\u00f3n diferentes para la p\u00e1gina de pago.<\/p>\n\n Los primeros nueve ganchos est\u00e1n siempre disponibles:<\/p>\n\n Los \u00faltimos siete ganchos pueden estar disponibles o no dependiendo de su configuraci\u00f3n de WooCommerce. Por ejemplo, si no ha habilitado el registro en la p\u00e1gina de pago, no podr\u00e1 utilizar el gancho de acci\u00f3n relacionado con el formulario de registro:<\/p>\n\n Para comprender d\u00f3nde estos ganchos agregar\u00e1n contenido a la p\u00e1gina de pago, Business Bloomer mantiene una excelente gu\u00eda visual para cada ubicaci\u00f3n<\/a>:<\/p>\n\n Para inyectar contenido con un gancho de acci\u00f3n, necesitar\u00e1 agregar un fragmento de c\u00f3digo al archivo functions.php<\/strong> de su tema hijo<\/a> o mediante un complemento como Code Snippets<\/a>. <\/p>\n\n Debido a que estar\u00e1 agregando c\u00f3digo a su sitio, recomendamos encarecidamente realizar una copia de seguridad<\/a> antes de proceder y\/o probar los cambios en un sitio de pruebas<\/a> primero.<\/p>\n\n Primero, elija la ubicaci\u00f3n del gancho donde desea agregar contenido. <\/p>\n\n Por ejemplo, supongamos que desea agregar un conjunto de insignias de confianza debajo del bot\u00f3n \u00abRealizar pedido\u00bb. Para eso, utilizar\u00eda el gancho woocommerce_review_order_after_submit<\/strong>.<\/p>\n\n Luego, agregar\u00eda un fragmento de c\u00f3digo como este:<\/p>\n\n add_action( ‘action_name’, ‘your_function_name’ );<\/p>\n\n function your_function_name() {<\/p>\n\n \/\/ Su c\u00f3digo<\/p>\n\n }<\/p>\n\n Por ejemplo, para agregar una imagen de insignia de confianza, el c\u00f3digo podr\u00eda verse as\u00ed:<\/p>\n\n add_action( ‘woocommerce_review_order_after_submit’, ‘display_trust_badges’ );<\/p>\n\n function display_trust_badges() {<\/p>\n\n echo ‘ ;}<\/p>\n\n A continuaci\u00f3n, puede ver que las insignias de confianza aparecen debajo del bot\u00f3n de realizar pedido, incluso mientras trabaja con el widget de Pago en la interfaz de Elementor:<\/p>\n\n Antes de hacer los cambios en su p\u00e1gina de pago en vivo, recomendamos encarecidamente probar todo para asegurarse de que no haya problemas. Despu\u00e9s de todo, cualquier cosa que interfiera con la p\u00e1gina de pago de su tienda tendr\u00e1 un efecto negativo directo en sus resultados finales.<\/p>\n\n Muchos m\u00e9todos de pago de WooCommerce incluyen modos de prueba que puede utilizar para enviar pedidos. Esto es cierto tanto para el plugin oficial de pasarela de Stripe<\/a> como para el plugin oficial de pasarela de PayPal<\/a>, as\u00ed como para WooCommerce Payments<\/a>. Todos los enlaces en la oraci\u00f3n anterior lo dirigir\u00e1n a la p\u00e1gina de documentaci\u00f3n adecuada para la funcionalidad de prueba de esa pasarela.<\/p>\n\n Alternativamente, tambi\u00e9n puede utilizar el plugin gratuito WC Order Test<\/a>, que a\u00f1ade una nueva pasarela de pago denominada \u00abOrder Test\u00bb. Puede configurar esta pasarela dirigi\u00e9ndose a WooCommerce \u2192 Ajustes \u2192 Pagos<\/strong>.<\/p>\n\n Una vez que haya habilitado una pasarela de pago de prueba, puede enviar algunos pedidos de prueba para asegurarse de que todos los campos del proceso de pago est\u00e9n funcionando y que ninguno de sus cambios de contenido o dise\u00f1o interfiera con el proceso de pago.<\/p>\n\n Recomendamos realizar pruebas tanto en dispositivos de escritorio como en dispositivos m\u00f3viles.<\/p>\n\n Con el widget de Pago en Elementor Pro, ahora puede personalizar completamente la p\u00e1gina de pago de WooCommerce utilizando el dise\u00f1o visual de arrastrar y soltar de Elementor.<\/p>\n\n Para la mayor\u00eda de las personas, Elementor ser\u00e1 todo lo que necesiten, ya que permite personalizar colores, tipograf\u00eda, texto, espaciado, bordes y m\u00e1s.<\/p>\n\n Si desea ir a\u00fan m\u00e1s all\u00e1 y agregar nuevo contenido a su p\u00e1gina de pago, tambi\u00e9n puede hacer uso de los ganchos de acci\u00f3n incorporados de WooCommerce, que son totalmente compatibles con el widget de Pago de Elementor.<\/p>\n\n Lo mejor de todo es que Elementor no se limita a personalizar solo la p\u00e1gina de pago.<\/p>\n\n Elementor WooCommerce Builder<\/a> tambi\u00e9n puede ayudarle a personalizar otras partes de su tienda utilizando el constructor visual de arrastrar y soltar de Elementor. Por ejemplo, tambi\u00e9n puede personalizar la p\u00e1gina del carrito de WooCommerce, la p\u00e1gina de producto individual de WooCommerce<\/a>, la p\u00e1gina Mi Cuenta de WooCommerce, y m\u00e1s.<\/p>\n\n \u00bfA\u00fan tiene preguntas sobre c\u00f3mo personalizar su p\u00e1gina de pago de WooCommerce con Elementor o ganchos de acci\u00f3n? \u00a1H\u00e1ganoslo saber en los comentarios!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Con el nuevo widget de Pago en Elementor Pro, ahora puede personalizar completamente su p\u00e1gina de pago utilizando la interfaz visual de Elementor y las opciones sin c\u00f3digo. Este widget funciona junto con los widgets de Carrito y Mi Cuenta de Elementor para ayudarle a dise\u00f1ar todas las p\u00e1ginas clave de su tienda. Aprenda c\u00f3mo utilizarlo, paso a paso.<\/p>\n","protected":false},"author":129304,"featured_media":114187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[293,369],"tags":[431],"marketing_persona":[47,51,50],"marketing_intent":[49],"class_list":["post-124568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-es","category-woocommerce-es","tag-video"],"acf":[],"yoast_head":"\nTabla de Contenidos<\/h4>\n\n\n\n
\u00bfC\u00f3mo funciona el widget de Pago de Elementor Pro?<\/h2>\n\n
C\u00f3mo personalizar la p\u00e1gina de pago de WooCommerce con Elementor<\/h2>\n\n
1. Edite la p\u00e1gina predeterminada del carrito de su tienda en Elementor<\/h3>\n\n
2. Reemplace el c\u00f3digo corto de pago de WooCommerce con el widget de Pago de Elementor<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-1-delete-checkout-shortcode-1-1024x517.jpg\")
<\/figure>\n\n3. Personalice la configuraci\u00f3n general de su p\u00e1gina de pago<\/h3>\n\n
General – Dise\u00f1o de una columna o dos columnas<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-2-column-layout-1024x516.jpg\")
<\/figure>\n\nDetalles de facturaci\u00f3n y env\u00edo<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-3-billing-shipping-fields-1024x532.jpg\")
<\/figure>\n\nInformaci\u00f3n adicional<\/h4>\n\n
Su pedido<\/h4>\n\n
Cup\u00f3n<\/h4>\n\n
Pago<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-4-terms-and-conditions-1024x601.jpg\")
<\/figure>\n\nCliente Recurrente<\/h4>\n\n
4. Personalice la Configuraci\u00f3n de Estilo de su P\u00e1gina de Pago<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-5-style-settings-1024x551.jpg\")
<\/figure>\n\nSecciones<\/h4>\n\n
Tipograf\u00eda<\/h4>\n\n
Formularios<\/h4>\n\n
Resumen del Pedido<\/h4>\n\n
Bot\u00f3n de Compra<\/h4>\n\n
Personalizar<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-6-order-summary-1024x508.jpg\")
<\/figure>\n\n5. Ajuste su Proceso de Pago para Compradores M\u00f3viles<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-7-mobile-design-1024x662.jpg\")
<\/figure>\n\n6. Ajuste las asignaciones de p\u00e1ginas de WooCommerce en la configuraci\u00f3n del sitio si es necesario<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-8-site-settings-1024x503.jpg\")
<\/figure>\n\nC\u00f3mo personalizar la p\u00e1gina de pago de WooCommerce con c\u00f3digo<\/h2>\n\n
\u00bfQu\u00e9 son los ganchos de acci\u00f3n de pago de WooCommerce?<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-code-1-hook-locations-1024x998.png\")
<\/figure>\n\nC\u00f3mo utilizar los ganchos de acci\u00f3n de pago de WooCommerce<\/h3>\n\n
![](\"trust-badges.png\"\/)
‘<\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/trust-badge-in-checkout-widget-1024x692.jpg\"){kind=icon}
<\/figure>\n\nC\u00f3mo probar su p\u00e1gina de pago de WooCommerce<\/h2>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/woocommerce-order-test-gateway-for-checkout-page-1024x800.png\")
<\/figure>\n\nComience a personalizar sus p\u00e1ginas de WooCommerce con Elementor<\/h2>\n\n