En este artículo veremos como crear una plantilla personalizada para las facturas PDF generadas por el plugin WE Invoice en una tienda WooCommerce.
Nota: Para crear tus propias facturas necesitas conocimientos en HTML y CSS. Si quieres que hagamos nosotros tu factura personalizada ponte en contacto a través de este formulario.
Crear una plantilla personalizada tiene dos pasos:
- 1. Duplicar una plantilla existente
- 2. Modificar el duplicado hasta alcanzar el diseño deseado
1. Duplicar una plantilla existente
En los ajustes del plugin WE Invoice pincha en la pestaña con tipo de documento a personalizar: Factura o Factura Rectificativa.
En el ajuste Plantilla selecciona default, inserta un nombre para la nueva plantilla y pincha en Duplicar plantilla.
El siguiente paso es acceder a la plantilla duplicada para modificarla.
2. Modificar el duplicado hasta alcanzar el diseño deseado
Al seleccionar la nueva plantilla, verás justo debajo la ruta donde se encuentra.
Usa una aplicación FTP y dentro de tu WordPress accede al siguiente directorio:
wp-content/uploads/weinvoice/template/acme/
El directorio tiene dos ficheros:
- El fichero invoice.php contiene la estructura y los datos de la factura
- El fichero invoice.css.php contiene el estilo con los colores, tamaño de fuente, etc
Fichero invoice.php
El fichero invoice.php contiene el HTML y PHP para generar la factura. Tiene tres apartados: cabecera, pie y contenido.
Cabecera de la factura
La cabecera es el apartado superior de la factura y contiene el logo, los detalles de la empresa y el título del documento. La cabecera aparece en todas las páginas. Comienza y acaba con los comentarios Start Header y End Header.
<!-- Start Header -->
<htmlpageheader name="myheader">
...
</htmlpageheader>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<!-- End Header -->
Pie de la factura
En el pie del documento se muestra el número de página. Comienza y acaba con los comentarios Start Footer y End Footer.
<!-- Start Footer -->
<htmlpagefooter name="myfooter">
<div class="pagefooter">
<?php esc_html_e( 'Page', 'weinvoice' ); ?> {PAGENO} <?php esc_html_e( 'of', 'weinvoice' ); ?> {nb}
</div>
</htmlpagefooter>
<sethtmlpagefooter name="myfooter" value="on" />
<!-- End Footer -->
Contenido de la factura
Aquí aparece la información del cliente, el número de la factura, las líneas del pedido, los totales y las observaciones. Comienza y acaba con los comentarios Start Invoice Document y End Invoice Document.
<!-- Start Invoice Document -->
<div class="invoicedocument">
...
</div>
<!-- End Invoice Document -->
Modificación y previsualización
Durante el proceso de modificación de la plantilla puedes visualizar como quedaría la factura pinchando en Previsualizar factura
Estas pruebas puedes realizarlas mientras el plugin usa la plantilla default para generar las facturas de tus clientes, y solo cuando guardes los ajustes seleccionando la nueva plantilla se generaran las facturas con el nuevo diseño.
Vídeo del proceso
Facturas rectificativas
Las Facturas y Facturas Rectificativas tienen plantillas independientes pero funcionan del mismo modo. La única diferencia es el nombre de los ficheros. La plantilla de una factura rectificativa tiene estos ficheros:
- credit.php
- credit.css.php
Servicio de generación de plantillas de WooEnvio
Cómo indicamos al principio es necesario tener conocimientos en HTML y CSS para crear plantillas personalizadas. Si quieres que lo hagamos nosotros ponte en contacto a través de este formulario. Aquí tienes un ejemplo del tipo de plantilla personalizada que podemos hacer:
