Change Only Font Size via functions.php?

Hello @rigwald

Do you want to change the font size in any particular place or the overall size? I’m asking this because the font size can differ from element to element.

Let me know.

I haven’t looked carefully at the elements. When I did a test run, I saw the top of the slip (“Packing Slip”, business address, shipping address, and order details) being to large for the columns and forcing the items onto a second label. I figured I’d have to play around with the sizing, but if I can do each element separately, that would work. If I need to do it all at once, I’d make do. I’m not a programmer, but I am comfortable tweaking code, when I understand what needs tweaking.

Hi @rigwald

You can append &output=html to the PDF URL and inspect the HTML for the required CSS classes. Then you just need to follow this documentation page: Using custom styles

Thank you. I will see what I can do.

Is there a way to clear out an already generated packing slip to see the changes? It appears to simply reload the original one for the order. I have a fake order that I’m playing with.

Hi @rigwald

The CSS modifications are not cached/saved so they should be reflected instantaneously.

Perhaps I have just entered the info incorrectly into the functions.php. Here is what I put as just a first test run:

/* Change Packing Slip Font / Appearance */

add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles', 10, 2 );
function wpo_wcpdf_custom_styles ( $document_type, $document ) {
    ?>
	.header
		font-size: 5pt;
	.shop-info
		font-size: 5pt;
	.order-data-addresses
		font-size: 5pt;
	.order-details
		font-size: 5pt ;

    }
    <?php
}

• This reply was modified 4 years, 7 months ago by rigwald.

Hi @rigwald

No, that shouldn’t work. Try this instead:

add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles', 10, 2 );
function wpo_wcpdf_custom_styles ( $document_type, $document ) {
    ?>
	.header {
		font-size: 5pt;
	}
	.shop-info {
		font-size: 5pt;
	}
	.order-data-addresses {
		font-size: 5pt;
	}
	.order-details {
		font-size: 5pt;
	}
    <?php
}

Thank you. I got it working. ??

You’re welcome ??

Have a nice day!