CSS tips with the PDF Customizer

Table of Contents

CSS is the language that controls the appearance of a PDF document.

Requirement #


How to enter CSS using the PDF Customizer #

Path: WooCommerce > PDF Invoices > Customizer > Custom Styles.

CSS styling can be added without the need for WordPress hooks, at the path provided above..

Edit column width #

Path: WooCommerce > PDF Invoices > Customizer.

– Click on any of the customizer columns to reveal their options:

– Once the column is clicked then expanded, look for the ‘Style‘ field.

– In this ‘Style‘ field, enter:

width: 10%;

Note:

  • Enter the numeric value that suits your needs.
  • All the widths must sum up to 100% if percentage is the unit being used. If the sum is over 100%, some columns may overflow their container, making the document section look uneven. If the sum is less than 100%, then the table will not use all the space available to it,

Finally, make sure that the dropdown after the styling textbox is set to ‘Apply style to entire column‘ or ‘Apply to column header‘:

Remember to save your settings.

Default width of Product header on PDF (shown with red line):


After applying CSS styling:

Edit the order details table color #

CSS styling example:

.order-details thead th {
  background: #eee;
  color: black;
  border: solid #ddd;
  border-width: 2px 0;
}

Explanation:

  • The background color is set on line 2:
    background: #eee;
  • The text color is set on line 3:
    color: black;

Change ‘#eee‘ or ‘black‘ to the desired values like ‘red’, ‘blue’, ‘#9ae’, etc.

Note on color values:

  • “ddd” = very light grey
  • “eee” = very very light grey

In order to understand color values that look like “#eee” (super light grey), please see: HTML Color Codes. This will quickly help you find your color codes, without you needing to fully understand them.

Default appearance:


Default, black order details table header

After applying css styling:

light-grey-order-details.png
Light grey order details table header

Edit the document margin #

CSS styling example:

@page {
  margin-left: 0.5cm;
  margin-right: 0.5cm;
  margin-top: 0.5cm;
}

Explanation:

  • Line 2 set the left margin.
  • Line 3 sets the right margin.
  • Line 4 sets the top margin.
  • Change the ‘0.5cm‘ to your desired length.
  • ‘mm’ could be used as the unit instead of cm.

Default appearance:

After applying CSS styling:

Advanced #

CSS selectors #

This image below uses color-coding in order to show which areas on our documents are being affected by a particular CSS class.



Payment method font size example #

From the ‘Available CSS classes‘ table above, we can find the CSS selectors of various elements to target.
The payment method’s selector is tr.payment-method.
Therefore, to manipulate the font-size of the payment method would be:

tr.payment-method {
    font-size: 9pt;
}
What are your Feelings