fbpx

⭐ Como modificar la pagina de Checkout en WooCommerce

✅ Personalizar checkout woocommerce

Quieres tener una Pagina de Checkout en WooCommerce más Simple y ordenada?

Editar paginas woocommerce

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

Es uno de los pasos mas importantes a la hora de la venta Online y tener una pagina de Checkout simple es muy importante, por que esto puede provocar que el clientes No finalice su compra.

🔥 Así es como va a quedar la pagina checkout woocommerce

Personalizar pagina 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 pagina 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 codigo de forma facil

Opción numero 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 opcion es la mas recomendada ya que sera de forma mas ordena

Novamos a aprecias y editor de wordpress

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

Ponemos Actualizar archivos y ya esta , nada complicado verdad.

Opción numero 3 para editar la pagina checkout woocommerce

Podemos descargar el plugin que se llama Code Snippets

Con este plugin podemos agregar cualquier código a nuestras pagina 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

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

Aqui mostraremos dos forma para poder cambiar esos textos

Opción numero 1 para modificar el texto “detalles de facturación”

La primera opción y la mas 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 areas.

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 numero 2 para modificar el texto “detalles de facturación”

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 alfinal y agregamos el código

Donde sale en el codigo: ” 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

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

Cristian Benavides Diseñador Web Freelance

¿Quieres realizar una estrategia de marketing digital con tu tienda online?

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

contáctate con migo, doy clases particulares de forma presencial en Madrid y online en todo el mundo, es la facilidad hoy del internet.

Soy un pro en SEO y estrategias de redes sociales con Facebook Ads y hoy Instagram. No dudes en contactarme si quieres una clase particular.

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

2019-09-16T12:17:43+00:00 diciembre 18th, 2018|Estrategias Webs|

4 Comments

  1. Paco Valtierra julio 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 agosto 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 agosto 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 agosto 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.

Deja un comentario

1
Hola !
Tienes alguna duda o consulta?
Powered by