Override Template CSS

  • mattinventive

    (@mattinventive)


    3 weeks, 6 days ago

    Hello, with the addition of the new major version, as many people have already said we’ve lost a tonne of customisations.

    We’ve managed to adapt but we need to have more control over the CSS. For example, the way the current templates output the SKU of products is way too faint.

    I checked your documentation but this is now out of date… Can you advise how we can override the CSS of the templates, or, supply a filter/action to inject some CSS.

    Thank you.

Viewing 1 replies (of 1 total)
  • Plugin Support anjitha21

    (@anjitha21)

    3 weeks, 6 days ago

    Hi @mattinventive

    There was an update in our plugin. We are sorry for the inconvenience caused.

    Also, several bugs reported were fixed in the new release (v7.1.1). You can check updating the plugin to this version.

    Here are the steps for the template override:

    Open your active theme folder: wp-content/themes/your-theme/
    Create a folder named woocommerce-delivery-notes inside it.

    1. Find the template file you want to change inside the plugin: wp-content/plugins/woocommerce-delivery-notes/templates/
    2. Copy that file into the folder you created in step 2, keeping the same filename
    3. Edit the copied file in your theme — the plugin will use it automatically

    Available template files:

    • invoice.php — Invoice
    • receipt.php — Receipt
    • deliverynote.php — Delivery Note
    • packingslip.php — Packing Slip
    • creditnote.php — Credit Note
    • base.php — Shared layout used by all documents

    Override styles
    Find the CSS file you want to change inside the plugin: wp-content/plugins/woocommerce-delivery-notes/templates/css/

    1. Copy it into your theme, recreating the same folder structure under woocommerce-delivery-notes/css/
    2. Edit the copied file — your styles will be loaded instead of the plugin’s

    Available CSS files:

    • css/style.css — Applies to all documents
    • css/html/style.css — Applies to browser print only
    • css/pdf/style.css — Applies to PDF output only

    Notes

    • If using a child theme, create the folder in the child theme — not the parent
    • The override affects only the live print preview and the document PDF generation. The frontend preview on the admin page isn’t affected.
Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.