Support » Plugin: Invoices for WooCommerce » How to change color of the total amount on the pdf

  • Resolved sandras21


    Great plugin thanks! I tried to changed some details on the invoice and everything went well except that total amount which is written in white and total amount which takes the color from settings. I changed in css:
    .total-amount, .total-amount h1 {
    color: black! important;

    but it keeps displaying it in white..can you advice how to do it?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    two possibilities:

    1. add the following style to the templates style.css (in the default template it is used only for the price)

    .amount {
        color: black;

    This will change the color of the price … but going for option 2 will show you also the “Thank you … ” text below the price.

    in the body.php ad the class to the span, which surrounds the price and “thank you …” text and remove the class amount from the h1 tag for the price.

    example for standard template micro:

    <span class="amount">
       <h1><?php echo wc_price( $this->order->get_total() - $this->order->get_total_refunded(), array( 'currency' => $this->order->get_order_currency() ) ); ?></h1>
       <p><?php echo $this->template_options['bewpi_intro_text']; ?></p>

    I hope this helps (I assume, you are aware of modifying the template, as you had already some tries with the css.

    kr dieter

    • This reply was modified 6 years, 3 months ago by gludie.

    of course you can use also the existing class total-amount, maybe a third option:

    just delete the style amount at h1:
    <h1 class="amount"><?php echo wc_price( $this->order->get_total() - $this->order->get_total_refunded(), array( 'currency' => $this->order->get_order_currency() ) ); ?></h1>
    <h1><?php echo wc_price( $this->order->get_total() - $this->order->get_total_refunded(), array( 'currency' => $this->order->get_order_currency() ) ); ?></h1>

    then your changes in style total-amount will also affect the price 😉

    ps: of course you would not need to add amount to the style.css of course

    • This reply was modified 6 years, 3 months ago by gludie.
    Thread Starter sandras21


    Hello @gludie, thank you for your suggestions.
    I`m not sure if I got you right..deleted class=”amount” (option #2) and in css i set amount to black. Now this total amount which is displayed with that colored background is black but total amount below the line takes color still from the background color i set from settings. So if I set background to white, the total amount and also invoice number will be white too and not visible..I tried to add to css
    .number {
    color: black! important;
    } to change invoice number color..Did`nt help..
    I assume for total amount below the line I shall modify that following code but could you advice how?

    <!-- Total -->
      <tr class="after-products">
        <td colspan="<?php echo $this->colspan['left']; ?>"></td>
        <td colspan="<?php echo $this->colspan['right_left']; ?>" class="total"><?php _e( 'Total', 'woocommerce-pdf-invoices' ); ?></td>
        <td colspan="<?php echo $this->colspan['right_right']; ?>" class="grand-total align-right" style="color: <?php echo $this->template_options['bewpi_color_theme']; ?>;"><?php echo $this->get_total(); ?></td>

    Thank you in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change color of the total amount on the pdf’ is closed to new replies.