Support » Plugin: WooCommerce PDF Invoices & Packing Slips » How to modify specific metadata?

  • andrek123

    (@andrek123)


    Hello

    I am using a plugin that adds extra fields to products. One of the fields includes a picture and text with color specification. Unfortunately the picture is too big and hides other product options on the invoice.

    How can I modify (either hide/delete or change size) of a specific meta data? Easiest way would be to use custom CSS, but I don’t know the element’s names for a selector.

    Can you advise?

    Best regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support alexmigf

    (@alexmigf)

    Hello @andrek123

    You can inspect the HTML on the browser developer tools by appending &output=html to the PDF URL.

    Hope that helps!

    Thanks! Unfortunately I’m still having problems with it.
    I managed to hide it with CSS and I can see the change when I inspect the invoice with &output=html. But when I generate the PDF normally, it doesn’t show the changes. How is this possible?

    I have checked “Always use most current settings”, so that shouldn’t be the issue.

    Best regards

    • This reply was modified 1 month, 3 weeks ago by andrek123.
    Plugin Support kluver

    (@kluver)

    Hi @andrek123,

    Can you share the CSS you’ve used to hide the image? And also tell us where you’ve added the CSS?

    Hi

    I added this:

    img.img-thumbnail {
      display: none;
    }

    to the “Custom Styles” textbox in “WooCommerce PDF Invoices” plugin settings under “Customizer” tab.
    To test, I generate a random order’s invoice, which opens

    url.com/wp-admin/admin-ajax.php?action=generate_wpo_wcpdf&document_type=invoice&order_ids=xxxx&_wpnonce=f1a1af6d4c

    here I can not see the change. When I add &output=html to the end of that URL, I get a HTML version of the pdf – here I can see the img.img-thumbnail element not visible.

    Hope that clears it up
    Thanks!

    • This reply was modified 1 month, 3 weeks ago by andrek123.
    • This reply was modified 1 month, 3 weeks ago by andrek123.
    Plugin Author Ewout

    (@pomegranate)

    Unfortunately, without knowing the details of your setup & output, it’s not really possible for us to help with this, and such customization is also somewhat out of scope for the free plugin support.
    Two things you could try:

    1. Try to make your selector more specific (adding parent classes) of less specific at the img element. E.g. .order-details img.img-thumbnail or .order-details .product img (these are just examples, I don’t know whether your images are in the order details table!)
    2. Try adding !important to your CSS: display: none !important;

    I’m afraid that’s about as much we can do for you, but hopefully this will give you enough to work with.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.