PDF Customizer Handleiding #
Facturen en creditnota’s aanpassen in Autorespond
De facturen en creditnota’s die Autorespond maakt, kun je zelf vormgeven. De meeste aanpassingen doe je zonder technische kennis. Voor ingewikkeldere wijzigingen gebruik je CSS, maar ook dat leggen we stap voor stap uit.
Inhoud #
- Kolommen breder of smaller maken (meest gevraagd)
- Hoe voeg je CSS toe
- Datums en bedragen op één regel houden
- Totaaltabel aanpassen
- Teksten en labels wijzigen
- Complete voorbeelden
- Overzicht van alle codes (CSS-selectors)
1. Kolommen breder of smaller maken #
Dit is de meest gevraagde aanpassing. Soms is een kolom te smal en loopt de tekst over twee regels. Of juist te breed, waardoor andere kolommen worden geplet.
Stap 1: Open de customizer #
Ga naar Shoppingcart > PDF Facturen en klik op de tab Customizer. Kies bovenaan of je de factuur of de creditnota wilt aanpassen.
Stap 2: Klik op een kolom #
Klik in de preview op de kolom die je wilt aanpassen. Er verschijnt een paneel met opties.
Stap 3: Voer de breedte in #
Zoek het veld Style. Type hier de breedte in, bijvoorbeeld:
width: 50%;Zet de dropdown eronder op:
- Apply style to entire column — voor de hele kolom
- Apply to column header — alleen voor de titel bovenaan
Stap 4: Controleer in de preview #
De wijziging zie je meteen in het scherm. Past het? Sla dan op.
Belangrijk: de som moet 100% zijn #
Als je meerdere kolommen naast elkaar hebt, moeten de breedtes samen 100% zijn. Bij vier kolommen bijvoorbeeld:
| Kolom | Breedte |
|---|---|
| Productnaam | 60% |
| Aantal | 10% |
| Prijs per stuk | 15% |
| Totaal | 15% |
| Som | 100% |
Is de som meer dan 100%? Dan loopt de tabel over de rand. Is de som minder? Dan blijft er lege ruimte over.
2. Hoe voeg je CSS toe #
Voor sommige aanpassingen heb je CSS nodig. Dit is een klein stukje code dat je plakt in de customizer.
Stap 1: Scroll naar beneden #
In de customizer scroll je helemaal naar onder. Daar vind je het veld Aangepaste CSS.
Stap 2: Plak de code #
Kopieer een van de voorbeelden uit deze handleiding en plak het in het veld.
Stap 3: Sla op #
Klik op Opslaan. Controleer altijd eerst de preview of alles er goed uitziet.
3. Datums en bedragen op één regel houden #
Soms breekt een datum of prijs over twee regels omdat de kolom te smal is. Dit los je op met een stukje CSS.
Kopieer dit en plak het bij Aangepaste CSS in de customizer:
.credit-note .order-data { width: 38%; }
.credit-note .order-data table { width: 100%; }
.credit-note .order-data td:first-child { width: 50%; white-space: nowrap; }
.credit-note .order-data td:last-child { width: 50%; text-align: right; white-space: nowrap; }Hiermee wordt de rechterkolom compacter gemaakt en blijven alle datums en prijzen op één regel staan.
Bedragen in de producttabel #
Ook in de producttabel kunnen prijzen wrappen. Dit voorkom je zo:
.price, .wc-price, .amount { white-space: nowrap; }4. Totaaltabel aanpassen #
De tabel met subtotaal, BTW en eindtotaal kun je smaller en compacter maken:
.totals-table { width: 45%; margin-left: auto; }
.totals-table td:last-child { text-align: right; white-space: nowrap; }Hiermee schuift de totaaltabel naar rechts en worden de bedragen netjes uitgelijnd.
5. Teksten en labels wijzigen #
Staat er ‘Total’ in plaats van ‘Totaal’? Of wil je een andere tekst aanpassen?
- Zoek in de customizer naar het veld met de tekst die je wilt wijzigen.
- Pas de tekst aan.
- Controleer in de live preview.
- Klik op Opslaan.
6. Complete voorbeelden #
Hieronder staan twee complete voorbeelden. Kopieer hetgeen wat je nodig hebt en plak het bij Aangepaste CSS in de customizer.
Creditnota (alles-in-een) #
.credit-note .order-data { width: 38%; }
.credit-note .order-data table { width: 100%; }
.credit-note .order-data td:first-child { width: 50%; white-space: nowrap; }
.credit-note .order-data td:last-child { width: 50%; text-align: right; white-space: nowrap; }
.wc-order-item-name { width: 60%; }
.wc-order-item-quantity { width: 10%; text-align: center; }
.wc-order-item-price { width: 15%; text-align: right; }
.wc-order-item-total { width: 15%; text-align: right; }
.price, .wc-price, .amount { white-space: nowrap; }
.totals-table { width: 45%; margin-left: auto; }
.totals-table td:last-child { text-align: right; white-space: nowrap; }Factuur (alles-in-een) #
.invoice .order-data { width: 38%; }
.invoice .order-data table { width: 100%; }
.invoice .order-data td:first-child { width: 50%; white-space: nowrap; }
.invoice .order-data td:last-child { width: 50%; text-align: right; white-space: nowrap; }
.wc-order-item-name { width: 60%; }
.wc-order-item-quantity { width: 10%; text-align: center; }
.wc-order-item-price { width: 15%; text-align: right; }
.wc-order-item-total { width: 15%; text-align: right; }
.price, .wc-price, .amount { white-space: nowrap; }
.totals-table { width: 45%; margin-left: auto; }
.totals-table td:last-child { text-align: right; white-space: nowrap; }8. Overzicht van alle codes (CSS-selectors) #
Wil je zelf aan de slag? Met onderstaande tabel weet je welke code bij welk onderdeel hoort. De selector-kaart (afbeelding) toont dit visueel.
| Code (selector) | Wat je ermee aanpast |
|---|---|
| .invoice | Alles op de factuur |
| .credit-note | Alles op de creditnota |
| .order-data | Rechterkolom (datums, nummers) |
| .order-data td:first-child | Labels in rechterkolom |
| .order-data td:last-child | Waarden in rechterkolom |
| .billing-address | Factuuradres |
| .shipping-address | Afleveradres |
| table.order-details | Productentabel |
| th.description | Kolomtitel ‘Product’ |
| th.quantity | Kolomtitel ‘Aantal’ |
| th.price | Kolomtitel ‘Prijs’ |
| .wc-order-item-name | Productnaam |
| .wc-order-item-quantity | Aantal |
| .wc-order-item-price | Prijs per stuk |
| .wc-order-item-total | Totaalprijs |
| .price, .amount | Alle prijzen |
| .totals-table | Totaaltabel (subtotaal, BTW, totaal) |
| tr.subtotal | Subtotaal regel |
| tr.tax-line | BTW regel |
| .total, .grand-total | Eindtotaal regel |
| .order-notes | Notities bij de bestelling |
| .customer-note | Klantnotities |
| .order-extra-info | Extra informatie blok |
| .shop-name | Bedrijfsnaam (rechtsboven) |
| .shop-address | Bedrijfsadres (rechtsboven) |
| #footer | Footer onderaan |
| @page | Paginamarges |
Meer informatie: Officiele documentatie
