Reducir pasos en el proceso de compra online con WooCommerce

¿Por qué puede ser interesante reducir pasos en el proceso de compra online con WooCommerce? Cuando compramos online, desde que tomamos la decisión de compra, hasta que podemos finalizar el pago, cada paso adicional que haya en ese proceso, supone una importante pérdida de clientes por el camino. Por eso, para favorecer la compra en el momento en el que el cliente está decidido y en caliente, lo que tenemos que hacer es simplificar al máximo el proceso.

Una posibilidad para hacer que ese proceso sea realmente sencillo, es que al comprar el producto, directamente vayamos a una página donde está todo lo que necesitamos para terminar la compra. Y con un par de trucos, podemos juntar el carrito y finalizar compra en la misma página de manera realmente sencilla en WooCommerce y así lograr reducir pasos en el proceso de compra.

Primero, añadimos el carrito a la página de finalizar compra

Para ello puedes usar este fragmento de código compartido generosamente por AyudaWP en tu archivo functions.php o usando un plugin como code snippets.

/* Añade shortcode del carrito a la página de finalizar compra */
add_action( 'woocommerce_before_checkout_form', 'carrito_y_pago_juntos', 5 );
function carrito_y_pago_juntos() {
if ( is_wc_endpoint_url( 'order-received' ) ) return;
echo do_shortcode('[woocommerce_cart]');
}

Con esto ya hemos logrado juntar el carrito y finalizar compra en la misma página.

Ocultar mensajes de producto añadido al carrito

Yo he usado otro fragmento de código de Esther Solà para ocultar los mensajes de que el producto se ha añadido al carrito, que ya no tienen sentido:

function ocultar_wc_add_to_cart_message( $message, $product_id ) {
    return '';
};

add_filter( 'wc_add_to_cart_message', 'ocultar_wc_add_to_cart_message', 10, 2 );

Reorganizar la página de finalizar compra

Y para reorganizar la maquetación por defecto de esta página, he usado por un lado el plugin checkout manager para editar los campos y el funcionamiento de la página y un poco de CSS que he encontrado en Websparanoexpertos para recolocar los elementos.

@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; 
    }

Redirigir directamente a la página de finalizar compra

Para reducir pasos en el proceso de compra aún más, si solo te interesa vender un producto, otra posibilidad interesante es que cuando tu cliente añada el producto al carrito, directamente vaya a la página de checkout, porque le ahorras varios pasos. En la versión normal de WooCommerce, el cliente añade un producto al carrito, le sale un mensaje de que su producto se ha añadido al carrito, tiene que hacer click en el carrito para ir a él y de ahí a finalizar compra.

Si por ejemplo tienes una tienda de ropa y quieres que tu clientela siga comprando más cosas, no te interesa activar esta opción.

En ajustes de «WooCommerce/productos» puedes activar la opción

Así logramos reducir pasos en el proceso de compra y mejorar tus ventas

Así que antes teníamos dos páginas y 4 pasos: añadir producto al carrito, ir al carrito y de ahí a finalizar compra…

Y ahora en un solo click ya estamos aquí:

Y si quieres hacer una landing page…

Si lo que quieres es tener un botón de compra dentro de una landing page que automáticamente añada el producto al carrito y te lleve a esta página de finalizar compra, te cuento. Si usas Divi, solo necesitas usar un módulo de botón, personalizarlo a tu gusto y usar esta url especial:

https://tudominio/finalizar-compra/?add-to-cart=IDproducto

Puedes usar esta url en cualquier botón. La primera parte en negrita debes sustituirla por el enlace a tu página de finalizar compra. Y donde pone IDproducto tienes que sustituirlo por el número asignado a tu producto. Que puedes ver en el listado de todos tus productos al pasar el ratón sobre el producto.