Cómo modificar los detalles del carrito en la página de pago de WooCommerce

La mayoría de ustedes sabrá que WooCommerce no permite a los clientes actualizar el carrito desde la página de pago. Lo que significa que no puede cambiar la cantidad o eliminar el producto de la página de pago. El cliente debe volver a la página del carrito, actualizar el carrito y luego volver a la página de pago. Esto da como resultado que los clientes tengan que completar toda la información requerida nuevamente. Esto es un poco frustrante para los clientes , especialmente para los usuarios invitados (que son la gran mayoría).

En esta publicación, discutiremos cómo actualizar el carrito en la página de pago de WooCommerce. Desarrollé esta característica en nuestro evento Fun Friday en la oficina. En los Fun Fridays , tratamos de pasar un día entero haciendo cosas que no están relacionadas con la actividad laboral principal de la persona.

Primero, echemos un vistazo a la tabla de detalles del carrito en la página de pago de WooCommerce:

Aquí, el cliente no puede editar la cantidad del producto o eliminarlo. Por lo tanto, queremos brindar la funcionalidad de cambiar la cantidad y eliminar el producto sin que su cliente abandone la página de pago.

Vamos a empezar

Si desea omitir esta explicación y, en cambio, desea implementar la funcionalidad en su tienda, puede descargar el complemento que he creado.

1. Realización de cambios en la interfaz de usuario en la sección del carrito de la página de pago

Necesitamos modificar la columna "Producto" en la tabla "Tu pedido". Necesitamos agregar el ícono "Eliminar" y el "Selector de cantidad" para cada artículo en el carrito.

Para lograr esto, WooCommerce ha proporcionado un filtro que le permite modificar la fila del nombre del producto de cada elemento del carrito: woocommerce_cart_item_name .

La cantidad seleccionada que se muestra en la tabla Tu pedido también se puede modificar usando otro filtro de WooCommerce: woocommerce_checkout_cart_item_quantity .

Usaremos ambos filtros y permitiremos que los clientes editen los detalles del carrito en la página de pago. Puede implementar los siguientes cambios creando un nuevo complemento.

En primer lugar, no necesitamos la cantidad que se muestra para cada artículo en la tabla Tu pedido. Entonces usaremos el filtro y devolveremos una cadena en blanco para que sobrescriba los datos de WooCommerce.

Después de esto, modificaremos la fila Nombre del producto usando el filtro woocommerce_cart_item_name y agregaremos el campo Cantidad y el icono Eliminar.

Aquí estamos usando la función is_checkout() para asegurarnos de que estamos aplicando los cambios solo en la página de pago. Lo he dividido en 3 pasos como se menciona en el fragmento de código anterior.

Paso 1: Agregar icono de eliminación
Aquí, en este paso, agregaremos el ícono Eliminar para cada artículo en el carrito. Este es el mismo ícono que se usa en el carrito de WooCommerce.

Aquí, hemos utilizado la función get_remove_url() de WooCommerce. Necesitamos pasar $cart_key para cada artículo del carrito. Entonces, la función get_remove_url() devolverá una URL única para eliminar cada artículo del carrito.

Paso 2: Agrega el nombre del producto
Como estamos modificando la fila del nombre del producto, también debemos agregar el nombre del producto en la fila junto con los nuevos campos. Obtendremos el nombre del producto del propio filtro, que se pasa como primer argumento. Es $product_title en nuestro caso.

Aumente las ventas de la tienda WooCommerce

"Es interesante ver cuánto WooCommerce Abandoned Cart Pro ha aumentado las ventas de productos de alto valor. Hubiera esperado que el complemento aumentara las ventas de productos de bajo valor que a los clientes no les importa si compran o no (por ejemplo, alimentos), pero se han sorprendido más al ver la diferencia que puede hacer para los productos que requieren una decisión de compra tan grande". - Katie Keith, directora de operaciones de Barn2 Media

Paso 3: Agregar selector de cantidad
Por último, añadiremos el selector de cantidad. Aquí usaremos la función WooCommerce woocommerce_quantity_input() .

Necesitamos dar los cuatro parámetros para la función "input_name", "input_value", "max_value", "min_value".

• input_name: Contendrá la matriz con el nombre 'carrito', en esto debe pasar la clave del artículo del carrito y la cantidad.
• input_value: Contendrá la cantidad seleccionada del producto.
• max_value: Será el número máximo de stock del producto.
• min_value: Será el valor mínimo del selector de cantidad.

Una vez que se hayan realizado todos los pasos anteriores, ahora se mostrará el botón Eliminar y el selector de cantidad en la tabla Tu pedido de la página de pago.

Aquí tenemos una condición if ( is_checkout() ) { condition. Es necesario por las razones que se mencionan a continuación.

El filtro que hemos utilizado para modificar el valor de la columna del nombre del producto (woocommerce_cart_item_name) también se llama en la página del carrito de su tienda. Entonces, para asegurarnos de que el código que escribimos no rompa la funcionalidad de la página del carrito, nos hemos asegurado de que los cambios solo se apliquen en la página de pago.

2. Actualización del carrito a través de una llamada Ajax

Agregar esta cantidad no funcionará, debemos asegurarnos de que cuando un cliente cambie la cantidad, se reflejará en el total del carrito.

Cambio de cantidad

Necesitamos la llamada de Ajax para cambiar el total del carrito. Entonces, cuando un cliente cambia la cantidad, debemos tomar una acción y cambiar el total del carrito.

Ahora, pondremos en cola el archivo "add_quantity.js" en el pie de página del sitio web y nos aseguraremos de que esté incluido cuando estemos en la página de pago.

Ahora necesitamos agregar la función en el archivo Javascript, que llamará al ajax para cambiar el total del carrito.

El javascript anterior llamará al ajax en el que pasaremos los datos del formulario de pago modificado. Pero llamará cuando hagamos clic en el icono de cantidad. Por lo tanto, contendrá el valor modificado de la cantidad.

Ahora, necesitamos agregar la función para el ajax, que cambiará el total del carrito según la cantidad modificada.

Cuando modificamos la cantidad en la página de pago, se llamará a la función anterior y cambiará el total del carrito. Hemos utilizado las funciones de WooCommerce en nuestras funciones.

Hemos utilizado las funciones "set_quantity()", "calculate_totals()", "woocommerce_cart_totals()" para modificar el total del carrito y mostrarlo en la tabla Tu pedido de la página de pago.

set_quantity() : Esta función establecerá la cantidad modificada en el carrito.

Hemos enviado los datos de la función javascript que tendrá el valor de cantidad modificado, por lo que usaremos ese valor modificado y lo configuraremos en el carrito.

calcule_totals() : Usando esta función le indicamos que nuevamente calcule el total del carrito.

woocommerce_cart_totals() : esta función se usa para mostrar el carrito modificado.

Una vez que se hayan realizado todos los cálculos anteriores, volverá al javascript desde el que llamamos a la función ajax. En la respuesta de esa función, ' activaremos' la función 'update_checkout' que, a su vez, modificará el carrito y se lo mostrará al usuario.

Necesitamos el CSS para el botón "Eliminar" de la tabla Tu pedido. Por lo tanto, debería verse como el botón de eliminación del carrito de WooCommerce. Entonces necesitamos agregar el CSS para ello. Puede agregar el CSS en el pie de página de su sitio web.

Una vez que se agrega, debemos dar el CSS al botón Eliminar en el archivo CSS. El CSS se muestra a continuación.

Entonces, estamos listos con la funcionalidad donde podemos modificar la cantidad en la página de pago de WooCommerce.

Después de implementar lo anterior, así es como se vería la tabla Tu pedido en la página de pago:

Agregará el selector de cantidad y el ícono de eliminar para cada artículo de la tabla Tu pedido de la página de pago.

Creé esto como un complemento, llamado Cantidad de cambio en el pago para WooCommerce, que se lanzó en septiembre de 2016. Se usa en más de 400 tiendas WooCommerce. Si ya está utilizando este complemento en su tienda WooCommerce, le agradecería que pudiera dedicar algo de tiempo a revisar el complemento.

Si tiene algún comentario, puede hacérmelo saber en los comentarios a continuación o puede publicarlo en el foro de soporte del complemento.