Order total font weight customization

  • JapeNZ

    (@japenz)


    4 years, 3 months ago

    Hi there,
    Is there a way I can change the order total font weight to 700 (bold)?

    I initially tried

    .woocommerce-Price-amount.amount {font-weight: 700;}

    but this changes the font weight for all prices.

    I’m currently using

    tfoot tr:nth-child(4) {font-weight: 700;}

    as the total is usually the fourth line after Subtotal, Shipping, Payment method.

    However if the order is for a product that doesn’t have shipping (digital product such as a gift card), the total is longer displayed bold.

    I also tried last-child, but eBay orders add a line with the eBay order details after the total which ends up being bold if I do it this way.

    Any suggestions would be very much appreciated 🙂

    Kind regards,
    JP

    • This topic was modified 4 years, 3 months ago by JapeNZ.
Viewing 6 replies - 1 through 6 (of 6 total)
  • hannah

    (@hannahritner)

    4 years, 3 months ago

    Hi JP,
    Try adding this to your custom css:

    tfoot span.woocommerce-Price-amount.amount {
    font-weight: 700;
}

    Does that work for you?

    Hannah

    Thread Starter JapeNZ

    (@japenz)

    4 years, 3 months ago

    Hi Hannah,
    Thank you for your help!

    I applied your suggested css, but it made the Subtotal, Shipping and Total text bold.

    I then tried this:

    tfoot span.woocommerce-Price-amount.amount:last-child {
    font-weight: 700;
}

    Which made just Subtotal and Total text bold… so close, but yet so far! 😀

    The main reason I’d like to make just the ‘Total’ bold is that I’ve had a few occasions where I’ve sent out a manually created order (I do a lot of these for subscribers), and the customer has paid the subtotal amount.
    I’ve then had to email the customer requesting the additional shipping fee… assuming I spotted the incorrect payment amount haha!

    My hope is that with the total in bold it will be obvious at a glance how much they need to pay.

    This being the case, having the subtotal in bold as well as the total unfortunately won’t help.

    Thanks for your input though, if you have any other suggestions please let me know!

    Kind regards,
    JP

    • This reply was modified 4 years, 3 months ago by JapeNZ.
    • This reply was modified 4 years, 3 months ago by JapeNZ.
    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    4 years, 3 months ago

    Hey,
    Woocommerce core doesn’t make it possible to select this with css given all the variables. I’ll add classes using the row label to make it possible in the next update.

    Ben

    Thread Starter JapeNZ

    (@japenz)

    4 years, 3 months ago

    Hi Ben,
    Awesome, thank you sir!
    Kind regards,
    JP

    Thread Starter JapeNZ

    (@japenz)

    4 years, 3 months ago

    Hi @britner,

    I’m just trying to implement the new option to alter the style for the total (Add Classes to order totals table so it’s possible to style specifically), but can get it to work.

    I think the value I need to target is ‘td.tvalue-Total:’ so I’m trying:

    td.tvalue-Total: {
    font-weight: 700 !important;
}

    But nothing’s happening.

    If I change the class to ‘td.tvalue-Total’ in the Chrome dev area and apply:

    td.tvalue-Total {
    font-weight: 700 !important;
}

    It seems to work fine, I’m wondering if the colons in the class names might be causing the problem.
    Please let me know if I’m doing it horribly wrong 😀

    Kind regards,
    JP

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    4 years, 3 months ago

    yeah, that is causing the problem, I’ll have to strip that.

    Ben

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Order total font weight customization’ is closed to new replies.