displaying a image

  • Resolved mrsmith11

    (@mrsmith11)


    7 months, 3 weeks ago

    Hello,

    Thanks for creating this great plugin.

    I have three questions.

    1.
    I want to display a image on the specific place.

    I am using the code below on “code snippets” plugin.

    But I cannot change the place of the image after changed the value of “top *%” and “left *%”.
    (The image does not move from default place.)

    How can I change the image place?

    add_action('wcdn_after_branding','add_extra_image', 10, 2);
    function add_extra_image(){
    	if (wcdn_get_template_type() === 'receipt') {
    	?>
     <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: 7%;
    			left: 30%;
    		}	 

    	.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: 30%;
    		top: 7%;
    	}
    	.extra-image .extra-image-mobile  {
    			display: none;
    		}
    	}	
    		</style>
    		<div class="extra-image">
    		<img src="https://www.aaaaaaaaaaaaa.com/stamp.png" class="extra-image-mobile" width="100" height="100" alt="stamp">
    	</div>
    <?php
         } 
    }

    I would like to display a image around here.

    https://www.dropbox.com/scl/fi/05olvlk74ca03m03ravri/mQxDMPL1Dk.png?rlkey=4idjhq2daciwv50wqjpbsamuy&dl=0

    2.
    How can I display same image on “invoice” and “delivery notes” as well?

    3.
    I dont want to display “publish date” and “domain directory URL” and “document title”.

    (Two green parts on the picture below)

    https://www.dropbox.com/scl/fi/enshi2vvy16m3018lfwmf/green.png?rlkey=ry7q8fg9ugw6qisy9w59p8x7s&st=3q0mz3jb&dl=0

    How can I solve this problem?

    I am using Google chrome and Microsoft Edge

    Hope your reply soon.

    Best

    • This topic was modified 7 months, 3 weeks ago by mrsmith11.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author priyankajagtap

    (@priyankajagtap)

    Hi @mrsmith11,

    Yes, you can remove the page URL from the print invoice. Please follow the below steps to achieve your requirements.

    1. After clicking the print option in our print invoice, a print preview window will appear where you are able to see the URL.
    2. Look for the “More settings” or “More options” button in the print preview window and click on it. This may be represented by three dots or lines, depending on the browser you’re using.
    3. Check for an option related to headers and footers. Uncheck any checkbox that mentions headers and footers to ensure they don’t appear on the printed page.
    4. Once you’ve made the necessary adjustments, you can see that the URL will be hidden.
    5. The specific steps might slightly vary depending on the web browser you are using. We will attach the screenshot for your reference.
      Screenshot – https://prnt.sc/mjxRPk4YYts8 , https://prnt.sc/wbpd5HoW6cPd

      Please let us know if you need any other help.

      For changing the image location, I will check on it and get back to you with an update on the same by tomorrow.
    Thread Starter mrsmith11

    (@mrsmith11)

    Hello @priyankajagtap

    Thank you for your reply.

    about removing the page URL from the print invoice, resolved.

    Thank you.

    and I am waiting for a solution for changing the image location.

    Best

    Plugin Author priyankajagtap

    (@priyankajagtap)

    Hi @mrsmith11,

    You can use the “wcdn_head” hook and write the custom CSS code to change the image location as per your requirements.

    Alternatively, you can use the class named “company-logo” and apply the CSS styling as per your requirements in the “style.css” file located at the below-mentioned path.
    /woocommerce-delivery-notes/templates/print-order/simple/style.css/

    Feel free to let us know if you have any questions.

    Thread Starter mrsmith11

    (@mrsmith11)

    Hi @priyankajagtap

    Thanks for your reply.

    But what do you mean?

    where can I change the code?

    Best

    Plugin Author priyankajagtap

    (@priyankajagtap)

    Hi @mrsmith11,

    Sorry for the delay in response to this. I thought I have replied to you on this but now, I realized that my response didn’t get sent.

    As I mentioned earlier, you will need to make changes in the “style.css” file present at the
    below-mentioned path:
    wp-content/plugins/woocommerce-delivery-notes/templates/print-order/simple/<HERE>

    You will need to make the changes via FTP. If you do not have technical knowledge then you can share this information with your web developer as he can create the custom code to achieve your requirements.

    Do let us know if you have any questions.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘displaying a image’ is closed to new replies.