Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Titulo 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
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.
¿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:
- 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_tablepara colocar el botón justo antes de la tabla del pedido.
- 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.
- La función de captura utiliza
- 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.
- 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).
- Descargar la Captura en PNG
- Una vez que
html2canvasgenera 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.
- Una vez que
¿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:
- Abre la página de pedidos en tu tienda WooCommerce.
- Haz clic derecho sobre el elemento que deseas ocultar y selecciona «Inspeccionar» (en Chrome) o «Inspeccionar elemento» (en Firefox).
- 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:
Copiar<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:
CopiarestilosOcultos = 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-elementoen 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.
Copiar// Agregar el botón de captura de pantalla en la página de pedidos
add_action('woocommerce_order_details_before_order_table', 'agregar_boton_captura_pedido');
function agregar_boton_captura_pedido($order){
?>
<button class="capturar-pedidos woocommerce-button button btn" id="capturaPedido" style="margin-bottom: 20px;">
Capturar Detalles del Pedido
</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
document.getElementById("capturaPedido").addEventListener("click", function() {
let pedidoDiv = document.querySelector(".woocommerce-MyAccount-content");
// Ocultar elementos no deseados antes de la captura
let estilosOcultos = document.createElement("style");
estilosOcultos.innerHTML = `
.woocommerce-button,
.capturar-pedidos,
.order-actions--heading,
.order-again,
.order-actions--heading td {
display: none !important;
}
.captura-container {
padding: 30px;
background: white;
text-align: center;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.captura-header {
margin-bottom: 20px;
padding: 10px;
border-bottom: 2px solid #0071a1;
}
.captura-header h2 {
color: #0071a1;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.store-details {
text-align: left;
font-size: 14px;
line-height: 1.5;
margin-top: 10px;
}
.billing-details {
text-align: left;
font-size: 14px;
line-height: 1.5;
margin: 20px auto;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
max-width: 600px;
background-color: #f9f9f9;
}
`;
document.head.appendChild(estilosOcultos);
// Crear un div temporal con padding y aviso
let capturaContainer = document.createElement("div");
capturaContainer.classList.add("captura-container");
// Crear cabecera con aviso y detalles de la tienda
let capturaHeader = document.createElement("div");
capturaHeader.classList.add("captura-header");
// Agregar el aviso
let aviso = document.createElement("h2");
aviso.innerText = "ESTO NO ES UNA FACTURA LEGAL, SOLO UN RECIBO";
capturaHeader.appendChild(aviso);
// Agregar los datos de la tienda
let storeDetails = document.createElement("div");
storeDetails.classList.add("store-details");
let storeInfo = document.createElement("p");
storeInfo.innerHTML = `
<strong>Nombre de la Tienda</strong><br>
Dirección de la Tienda<br>
Teléfono: +34 600 000 000<br>
Email: tienda@example.com
`;
storeDetails.appendChild(storeInfo);
capturaHeader.appendChild(storeDetails);
// Agregar la cabecera al contenedor principal
capturaContainer.appendChild(capturaHeader);
// Clonar el contenido del pedido
let pedidoContent = pedidoDiv.cloneNode(true);
// Eliminar duplicación de detalles de facturación
let billingDetailsOriginal = pedidoContent.querySelector(".woocommerce-customer-details");
if (billingDetailsOriginal) {
billingDetailsOriginal.remove();
}
capturaContainer.appendChild(pedidoContent);
// Estilo para detalles de facturación
let billingDetails = document.createElement("div");
billingDetails.classList.add("billing-details");
billingDetails.innerHTML = pedidoDiv.querySelector(".woocommerce-customer-details").outerHTML;
capturaContainer.appendChild(billingDetails);
document.body.appendChild(capturaContainer);
// Asegurar que las imágenes están completamente cargadas
const images = capturaContainer.querySelectorAll("img");
let loadedImages = 0;
images.forEach((img) => {
if (img.complete) {
loadedImages++;
} else {
img.onload = () => {
loadedImages++;
if (loadedImages === images.length) {
capturarPantalla(capturaContainer, estilosOcultos);
}
};
img.onerror = () => {
loadedImages++;
if (loadedImages === images.length) {
capturarPantalla(capturaContainer, estilosOcultos);
}
};
}
});
if (loadedImages === images.length) {
capturarPantalla(capturaContainer, estilosOcultos);
}
});
function capturarPantalla(container, estilosOcultos) {
html2canvas(container, {
scrollY: 0,
useCORS: true,
}).then(canvas => {
let link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
link.download = "pedido_<?php echo $order->get_id(); ?>.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Restaurar los elementos ocultos y eliminar el contenedor temporal
document.head.removeChild(estilosOcultos);
document.body.removeChild(container);
});
}
</script>
<?php
}
Lenguaje del código: PHP (php)CopiarExplicación Técnica del Código
1. Agregar el botón de captura en la página de pedidos
Función: agregar_boton_captura_pedido
Propósito:
Añade un botón en la página de detalles del pedido dentro del área de «Mi cuenta» en WooCommerce.
Componentes:
- Hook:
woocommerce_order_details_before_order_table→ Ubica el botón antes de la tabla de productos del pedido. - HTML: Crea un botón
<button>con una clase personalizadacapturar-pedidos. - JS externo: Carga la librería
html2canvaspara tomar capturas de pantalla.
Qué hace:
Cuando el usuario haga clic en el botón, se ejecutará un script para generar la imagen del pedido.
2. Manejar el clic en el botón y preparar la captura
Evento: document.getElementById("capturaPedido").addEventListener("click", function() {...})
Propósito:
Escucha el evento de clic en el botón y ejecuta la función que prepara la captura del pedido.
Componentes:
- Seleccionar el contenedor del pedido:
let pedidoDiv = document.querySelector(".woocommerce-MyAccount-content");- Se obtiene el área donde están los detalles del pedido.
- Ocultar elementos innecesarios:
- Se crea un
<style>condisplay: none !important;para ocultar botones, enlaces y secciones no deseadas. - Se agregan estilos adicionales para mejorar la presentación de la captura.
- Se crea un
- Crear un contenedor temporal para la captura:
- Se genera un
<div class="captura-container">donde se insertarán los datos limpios. - Se añaden elementos como:
- Un aviso que indica que la captura no es una factura legal.
- Los datos de la tienda (nombre, dirección, teléfono, email).
- Una copia de los detalles del pedido.
- Los datos de facturación en un contenedor separado.
- Se genera un
- Añadir el contenedor al DOM temporalmente:
document.body.appendChild(capturaContainer);
3. Capturar la pantalla y descargar la imagen
Función: capturarPantalla(container, estilosOcultos)
Propósito:
Genera la imagen con html2canvas, la convierte a formato PNG y la descarga automáticamente.
¿Te ha resultado útil este contenido? Demuéstralo con corazones.
Total de corazones: 0