fbpx

⭐ Como modificar la página de Checkout en WooCommerce

✅ Personalizar checkout woocommerce

¿Quieres tener una Página de Checkout en WooCommerce más Simple y ordenada?

Editar páginas woocommerce – Editar página finalizar compra woocommerce

Para que el usuario pueda realizar su pago de forma fácil y rápida, es importante que entienda lo que está haciendo y que no se le complique rellenar campos que están de más.

Es uno de los pasos más importantes a la hora de la venta Online y tener una página de Checkout simple es muy importante, por que esto puede provocar que el cliente No finalice su compra.

🔥 Así es como va a quedar la página checkout woocommerce

Personalizar página checkout woocommerce

detalles de facturacion woocommerce

detalles de facturacion woocommerce

Te gustaría tener una pagina de Checkout como la que vemos a continuación, donde el texto de “Detalles de facturación” fue modificado por “Datos de Envío” y vemos que “Tu pedido” esta a mano derecha en una segunda columna en un fácil acceso para la persona de poder finalización su compra.

Podemos agregar este código y tener el Checkout en dos Columnas en WooCommerce. 

Agregando este código podemos editar página checkout woocommerce

modificar css woocommerce

@media (min-width: 850px) {
 
  #customer_details,
  #order_review_heading,
  #order_review {
  width: 48%;
  }
 
  #customer_details {
  float: left;
  }
 
  #order_review_heading,
  #order_review {
  float: right;
  }
 
  #order_review_heading {
  clear: none;
  padding-top: 0;
  }
  #customer_details .col-1,
  #customer_details .col-2
  { width: 100%;
    float: none; 
    }

Donde podemos agregar este código en WordPress

Tenemos dos lugares donde podemos agregar este código de forma fácil

Opción número 1 para tener el Checkout en dos Columnas en WooCommerce

  • Nos vamos a area de Personalizar de Wodpress

  • Nos vamos a la sección de css adicional

  • Y simplemente agregamos el código que entregamos arriba

Opción numero 2 para tener el Checkout en dos Columnas en WooCommerce

Esta opción es la más recomendada ya que será de forma más ordena

Novamos a apreciar y editor de WordPress

Nos vamos a sección de Style.css y pegamos el código

Ponemos Actualizar archivos y ya esta, nada complicado verdad.

Opción número 3 para editar la página checkout woocommerce

Podemos descargar el plugin que se llama Code Snippets

Con este plugin podemos agregar cualquier código a nuestras página web sin necesidad de nada más.

Cómo cambiar cualquier textos woocommerce

¿Como podemos modificar el texto “detalles de facturación” Que nos da por defecto WooCommers ?

Cambiar textos woocommerce 2020

Hay distintas forma de podemos modificar el texto de nuestras página web y en especial esos que son agregados por defecto por WooCommers en nuestra página web.

Aquí mostraremos dos forma para poder cambiar esos textos

Vamos a personalizar campos del checkout de woocommerce

Opción número 1 para modificar el texto “detalles de facturacion woocommerce”

La primera opción y la más simple es a través de un Plugin de Traducción que se llama Loco Translate

Este plugin lo que realiza es que simplemente hace una traducción del texto y de esa forma nos da la libertad de poner lo que nosotros queremos en esa áreas.

Te dejo un video para que sepas como usar el plugin de forma correcta, pero es muy simple solo tienes que buscar la palabra que quieres modificar, en este caso “detalles de facturación” por el texto que nosotros queremos. Yo siempre recomiendo poner un texto que el usuario entienda de forma rápida.

Importante*: Dependiendo de el temas que estes utilizando en tu WordPress, este plugin puede provocar que tu web deje de funcionar de forma correcta. El mismo plugin te lo dirá así que tampoco tengas miedo de instalarlo.

Por eso mismo tenemos una segunda opción para cambiar el texto

Opción número 2 para modificar el texto “detalles de facturación”  Web design

add_filter('gettext',  'translate_text');
add_filter('ngettext',  'translate_text');
 
function translate_text($translated) {
     $translated = str_ireplace('TEXTO QUE NO QUIERO',  'TEXTO QUE SÍ QUIERO',  $translated);
     return $translated; 
}

La segunda opción es a través de código podemos agregar este codigo

Tenemos que agregar este codigo en apariencia, editor

Nos vamos a function.php

Nos vamos a al final y agregamos el código

Donde sale en el código: ” TEXTO QUE NO QUIERO” lo tenemos que modificar por “detalles de facturación” y  donde sale “TEXTO QUE SÍ QUIERO” por el texto que quieras poner que salga en esa sección

Y pues bueno aquí terminamos

Te gustaría ayudarme a seguir trayendo este tipo de contenido solo comparte este post en tus redes sociales

disenador web freelance wordpress madrid
Contactame
Escríbenos +34 685270285
¡Hola! Me presento mi Nombre es:

Cristian Benavides Diseñador Web Freelance

¿Quieres realizar mantención a tu página web o crear una página web?

Tiene dudas de como administrar tu tienda Woocommers o simplemente quieres aprender estrategias nuevas para vender más

Contáctate conmigo, doy asesorías particulares de forma online en todo el mundo, es la facilidad que tiene hoy el internet.

Soy un pro en SEO y estrategias de redes sociales con Facebook Ads y hoy Instagram. No dudes en contactarme si quieres una asesoría para mejora tu página web.

Modifica la pagina de Checkout en WooCommerce
5 (100%) 8 votes

2020-02-14T14:33:02+00:00 December 18th, 2018|Estrategias Webs|

8 Comments

  1. Paco Valtierra July 24, 2019 at 3:24 pm - Reply

    Genial…!
    Poder dejar el checkout a dos columnas es una maravilla.
    Por cierto, intento cambiar el color y tipo de fuente de la zona “tu pedido”, basicamente el resumen de producto y costo. En qode options imposible y con cósigo no tengo ni idea. Podrías echarme una mano?
    Ah…comparto este post en Twitter,..!!

  2. táctica August 6, 2019 at 10:18 pm - Reply

    Me encantó bastante la perspectiva de la nota y lo voy a compartir en mis redes.

    Fue de extrema ventaja y quería darles mi agradecimiento.

    Ya me lo he agendado en mis marcadores para mantenerlo siempre a
    mano.

  3. Webstrategy August 8, 2019 at 6:26 am - Reply

    Me encantó de sobremanera la forma de presentar de la nota y
    lo voy a referenciar en mis redes. Fue de bastante ventaja y está en mi
    agradecerles.
    Ya me lo he salvado en mis bookmarks para poseerlo siempre a mano.

  4. seo para pymes August 10, 2019 at 2:21 pm - Reply

    Me atrapó de sobremanera la presentación de el
    escrito y lo voy a referenciar en mis redes. Fue de mucha conveniencia y me gustaría agradecerles.

    Ya me lo agendé en mis bookmarks para disponerlo siempre a
    mano.

  5. Marlon September 25, 2019 at 10:11 pm - Reply

    de verdad gracias…. te aggregare en mi pos

  6. MarioDorantesB October 17, 2019 at 9:38 pm - Reply

    ¡Funciona de maravilla! ¡Muchas gracias!

  7. Tracymet November 23, 2019 at 10:23 pm - Reply

    Hola.

    Gracias por el aporte de mucha utilidad

  8. Ricardo February 13, 2020 at 7:06 pm - Reply

    Hola, lo que busco es sacar la parte que dice “tienes un cupón…” y en vez de eso poner un recuadro para insertar el cupón donde salen los montos a pagar. Sabes cómo hacerlo?? Saludos y excelente post

Leave A Comment

1
Hola !
Tienes alguna duda o consulta?
Powered by