Remove extra blank space in invoice PDF
-
Hi
I need to display some extra product information in invoice PDF, So I have customized it accordingly. When I see it’s HTML structure, It works fine, but there is lot of extra white space in PDF. This space is creating just before the order detail section.
Please check the screenshot
This is my HTML structure of PDF, does not showing any extra space
https://prnt.sc/vyr0svPDF output
https://prntscr.com/vyqz8d
https://prntscr.com/vyr32eCurrently there is only one product in order, there can be more than one product.
Please let me know what can be the issue and how can I fix it?
-
Hi! The PDF library that we use to generate the document can not split table rows over multiple pages. This means that when a row does not fit between the last data before and the bottom of your page, it will go to the next page. Since your output has been heavily customized I cannot tell how big your footer is and how the order details have been structured. The ‘blank space’ is not in the HTML simply because HTML does not have a concept of paging.
Are you having the same issue with the default (uncustomized) Simple template?Your second PDF screenshot says “Product detail section is missing” but I’m not sure what you are referring to by that. Could you elaborate?
Thank for fast reply.
Default simple template is working fine.
Your second PDF screenshot says “Product detail section is missing” but I’m not sure what you are referring to by that. Could you elaborate?
Response: I mean only product detail section is breaking down the structure.I understand that if content will be more, it will show in next page. But for now content is not too much. you can see second screenshot. I think this data can be fit in the empty space in first page.
If I apply the CSS to increase the font size item meta, then I get this issue, otherwise it works fine. here’s the css.
.wc-item-meta li strong.wc-item-meta-label, .wc-item-meta li p { font-size: 16px; line-height: 1.5em; }
I need to increase the font size as per my PDF design. Please provide me some solution so I can get rid of blank space, Like start table on first page and show data which fits on first page and rest of data to display on second page… will it work?
Here is the table structure,
<table class="order-details"> <thead> <tr> <th class="product">Product</th> <th class="quantity">Quantity</th> <th class="price">Price</th> </tr> </thead> <tbody> <tr class="177"> <td class="product"> <div class="item-thumbnail"><img width="300" height="300" src="/wp-content/uploads/2020/12/GTS-Hpe_0001s_0001s_0000_-GTS-Hpe-Dark-Blue-300x300.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" title="" srcset="/wp-content/uploads/2020/12/GTS-Hpe_0001s_0001s_0000_-GTS-Hpe-Dark-Blue-300x300.png 300w, /wp-content/uploads/2020/12/GTS-Hpe_0001s_0001s_0000_-GTS-Hpe-Dark-Blue-150x150.png 150w, /wp-content/uploads/2020/12/GTS-Hpe_0001s_0001s_0000_-GTS-Hpe-Dark-Blue-100x100.png 100w" sizes="(max-width: 300px) 100vw, 300px" /></div> <span class="item-name">VESPA GTS 125 RST ABS</span> <span class="item-meta"><ul class="wc-item-meta"><li><strong class="wc-item-meta-label">Grundpreis:</strong> <p><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 0,00</span></p></li><li><strong class="wc-item-meta-label">FARBE:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">blue</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 0,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">REMUS SPORTAUSPUFF:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">REMUS RS Sportauspuff schwarz</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 999,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">WEISSWANDREIFEN VESPA GTS:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">Weisswandreifen Vespa GTS ?</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 250,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">GEPÄCKTRÄGER:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">Klappgepäckträger vorne</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 305,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">STURZBÜGEL:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">Stossstange vorne</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 129,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">WINDSCHIELDS:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">Sportscheibe Cruiser Getönt</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span> 179,00</span>)</span></span></p></li></ul></span> <dl class="meta"> </dl> </td> <td class="quantity">1</td> <td class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">CHF</span> 1.862,00</bdi></span></td> </tr> </tbody> <tfoot> </tfoot> </table>
Thank
What does your output look like with the default Simple template?
This is how it looks with simple template, my customized information not showing in this template
- This reply was modified 3 years, 11 months ago by pratibhaprajapati.
That looks fine to me. I think somewhere in your customized setup, there is not enough space for that single row + margins + footer. I don’t have all your styles but making a quick composite, it seems this may simply be an edge case.
if you reduce margins with a few mm (or remove the footer and increase page margins accordingly) it will probably fit the row on the first page too.
Since this is a custom template, that is something you will need to expirement with yourself, we can only provide limited customization support for the free version.- This reply was modified 3 years, 11 months ago by Ewout. Reason: better composite
Hi
Is it possible to create and send more than one PDF in email like invoice?
I need to display some custom data according to data submitted by user during order.Thanks
With our Professional extension you will be able to also attach the packing slip document to your WooCommerce emails. And you also get access to the proforma document, which can also be attached to one or more of the WooCommerce emails.
You can customize one of these documents to serve as your custom PDF that contains the extra data.
- This reply was modified 3 years, 11 months ago by kluver.
Hi
Is it possible to display footer on each page of PDF?
Also Can I display page number in footer?You can repeat the footer on every page by following this guide: Repeating headers and footers
You can then add the page numbers to the footer via the following code snippet:
add_filter( 'wpo_wcpdf_footer_settings_text', 'wpo_wcpdf_add_page_number_to_footer', 10, 2 ); function wpo_wcpdf_add_page_number_to_footer( $text, $document ) { $text .= '<div>Page {{PAGE_NUM}} / {{PAGE_COUNT}}</div>'; return $text; }
This code snippet should be added to the functions.php of your child theme or via a plugin like Code Snippets. If you haven’t worked with function.php or code snippets before please read this guide: How to use filters
Hi
I followed the guide and it’s working fine. Thanks.
When I check the PDF in HTML format, images look fine and high quality, But when I check the PDF view, images(logo image, product image ) are showing blur.
I tried below code, it improved the image resolution but it affected the over all content. Fonts size also decreased with this code.
$dompdf->set_option( 'dpi' , '150' );
How can I improve the image quality and whats the correct way to do this? I tried this code in plugin file.
Thanks
Good day,
I’ve the same issue with the default Simple template.
Here is the pdf : https://www.dropbox.com/sh/k62pavgfrl044ys/AADZwsgGB6W5gQvyIW8CpYICa?dl=0Thank you in advance and best regards
Kambro
- The topic ‘Remove extra blank space in invoice PDF’ is closed to new replies.