Boxes on product info

Hi @devhelemaaldebom,

Please note that our PDF engine is not compatible with emojis and some special characters, displaying a box like that when it is not able to render a specific letter (e.g. those from Arabic script that requires a different PDF engine), specific currency symbols (we have a setting to extend compatibility with this for specific countries/regions), etc.

In brief, to fix it, you should have to remove the non-compatible characters and opening the PDF invoice again to check that the box disappeared.

Hi @yordansoares,

I have not added any emojis or special characters. It was on the invoices from the start. Could it be something in my settings?

Could you please send me the HTML output source to see if I can find where this box is coming from?

To do it, just add &output=html at the end of your invoice/packing slip URL, then Right-click > Save as…, and save it as HTML. You can use https://www.file.io/ to upload the file and share the file URL here (this service deletes the file after downloading).

I am not sure if I have saved the correct link. If not I would like to know which one else. For now this is what I have:

https://file.io/vuaDzo4xILt8

This is not the document HTML output. To get the HTML output, that is, the HTML version of the document, you would need to open a PDF invoices, and then adding &output=html?at the end of the URL.

The URL of the document HTML output should look like the following: https://example.com/wp-admin/admin-ajax.php?action=generate_wpo_wcpdf&document_type=invoice&order_ids=123&access_key=0123456789&output=html

I think I get why this happens, the customer can choose a color for the product. In the html it tries to show the color as a little block.

Here is the file: https://file.io/ARnmsIbixbGO

How could I fix this, to show it correctly or maybe to remove only the little block?

That is right, @devhelemaaldebom: The shape used to preview the color chosen by the customer is not an available character within Open Sans, the font family we used in the Simple template. Unfortunately, this font does not include a similar geometrical shape either, that we could use as replacement.

That said, you could replace that square with the “(Color preview)” text, in order to quickly see the color picked:

/**
 * PDF Invoices & Packing Slips for WooCommerce:
 * Replace color square with "(Color Preview)" on the PDF documents
 */
add_filter( 'wpo_wcpdf_get_html', function( $html, $document ) {
	$html = str_replace( '■', '(Color Preview) ', $html );
	$html = str_replace( '■', '(Color Preview) ', $html );
	return $html;
}, 10, 2);

In the case that you prefer to remove the square altogether, use this code snippet instead

/**
 * PDF Invoices & Packing Slips for WooCommerce:
 * Remove color square from the PDF documents
 */
add_filter( 'wpo_wcpdf_get_html', function( $html, $document ) {
	$html = str_replace( '■', '', $html );
	$html = str_replace( '■', '', $html );
	return $html;
}, 10, 2);

If you haven’t worked with code snippets (actions/filters) or functions.php before, read this guide: How to use filters

Let me know if any of the code snippets worked! ??

By the way, I just realized that the forum editor is converting the Unicode decimal code of the black square: I added the character rendered and its decimal code to make sure the character is being detected.

If none of the snippets above work, please check the ones I just posted here: https://pastebin.com/m4xGKu0H

Hello again,

Thank you very much for the help and time, the code in the pastebin worked perfect.

I’m glad to hear that, @devhelemaaldebom!

If you don’t mind and have the time, do you think you could leave us a review?

Thanks in advance and all the best with your store!