Changing font sizes

  • Resolved larajdesigns09

    (@larajdesigns09)


    2 years, 10 months ago

    Hi,
    I am wondering how I can change font sizes on the pdf that gets email, without these changes being overwritten in a plugin update?

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Contributor Yordan Soares

    (@yordansoares)

    Hi @larajdesigns09,

    The best way to do this, is to use the wpo_wcpdf_custom_styles template action hook, adding all your styles inside it, like this:

    /**
 * Custom styles for PDF documents
 */
add_action( 'wpo_wcpdf_custom_styles', function ( $document_type, $document ) {
	?>
	body {
		font-size: 9pt;
	}
	<?php
}, 10, 2 );

    …and storing this code in your child theme or using the Code Snippets plugin (recommended). See Using custom styles and How to use filters to learn more.

    Thread Starter larajdesigns09

    (@larajdesigns09)

    Thanks. I’ve installed the plugin and copied in your code but keep getting a parsing error?

    Plugin Contributor Yordan Soares

    (@yordansoares)

    Did you try copying & pasting my code above, under Snippets > Add new, like this:

    Thread Starter larajdesigns09

    (@larajdesigns09)

    Thanks, that works everywhere now, except where the order detail font size is? (Size, color, etc.) Is that not in the body?

    Plugin Contributor Yordan Soares

    (@yordansoares)

    Sorry! You’re right, we have other specific CSS rules that override the global one set for <body>.

    Please replace the code snippet above for this one:

    /**
 * Custom styles for PDF documents
 */
add_action( 'wpo_wcpdf_custom_styles', function ( $document_type, $document ) {
	?>
	/* Document label */
	h1 {
		font-size: 1pt;
	}
	/* Shop name and other labels */
	h3, h4 {
    	font-size: 1pt;
	}
	/* Document body and order table  */
	body {
		font-size: 1pt;
	}
	dt, dd, dd p, .wc-item-meta {
		font-size: 1pt;
	}
	<?php
}, 10, 2 );

    I have set the default font size value for the selectors, but you can change it by your desired size.

    Let me know if now it’s works!

    • This reply was modified 2 years, 10 months ago by Yordan Soares. Reason: Include .wc-item-meta in last selector
    Thread Starter larajdesigns09

    (@larajdesigns09)

    Hmm, odd, it still doesn’t change the size, color, etc area. I am using a plugin called WooCommerce Custom Checkout Options which adds custom options, would that have something to do with it?

    Plugin Contributor Yordan Soares

    (@yordansoares)

    I don’t think so. Could you double-check that you clicked on the blue Save Changes button (the one at the left edge)? I myself accidentally clicked the second save button from left to right, which saves but disables the code snippet, so it occurs to me that maybe the same thing happened to you.

    However, just to be 100% sure, I have tested the code snippet on my end, and it’s working perfectly.

    In case the code snippet still not working for you, could you tell me which template you have selected in WooCommerce > PDF Invoices > General > Choose a template?

    Thread Starter larajdesigns09

    (@larajdesigns09)

    It says “simple” template, letter size. I double check that the code was saved and resent a test, but no luck there. Here is my invoice: https://bartowtrc.org/wp-content/uploads/2022/01/invoice-16856.pdf

    Plugin Contributor Yordan Soares

    (@yordansoares)

    Thanks for sharing the PDF document: this made me realize that is missing the selector for the item meta: .wc-item-meta!

    I just updated the code here, could you please replace the code in your site with this one and try again?

    Thread Starter larajdesigns09

    (@larajdesigns09)

    Yikes, now it’s doing this, super small:
    https://bartowtrc.org/wp-content/uploads/2022/01/invoice-16865.pdf

    Plugin Contributor Yordan Soares

    (@yordansoares)

    I have set all the font-size properties to 1 in order to test that it was working, but now I’m thinking that I should have set them back to their default values.

    Anyway, you just need to change the font-size values with your own, until you get your desired output.

    Thread Starter larajdesigns09

    (@larajdesigns09)

    Oh, sorry I missed! Working now. Is there a way to add email from order to invoice, and to remove the payment method line?

    Plugin Contributor Yordan Soares

    (@yordansoares)

    Is there a way to add email from order to invoice…

    Yes, there is! You just need to go to WooCommerce > PDF Invoices > Documents > Invoice, and check the Display email address option.

    …and to remove the payment method line?

    To remove it, you just need to add this extra CSS rule within the code snippet I sent you above:

    .payment-method {
    display: none;
}
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Changing font sizes’ is closed to new replies.