• Resolved pratibhaprajapati

    (@pratibhaprajapati)


    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/vyr0sv

    PDF output
    https://prntscr.com/vyqz8d
    https://prntscr.com/vyr32e

    Currently 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?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Contributor Ewout

    (@pomegranate)

    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?

    Thread Starter pratibhaprajapati

    (@pratibhaprajapati)

    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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;250,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">GEP&Auml;CKTR&Auml;GER:</strong> <p><span class="item-title-wrap"><span class="item-title-inner"><span class="item-child-title">Klappgep&auml;cktr&auml;ger vorne</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>&nbsp;305,00</span>)</span></span></p></li><li><strong class="wc-item-meta-label">STURZB&Uuml;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>&nbsp;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&ouml;nt</span></span><span class="item-child-price">(<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>&nbsp;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>&nbsp;1.862,00</bdi></span></td>
    		</tr>
    			</tbody>
    	<tfoot>
    		
    	</tfoot>
    </table>
    

    Thank

    Plugin Contributor Ewout

    (@pomegranate)

    What does your output look like with the default Simple template?

    Thread Starter pratibhaprajapati

    (@pratibhaprajapati)

    This is how it looks with simple template, my customized information not showing in this template

    https://prntscr.com/vywy1d

    Plugin Contributor Ewout

    (@pomegranate)

    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
    Thread Starter pratibhaprajapati

    (@pratibhaprajapati)

    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

    Plugin Contributor kluver

    (@kluver)

    Hi @pratibhaprajapati,

    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.
    Thread Starter pratibhaprajapati

    (@pratibhaprajapati)

    Hi

    Is it possible to display footer on each page of PDF?
    Also Can I display page number in footer?

    https://prntscr.com/wcybsd

    Plugin Contributor kluver

    (@kluver)

    Hi @pratibhaprajapati,

    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

    Thread Starter pratibhaprajapati

    (@pratibhaprajapati)

    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=0

    Thank you in advance and best regards

    Kambro

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Remove extra blank space in invoice PDF’ is closed to new replies.