🔐 Recibo del Pedido con un Click en WooCommerce

Si tienes una tienda en WooCommerce, seguro que más de una vez un cliente ha querido guardar una captura de su pedido. Claro, puede hacerlo manualmente, pero ¿qué tal si le facilitamos las cosas? Con un solo clic, podemos generar una captura limpia del pedido, eliminando elementos innecesarios como botones, cabecera, pie de página y el menú de «Mi cuenta». Además, agregaremos los datos de nuestra tienda y un aviso aclarando que se trata de un recibo informativo, no una factura legal. En este artículo, te mostraré cómo hacerlo fácilmente con un botón en la página de pedidos.

¿Necesitas facturas legales y automáticas en tu tienda WooCommerce? Click aquí.

¿Qué Hace Este Código?

El código que te comparto añade un botón en la página de pedidos de WooCommerce que, cuando se presiona, captura los detalles del pedido y los guarda como una imagen (.png).

Esto es útil para que los clientes puedan almacenar fácilmente su información sin necesidad de imprimir o copiar datos manualmente.

Cómo Funciona el Código

Voy a explicarte paso a paso lo que hace este código:

1. Añadir el Botón «Capturar Detalles del Pedido»
   • Se inserta un botón en la página de pedidos del usuario en WooCommerce.
   • Se utiliza el hook woocommerce_order_details_before_order_table para colocar el botón justo antes de la tabla del pedido.
2. Importar la Librería html2canvas
   • La función de captura utiliza html2canvas, una librería de JavaScript que permite tomar capturas de pantalla de elementos HTML.
3. Preparar la Captura de Pantalla
   • Cuando el usuario hace clic en el botón, se selecciona el contenedor donde están los detalles del pedido.
   • Se ocultan los elementos innecesarios (botón, enlaces, acciones de pedido) para que la imagen sea más limpia.
   • Se añade un mensaje que dice: «ESTO NO ES UNA FACTURA LEGAL, SOLO UN RECIBO», ideal para evitar confusiones.
4. Generar la Imagen del Pedido
   • Se clona el contenido del pedido dentro de un contenedor especial con estilos personalizados.
   • Se incluyen los detalles de la tienda (nombre, dirección, contacto).
5. Descargar la Captura en PNG
   • Una vez que html2canvas genera la imagen, se crea un enlace de descarga automática con el nombre pedido_ID.png, donde ID es el número del pedido.
   • Luego, se eliminan los estilos temporales y el contenedor usado para la captura.

¿Cómo Eliminar Otros Elementos del Pedido de la Captura?

Si en tu tienda WooCommerce tienes otros elementos personalizados en la página de pedidos y quieres ocultarlos en la captura, puedes hacerlo fácilmente identificando sus clases o IDs y agregándolos a la lista de estilos ocultos en el código.

Paso 1: Identificar el Elemento a Ocultar

Para ocultar cualquier elemento extra en la captura, primero necesitas identificar su clase o ID. Sigue estos pasos:

1. Abre la página de pedidos en tu tienda WooCommerce.
2. Haz clic derecho sobre el elemento que deseas ocultar y selecciona «Inspeccionar» (en Chrome) o «Inspeccionar elemento» (en Firefox).
3. Busca el atributo class o id del elemento en el código HTML.

Por ejemplo, si tienes un botón adicional con la clase .mi-boton-personalizado, así se vería en el inspector:

<button class="mi-boton-personalizado">Descargar PDF</button>

Paso 2: Agregar la Clase o ID al Código

Una vez identificada la clase o el ID del elemento que deseas ocultar, agrégalo a la sección de estilos ocultos en el código.

Ubicación en el código:
Dentro del bloque donde se define estilosOcultos.innerHTML, simplemente añade la nueva clase o ID con display: none !important;.

Ejemplo de cómo se ocultan más elementos personalizados:

estilosOcultos = document.createElement("style");
estilosOcultos.innerHTML = `
    .woocommerce-button,
    .capturar-pedidos,
    .order-actions--heading, 
    .order-again, 
    .order-actions--heading td,
    .mi-boton-personalizado, /* Ocultar botón personalizado */
    #elemento-que-quiero-ocultar, /* Ocultar un elemento específico por su ID */
    .otra-clase-a-ocultar /* Ocultar otro elemento por su clase */
    {
        display: none !important;
    }
`;

Nota: Si el elemento que quieres ocultar tiene un id, usa #id-del-elemento en lugar de .nombre-de-clase.

Siguiendo estos pasos puedes limpiar aún más la captura, eliminando cualquier otro botón, enlace o sección innecesaria que no quieras que aparezca en la imagen. Solo necesitas inspeccionar la página, identificar la clase o ID del elemento y agregarlo a la sección de estilos en el código.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.