First impressions matter when it comes to order documents like invoices, packing slips, and credit notes. Customizing these documents allows WooCommerce store owners to align them with their brand identity, enhance professionalism, and improve readability. With WebToffee’s Customizer for WooCommerce PDF Invoices add-on, you can easily tailor the layout and appearance of your store’s documents to match your preferences. Whether adjusting padding, tweaking background colors, or applying branded borders, the Customizer offers a user-friendly interface to make these changes effortlessly.
Prerequisites
- Install and activate the WooCommerce PDF Invoices, Packing Slips, and Credit Notes add-on (To customize invoices, packing slips, and credit notes).
- Install and activate the Customizer for WooCommerce PDF Invoices add-on.
Changing Page Settings Using Customizer
Changing the page settings includes customizing the document’s background padding, background color, text size, line spacing, text color, border type, and border color.
Steps to change the page settings:
1. Select the document you wish to customize
- Head to Invoice/Packing from your WordPress dashboard.
- Click on the document you wish to customize (eg, invoice, packing slip, or credit note).
2. Head to the Customize page
- Click on the Customize tab at the top.
3. Open the Page tab
- Click on the Page tab from the Editor Pane.
4. Customize the Page Properties
Within the Page tab, store owners can customize the background and border settings of the document.
Changing the background settings
Let’s change the default background settings with custom values by changing the padding value from 30px to 60px, the margin value from 0 to 10px, and the background color from white to yellow. To add separate padding and margin values for each side of the document, uncheck the All sides checkbox. The changes are visible in the preview pane as you edit.
Changing the border settings
Let’s change the border style to solid, the border width to 10px, the border color to red, and the border-radius to 20px. The changes are immediately visible in the preview pane on the left.
5. Save the Settings
- Click on Save and activate to save and apply the template.
The image below shows a sample WooCommerce invoice with the new custom page layout.
