⭐ 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-04-28T13:03:03+00:00 diciembre 18th, 2018|Estrategias Webs|

Deja un comentario

1
Hola !
Tienes alguna duda o consulta?
Powered by