Hi @seba123,
Yes, that’s possible with some CSS, but you need to find out the target CSS classes. For now, let’s use “some-ccss-class” & “other-css-class”. Then you’ll need this code snippet:
add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_red_and_green_text', 10, 2 );
function wpo_wcpdf_red_and_green_text ( $document_type, $document ) {
?>
.some-css-class{
color: green;
font-size: 9pt;
}
.other-css-class{
color: red;
font-size: 9pt;
}
<?php
}
If you haven’t worked with code snippets (actions/filters) or functions.php before, read this guide: How to use filters
To find the CSS class, when viewing your PDF, add “&output=html” at the end of the URL then enter to now have an HTML output of the document:
Afterwards, you’ll be able to see the CSS class of the target by right-clicking the desired area & selecting “Inspect” or “Inspect Element”:
@seba123,
Thanks for showing me the HTML in the browser console, I can see the targets. This should complete the code for you:
add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_red_and_green_text', 10, 2 );
function wpo_wcpdf_red_and_green_text ( $document_type, $document ) {
?>
td.order-data .pickup-date td,
td.order-data .pickup-time td {
color: green;
font-size: 9pt;
}
td.order-data .shipping-method td{
color: red;
font-size: 9pt;
}
<?php
}
Hello Darren
https://imgur.com/a/kwKQZFB
thanks for your time its not working correct but I know you will fixit !! 🙂
i have shared Screenshot for delivery and pickup, (is it possible to remove order date too? :)?
This link is for Shipping: https://imgur.com/a/rD3YW6m
@seba123,
The code is actually working correctly but the CSS target needs to be changed. 😉
Do you need the whole line to be colored? If yes:
add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_red_and_green_text', 10, 2 );
function wpo_wcpdf_red_and_green_text ( $document_type, $document ) {
?>
td.order-data .pickup-date,
td.order-data .pickup-time {
color: green;
font-size: 9pt;
}
td.order-data .shipping-method {
color: red;
font-size: 9pt;
}
<?php
}
Hello Darren stil the same :/
https://imgur.com/a/si8YNJp
@seba123,
I was following your original post:
“Like:
Delivery method: “Shipping” RED
Delivery method: “Pickup” GREEN
Is that possible for PACKLING LIST?
“
If you now prefer to have the shipping data in green as well, change “red” to “green” where you see color: red;
Thank you Darren
Can you tell me how I can remove order-date on my packing list? :)??
Then you are the BEST BEST! 🙂
@seba123,
You can use this:
add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_hide_order_date', 10, 2 );
function wpo_wcpdf_hide_order_date ( $document_type, $document ) {
?>
.packing-slip tr.order-date {
display: none;
}
<?php
}
