Support » Plugin: Print Invoice & Delivery Notes for WooCommerce » [Plugin: WooCommerce Print Invoices & Delivery Notes] Delivery Notes – Recipient address font si

  • I want to use a folded Delivery Note as an address label inside a see-through outer envelope. USPS says the font size of the Recipient address is unacceptable because it’s the same size as the sender font and needs to be bigger. I know from reading your responses to previous requests that you’ll suggest I learn CSS but that’s not as easy as it sounds when you’re starting from ground zero as I am. Well, not exactly zero as I do know a little but obviously not enough to select the correct file or whether it’s a theme style mod. I really would appreciate your help in this one area if you’re able to point me in the right direction. TIA.

    http://wordpress.org/extend/plugins/woocommerce-delivery-notes/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter maximan

    (@maximan)

    I am struggling with how to modify the layout. I recognize my limitations with css and ask for help either from the developer or a helpful user. What I need to do is have the sender name and address (the company name and address) in small font and positioned top left (where the “Delivery Note” is currently), and the Recipient top right and in larger font. How can this be done? I know a little css but don’t know what file to modify (theme or this extension style css file). I’d really appreciate help on this. Again, TIA.

    read question 3 in the faq and learn some css. and most important, have fun!

    http://wordpress.org/extend/plugins/woocommerce-delivery-notes/faq/
    http://www.cssbasics.com

    i think we should continue in the original post. please try to be more specific with your topic names when you open a new post.
    http://wordpress.org/support/topic/frustration-with-this-plugin?replies=1

    1. do you just want to print a label with a sender and recipient address, without any product list, etc? if yes, wouldn’t it be easier to have a word template and quickly copy paste the address?

    2. if you still plan to use the delivery-note template as a starting point: to create what you want, you need to read question 3 in the faq and continue reading below:

    How can I use a custom CSS file for the printing page without copying and editing the template files?
    Copy the style.css (and no other file) from the /wp-content/plugins/woocommerce-delivery-notes/templates/print folder and paste it inside your /wp-content/themes/your-theme-name/woocommerce/print folder (if not there just create it). You can modify CSS to fit your own needs.
    
    Note: There is automatically a class assigned to the html tag that helps you to target the template-type in your CSS.

    then you need to add this at the end of the style.css:

    .delivery-note #order-info,
    .delivery-note #order-items,
    .delivery-note #order-summary,
    .delivery-note #order-notes,
    .delivery-note #letter-footer,
    .delivery-note #letter-header .heading {
    	display: none;
    }
    
    .delivery-note #letter-header .company-name {
    	font-weight: bold;
    }
    
    .delivery-note #letter-header .company-info {
    	float: none;
    	width: 100%;
    }

    not tested and maybe need to edit more but it should be a good starting point.

    3. the mailing label is a feature that could be integrated in some way. but i still think that not many people would use it. i think this plugin is more about printing orders with product listings but i need to discuss this standing point with other devs.

    chabis, thank you for taking the time during the hectic holiday season to consider my request (ref your email dated 2012-12-29). I did experiment with your css modifications but alas this doesn’t really help. Your css modification merely removes everything except the recipient name and address and leaves everything else as before. As mentioned before, I want to keep all data on the current delivery note but change placement of the sender to top left and increase the font of the recipient to allow the delivery note to have a dual function as a mailing label by appropriate folding. Your suggestion to copy and paste the recipient info into a label app is certainly workable but printing on my consumer-level printer one label at a time is not really viable whereas printing an 8.5x 11 sheet delivery note is practical. I hope you and your fellow developers will not let this request lapse and put yourselves in the shoes of the user who not only needs to print a delivery note but also ship the product. All of the ingredients are there within the data but I don’t have the skill to mix them to suit my needs. I hope you will take another look at this request.

    sorry, i misunderstood you then. i thought you want to print mailing labels. try this instead:

    /* Simple CSS Reset and Print options
    ------------------------------------------*/
    
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
    	border: 0 none;
    	font: inherit;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    body {
    	line-height: 1;
    }
    
    ol,
    ul {
    	list-style: none;
    }
    
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Template Page Layout
    ------------------------------------------*/
    
    /* Main Body */
    body {
    	background: #fff;
    	color: #000;
    	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    	font-size: 0.875em;
    	line-height: 125%;
    }
    
    h1,
    h2,
    h3,
    h4 {
    	font-weight: bold;
    }
    
    li,
    ul {
    	margin-bottom: 1.25em;
    }
    
    p + p {
    	margin-top: 1.25em;
    }
    
    /* Basic Table Styling */
    table {
    	page-break-inside: auto;
    }
    
    tr {
    	border-top: 1px #ccc solid;
    	border-bottom: 1px #ccc solid;
    	page-break-inside: avoid;
    	page-break-after: auto;
    }
    
    td,
    th {
    	border-left: 1px #ccc solid;
    	border-right: 1px #ccc solid;
    	padding: 0.375em;
    	vertical-align: middle;
    }
    
    th {
    	color: #000;
    	font-weight: bold;
    	text-align: left;
    }
    
    /* Special Margin & Overflow Stylings */
    #page {
    	margin-left: auto;
    	margin-right: auto;
    	padding-top: 5%;
    	padding-bottom: 5%;
    	padding-left: 10%;
    	padding-right: 10%;
    	text-align: left;
    	page-break-after: always;
    }
    
    #letter-header,
    #order-items,
    #order-summary,
    #order-notes {
    	margin-bottom: 3em;
    }
    
    #order-info,
    #order-summary {
    	margin-bottom: 6em;
    }
    
    #page,
    #letter-header,
    #order-listing,
    #order-summary,
    #order-notes,
    #letter-footer {
    	overflow: hidden;
    }
    
    #order-items,
    #order-summary,
    #order-notes,
    #letter-footer {
    	page-break-before: auto;
    	page-break-after: auto;
    }
    
    /* Delivery Notes Head */
    #letter-header {
    	float: right;
    	width: 50%;
    }
    
    #letter-header .heading {
    	font-weight: bold;
    	font-size: 2em;
    	line-height: 125%;
    }
    
    #letter-header .company-name {
    	font-weight: bold;
    }
    
    #letter-header .company-info {
    	margin-top: 0.45em;
    }
    
    /* Order Listing - #order-listing */
    #order-listing {
    	margin-bottom: 6em;
    	float: right;
    	width: 50%;
    	font-size: 1.5em;
    	line-height: 125%;
    }
    
    /* Order Info - #order-info */
    #order-info {
    	float: left;
    	width: 50%;
    }
    
    /* Order Items - #order-items */
    #order-items {
    	clear: both;
    }
    
    #order-items table {
    	width: 100%;
    }
    
    #order-items .description {
    	width: 50%;
    }
    
    #order-items .price {
    	width: 25%;
    }
    
    #order-items dl {
    	display: inline;
    	margin-bottom: 0;
    	color: #666;
    }
    
    #order-items dt,
    #order-items dd {
    	display: inline;
    	margin-bottom: 0;
    	font-size: 0.75em;
    }
    #order-items dt {
    	margin-left: 0.75em;
    }
    
    #order-items dd {
    	margin-left: 0.2em;
    }
    
    /* Order Summary - #order-summary */
    #order-summary {
    	float: right;
    	width: 50%;
    }
    
    #order-summary table {
    	width: 100%;
    	page-break-inside: avoid;
    }
    
    #order-summary .price {
    	width: 50%;
    }
    
    #order-summary tr:last-child {
    	border-top: 2px solid #000;
    	border-bottom: 2px solid #000;
    	font-weight: bold;
    }
    
    #order-summary small {
    	font-size: 0.75em;
    	color: #666;
    }
    
    /* Order Notes - #order-notes */
    #order-notes {
    	clear: both;
    }
    #order-notes .notes-shipping {
    	float: left;
    	width: 50%;
    }
    #order-notes .notes-personal {
    	float: right;
    	width: 50%;
    	font-weight: bold;
    }
    
    /* Footer Imprint */
    #letter-footer {
    	border-top: 1px solid #ccc;
    	padding-top: 1em;
    	color: #666;
    	font-size: 0.75em;
    }
    
    #letter-footer p + p {
    	margin-top: 1em;
    }
    
    #letter-footer .policies,
    #letter-footer .imprint {
    	margin-bottom: 1em;
    }
    
    /* CSS Media Queries for Print
    ------------------------------------------*/
    
    @media print {
    	body {
    		font-size: 8pt;
    	}
    }
    Thread Starter maximan

    (@maximan)

    Chabis, firstly, I want to thank you for all your efforts to help. I recognize this is not your regular job and time is tight. Fortunately I was able to learn from your suggested changes and make additional tweaks so that the Delivery Note now has a dual function as a mailing label. Well, it’s not really a label per se. What I finally was able to achieve was print Delivery Note on 8.5×11 sheet with Company top left small font, where it’s normal to have the return address, and Recipient centred and below in larger font, just like a regular mailing label. The printout is folded to fit inside an adhesive transparent envelop clearly showing “From” and “To” in appropriate size and placement, so it won’t confuse the mailman! Thanks again.

    @maximan, I’ve just posted exactly the same thing in a new thread.(whoops didn’t see the second page)

    Could you possible post up your style.css for this as this is just what I need. (Great minds and all that…)

    Many thanks in advance.

    Thread Starter maximan

    (@maximan)

    timread, below is the modified css located in woocommerce-delivery-notes/templates/print/style.css. Also, I changed “Delivery Note” to “Delivery Note Enclosed”, see woocommerce-delivery-notes.php line 203, and changed print-delivery-note.php “Recipient” to “To:”

    /* Simple CSS Reset and Print options
    ------------------------------------------*/
    
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
    	border: 0 none;
    	font: inherit;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    body {
    	line-height: 1;
    }
    
    ol,
    ul {
    	list-style: none;
    }
    
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Template Page Layout
    ------------------------------------------*/
    
    /* Main Body */
    body {
    	background: #fff;
    	color: #000;
    	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    	font-size: 0.875em;
    	line-height: 125%;
    }
    
    h1,
    h2,
    h3,
    h4 {
    	font-weight: bold;
    }
    
    li,
    ul {
    	margin-bottom: 1.25em;
    }
    
    p + p {
    	margin-top: 1.25em;
    }
    
    /* Basic Table Styling */
    table {
    	page-break-inside: auto;
    }
    
    tr {
    	border-top: 1px #ccc solid;
    	border-bottom: 1px #ccc solid;
    	page-break-inside: avoid;
    	page-break-after: auto;
    }
    
    td,
    th {
    	border-left: 1px #ccc solid;
    	border-right: 1px #ccc solid;
    	padding: 0.375em;
    	vertical-align: middle;
    }
    
    th {
    	color: #000;
    	font-weight: bold;
    	text-align: left;
    }
    
    /* Special Margin & Overflow Stylings */
    #page {
    	margin-left: auto;
    	margin-right: auto;
    	padding-top: 4%;
    	padding-bottom: 4%;
    	padding-left: 4%;
    	padding-right: 4%;
    	text-align: left;
    	page-break-after: always;
    }
    
    #letter-header,
    #order-items,
    #order-summary,
    #order-notes {
    	margin-bottom: 3em;
    }
    
    #order-info,
    #order-summary {
    	margin-bottom: 6em;
    }
    
    #page,
    #letter-header,
    #order-listing,
    #order-summary,
    #order-notes,
    #letter-footer {
    	overflow: hidden;
    }
    
    #order-items,
    #order-summary,
    #order-notes,
    #letter-footer {
    	page-break-before: auto;
    	page-break-after: auto;
    }
    
    /* Delivery Notes Head */
    #letter-header {
    	float: left;
    	width: 40%;
    }
    
    #letter-header .heading {
    	font-size: .8em;
    	line-height: 100%;
    }
    
    #letter-header .company-name {
    }
    
    #letter-header .company-info {
    	margin-top: 1.75em;
    }
    
    /* Order Listing - #order-listing */
    #order-listing {
    	margin-bottom: 5em;
    	float: right;
    	width: 90%;
    	font-size: 1.75em;
    	line-height: 125%;
    }
    
    /* Order Info - #order-info */
    #order-info {
    	float: left;
    	width: 50%;
    }
    
    /* Order Items - #order-items */
    #order-items {
    	clear: both;
    }
    
    #order-items table {
    	width: 100%;
    }
    
    #order-items .description {
    	width: 50%;
    }
    
    #order-items .price {
    	width: 25%;
    }
    
    #order-items dl {
    	display: inline;
    	margin-bottom: 0;
    	color: #666;
    }
    
    #order-items dt,
    #order-items dd {
    	display: inline;
    	margin-bottom: 0;
    	font-size: 0.75em;
    }
    #order-items dt {
    	margin-left: 0.75em;
    }
    
    #order-items dd {
    	margin-left: 0.2em;
    }
    
    /* Order Summary - #order-summary */
    #order-summary {
    	float: right;
    	width: 50%;
    }
    
    #order-summary table {
    	width: 100%;
    	page-break-inside: avoid;
    }
    
    #order-summary .price {
    	width: 50%;
    }
    
    #order-summary tr:last-child {
    	border-top: 2px solid #000;
    	border-bottom: 2px solid #000;
    	font-weight: bold;
    }
    
    #order-summary small {
    	font-size: 0.75em;
    	color: #666;
    }
    
    /* Order Notes - #order-notes */
    #order-notes {
    	clear: both;
    }
    #order-notes .notes-shipping {
    	float: left;
    	width: 50%;
    }
    #order-notes .notes-personal {
    	float: right;
    	width: 50%;
    	font-weight: bold;
    }
    
    /* Footer Imprint */
    #letter-footer {
    	border-top: 1px solid #ccc;
    	padding-top: .5em;
    	color: #666;
    	font-size: 0.75em;
    }
    
    #letter-footer p + p {
    	margin-top: 1em;
    }
    
    #letter-footer .policies,
    #letter-footer .imprint {
    	margin-bottom: .5em;
    }
    
    /* CSS Media Queries for Print
    ------------------------------------------*/
    
    @media print {
    	body {
    		font-size: 8pt;
    	}
    }

    @maximan

    Thanks very much. Saved me hours.

    @maximan: Thanks for asking this question.

    Can you please help me out with this requirement:
    I need to have Shipping Label for courier Deliveries without Barcode.
    Can you please guide in Designing Shipping Label from Delivery Note ?

    @maximan

    Thanks for that css, really helped me out. All i need to do with it now is to make the recipient retails bigger and remove the word recipient from it. Im OK with css but not sure which bit to edit, if i knew which bit was for the recipient then i can edit this myself.
    Thanks in advance.

    Andy

    Hi All, Just followed and the delivery note is good, however the invoice needs to also print out the shipping address not the billing address. Any ideas?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin: WooCommerce Print Invoices & Delivery Notes] Delivery Notes – Recipient address font si’ is closed to new replies.