Cómo personalizar una factura en WooCommerce

Publicado: 2020-04-08

Sea lo que sea, la gente siempre queda impresionada con su apariencia. De hecho, cuando se trata de varios tipos de documentos de WooCommerce, los propietarios de las tiendas no pueden comprometer su apariencia. El dueño de la tienda puede querer incluir diferentes tipos de información en la factura dependiendo de las necesidades de su negocio. Del mismo modo, el cliente también querría recibir una factura que realmente contenga información relevante como prueba de su compra.

El complemento WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels consta de plantillas de factura predefinidas a partir de las cuales puede diseñar la factura con los datos relevantes de su elección.

[brecha]

En primer lugar, instale y active el complemento en su tienda WooCommerce. Navegue al menú Factura/Paquete desde su panel de control que lo redirigirá a la página Configuración general.

La página de configuración general consta de diferentes tipos de documentos (factura, albarán, etiqueta de envío, etiqueta de envío, etiqueta de dirección y nota de entrega) que están habilitados de forma predeterminada para los usuarios. Puede hacer clic en Configuración en un tipo de documento para configurar los ajustes respectivos. Active/desactive el tipo de documento respectivo usando la palanca.

Los valores configurados en la Configuración general, como el logotipo de la empresa, las direcciones, etc., contienen información común que se utiliza en todos los tipos de documentos. Si estos elementos están configurados en la configuración general, esos valores se completarán de forma predeterminada en todos los tipos de documentos donde corresponda. Sin embargo, se proporcionan disposiciones para anular las configuraciones generales de las configuraciones de tipos de documentos individuales.

Configuración general de la factura de WooCommerce

Configuración general de la factura de WooCommerce

Para personalizar el diseño de la factura, vaya a la configuración de la factura haciendo clic en la pestaña de configuración debajo del tipo de documento de la factura. Las opciones de personalización junto con los diseños incorporados están integrados en la pestaña Personalizar de la configuración de la factura, como se muestra a continuación.

WooCommerce Factura o embalaje-Configuración de factura- Personalizar

WooCommerce Factura o embalaje-Configuración de factura- Personalizar

Algunas de las plantillas de factura predefinidas disponibles en el complemento son clásicas, regias e imperiales, a las que se puede acceder desde la opción de cambio de diseño ubicada en la esquina superior izquierda de la ventana.

Diseños de facturas de WooCommerce

Diseños de facturas de WooCommerce

Puede seleccionar cualquier plantilla de las opciones disponibles y seguir adelante para personalizarla. La visibilidad de cada elemento de la factura se puede controlar mediante el botón de alternar incorporado en esta pestaña. Además, algunos elementos genéricos como el tamaño de fuente, el estilo, el color y otros atributos específicos de cada elemento también se pueden cambiar según sus necesidades.

Repasemos algunos atributos de personalización. Algunos elementos genéricos que se pueden encontrar con mayor frecuencia en todos los elementos son:

      • Texto: Le permite ingresar un texto personalizado para el atributo respectivo.
      • Tamaño de fuente: Le permite definir el tamaño de fuente para el atributo. Introduzca un valor numérico en términos de píxeles.
      • Estilo: Le permite seleccionar un estilo de texto. Consta de dos opciones; Normal y Negrita.
      • Color de texto: Le permite seleccionar un color de texto.

        WooCommerce Invoice-Personalizar pestaña-Atributos comunes

        WooCommerce Invoice-Personalizar pestaña-Atributos comunes

      • Alinear texto: Le permite establecer la alineación del texto.
        Contiene dos opciones; derecha e izquierda.
      • Título: Le permite establecer un título personalizado.

        WooCommerce Invoice-Personalizar pestaña-Atributos comunes-Alineación de texto y título

        WooCommerce Invoice-Personalizar pestaña-Atributos comunes-Alineación de texto y título

Otros campos de personalización específicos son:

Logotipo de la empresa: use esta opción para establecer el logotipo de la empresa específicamente para la factura. Si el logotipo ya está cargado en la configuración general, se completará aquí de forma predeterminada.

  • Logo de la compañía:
    • Pantalla : le permite agregar el logotipo de la empresa o el nombre de la empresa a la factura.
    • Ancho y alto del logotipo: le permite ajustar el ancho y el alto del logotipo en píxeles.
    • Detalles adicionales : le permite incluir texto adicional, que se colocará debajo del logotipo o el nombre de la empresa. Introduzca el texto “ninguno”, para no incluir ningún texto adicional.
    • Tamaño de fuente adicional : le permite definir el tamaño de fuente, aplicable solo para el nombre de la empresa.
    • Color del encabezado:

      WooCommerce Factura-Personalizar pestaña-Campos del logotipo de la empresa

      WooCommerce Factura-Personalizar pestaña-Campos del logotipo de la empresa

  • Número de factura:  
    • Fecha de la factura: Fecha de pedido: WooCommerce Factura-Personalizar formato de pestaña

  • Tabla de productos: esta tabla contendrá información relacionada con los productos, como el SKU del producto, el nombre del producto, la cantidad y el precio total. Puede personalizar el tamaño de fuente, la alineación del texto y el color.
  • Este campo contiene los siguientes elementos para personalizar la tabla de productos:
    • Head Color : Le permite establecer el color para el encabezado de la tabla de productos.
    • Color del texto : Le permite establecer el color del texto en la sección de encabezado de la tabla de productos.
    • SKU Align : Le permite establecer la alineación para el SKU en la tabla de productos.
      Contiene tres opciones; Derecha, Izquierda y Centro.
    • Alineación del producto: le permite establecer la alineación del producto en la tabla de productos. Las opciones son; Derecha, Izquierda y Centro.
    • Alineación de cantidad: le permite establecer la alineación para la cantidad de productos en la tabla de productos. También ofrece; Opciones Derecha, Izquierda y Centro.
    • Alineación de precios: le permite establecer la alineación del precio de los productos en la tabla de productos.
    • Alineación de precio total: le permite establecer la alineación para el precio total de los productos en la tabla de productos.
    • Color del cuerpo : le permite establecer el color del texto del cuerpo de la tabla de productos.
    • SKU : le permite establecer un texto personalizado para la columna de la tabla que indica la información del SKU.
    • Producto : Le permite establecer un texto personalizado para la columna de la tabla que indica el nombre del producto.

      WooCommerce Factura-Personalizar pestaña-Tabla de productos

      WooCommerce Factura-Personalizar pestaña-Tabla de productos

  • Vista previa : antes de activar el diseño, puede tener una vista previa de muestra de la factura del pedido reciente en formato PDF. Para obtener la vista previa de un pedido específico, ingrese el número de pedido respectivo en el campo provisto.

    WooCommerce Factura o embalaje-Configuración de factura- Personalizar-Vista previa

    WooCommerce Factura o embalaje-Configuración de factura- Personalizar-Vista previa

  • Editor de código : incluso puede cambiar al editor de código para realizar personalizaciones adicionales además de las enumeradas en el editor visual.

    WooCommerce Factura o embalaje-Configuración de factura-Personalizar-Editor de código

    WooCommerce Factura o embalaje-Configuración de factura-Personalizar-Editor de código

  • Ayuda : mientras realiza cambios a través del editor de código, sería mejor que consulte la ayuda que informa sobre marcadores de posición, clases alternativas para compatibilidad con RTL, etc., como se muestra a continuación:

    WooCommerce Factura o embalaje-Configuración de factura-Personalizar-Editor de código-Ayuda

    WooCommerce Factura o embalaje-Configuración de factura-Personalizar-Editor de código-Ayuda

Conclusión

Obtener las facturas con sus propios detalles personalizados, como el logotipo de la empresa, direcciones, etc., es definitivamente una ventaja adicional para los propietarios de las tiendas. Las plantillas integradas y las funciones del editor de código le permiten generar facturas con detalles personalizados.