nick1122

Hi,

Here’s a filter that can set the long size of the product name. Add this code snippet in functions.php file of your currently active theme.

function custom_wcdn_order_item_name($product_name, $item) {
    if (strlen($product_name) > 5) {
        $product_name = '<span class="wrap-product-name">' . esc_html($product_name) . '</span>';
    } else {
        $product_name = '<span>' . esc_html($product_name) . '</span>';
    }
    return $product_name;
}
add_filter('wcdn_order_item_name', 'custom_wcdn_order_item_name', 10, 2);

After this, please follow the below steps.
1. Download the CSS file in this link – https://www.dropbox.com/scl/fi/ga0a1qyw9wx8l6xinggpe/style.css?rlkey=itdzbmuu3vfuqewxka4zwluh0&dl=0
2. After downloading the file, you can replace it with the original file in the \wp-content\plugins\woocommerce-delivery-notes\templates\print-order folder.
3. The css makes the necessary changes to fix the name in 80mm thermal printer.

Screenshot for your reference: https://prnt.sc/d50hroi1AG_c

Please let me know if the provided solution resolves your issue.

Regards,
Nikhil.

Hi Phillip,

We have tested this on our end, and the delivery notes are printing properly.

Could you please share a video of this issue so that I can better understand and investigate? Also, please provide details about the device on which you are experiencing this problem.

Regards,
Nikhil.

Hi,

First of all, I apologize for the delay in getting back to you on this.

Here’s a modified filter that can adjust the image in the print to PDF. Add this code snippet in functions.php file of your currently active theme.

add_action( 'wcdn_after_branding','add_extra_image', 10, 2 );

function add_extra_image() {
	$template_type = wcdn_get_template_type();
	if ($template_type === 'receipt' || $template_type === 'invoice') {
		?>
		<style>
			/* when screen is less than 600px wide show mobile version and hide desktop */
			@media ( max-width: 600px ) {    
		.extra-image-mobile .extra-image {
				display: block;
			}
		.extra-image-mobile {
				position:absolute;
				opacity:1;
				top: 17%;
				left: 40%;
			}	 

		.extra-image .extra-image-desktop {
				display: none;
			}	
		}
		/*when screen is more than 800px wide show desktop version and hide mobile */
		@media ( min-width: 800px ){
		.extra-image-desktop {
			position:absolute;
			opacity:1;
			left: 50%;
			top: 20%;
		}
		.extra-image .extra-image-mobile  {
				display: none;
			}
		}
        
        /* Print-specific styles */
            @media print {
                .extra-image,
                .extra-image-mobile,
                .extra-image-desktop {
                    position: absolute !important; /* Use !important to ensure priority */
                    opacity: 1;
                    left: 50%;
                    top: 5%;
                    display: block !important; /* Use !important to ensure priority */
                }
            }
			</style>
			<div class="extra-image">
			<img src="http://print-extra-issue.local/wp-content/uploads/2023/10/beanie-2.jpg" class="extra-image-desktop" width="100" height="100" alt="Stamp">
		</div>
		<?php
	}
}

You can adjust the image size and position within the ‘Print-specific styles’ section of this CSS, and the modifications will be reflected in the PDF.
screenshot – https://prnt.sc/gsA8Hmx7nxqz

Please let us know if the given solution is helpful for you.

Regards,
NIkhil.

Hi Norisknofun,

First of all, I apologize for the delay in getting back to you on this.

Here’s a filter that can show the service type,date & time in the invoice order info. Add this code snippet in functions.php file of your currently active theme.

/**
 * Add this code snippet in functions.php file of your currently active theme.
 * Adding service type,date & time in the Order info section. 
 */
function set_custom_order_fields( $fields, $order ) {
    $new_fields = array();
    
    if( get_post_meta( $order->id, '_wfs_service_type', true ) ) {
        $new_fields['_wfs_service_type'] = array( 
            'label' => 'Service Type:',
            'value' => get_post_meta( $order->id, '_wfs_service_type', true )
        );
    }
    if( get_post_meta( $order->id, '_wfs_service_date', true ) ) {
        $new_fields['_wfs_service_date'] = array( 
            'label' => 'Date:',
            'value' => get_post_meta( $order->id, '_wfs_service_date', true )
        );
    }
    if( get_post_meta( $order->id, '_wfs_service_time', true ) ) {
        $new_fields['_wfs_service_time'] = array( 
            'label' => 'Time:',
            'value' => get_post_meta( $order->id, '_wfs_service_time', true )
        );
    }
    
    return array_merge( $fields, $new_fields );
}
add_filter( 'wcdn_order_info_fields', 'set_custom_order_fields', 10, 2 );

Screenshot for your reference: https://prnt.sc/dHNPIgQd8dzE

Regards,
Nikhil.

Hi norisknofun,

Could you please provide more details on this issue?

We have checked on our end but couldn’t identify the method used for adding delivery time to the order in the Woo app. It seems like you may have utilized a plugin or code for this functionality.

Additionally, for better understanding, could you please attach a screenshot?

Regards,
Nikhil.

Hi,

Use this code snippet for adding the extra image to the receipt & invoice, Please replace the URL of src in the code with your stamp image URL.

add_action( 'wcdn_after_branding','add_extra_image', 10, 2 );

function add_extra_image() {
	$template_type = wcdn_get_template_type();
	if ($template_type === 'receipt' || $template_type === 'invoice') {
		?>
		<style>
			/* when screen is less than 600px wide show mobile version and hide desktop */
			@media ( max-width: 600px ) {    
		.extra-image-mobile .extra-image {
				display: block;
			}
		.extra-image-mobile {
				position:absolute;
				opacity:1;
				top: 17%;
				left: 40%;
			}	 

		.extra-image .extra-image-desktop {
				display: none;
			}	
		}
		/*when screen is more than 800px wide show desktop version and hide mobile */
		@media ( min-width: 800px ){
		.extra-image-desktop {
			position:absolute;
			opacity:1;
			left: 50%;
			top: 20%;
		}
		.extra-image .extra-image-mobile  {
				display: none;
			}
		}	
			</style>
			<div class="extra-image">
			<img src="http://print-extra-issue.local/wp-content/uploads/2023/10/beanie-2.jpg" class="extra-image-desktop" width="100" height="100" alt="Stamp">
		</div>
		<?php
	}
}

You can set the image in the invoice using the provided CSS. You can make changes to this according to your image size.

I am sending you the screenshot for your reference: https://prnt.sc/to6xES8COK67
Regards,
Nikhil.

Hi,

Please create the ticket here on our support tool so that we can communicate in detail.

Regards,
Nikhil.

Hi,

Please send me the screenshot of the receipt and indicate where you would like to add the stamp image.

Regards,
Nikhil.