Docs

[mdmason23]

Hello,

I want to add an image to the “additional information” tab of all the products listed on my website (558 of them!) It is a unit conversion table, but it seems that images cannot be added to this tab. I was also hoping that there would be an easier way of doing it than having to edit every single product in my shop, so I am open to suggestions.

Thanks for any help you can offer.
Monique

[Rupok]

Hi Monique,

Thanks for writing in! If you are trying to add the same image to all Tabs then it’s quite possible.
You can add this under Custom > JavaScript in the Customizer :

jQuery(document).ready(function($) {
  var html = '<img src="http://path/to/your/image.png"/>';
  $( html ).appendTo('.single-product .tab-additional-info');
});

Let’s change the image path http://path/to/your/image.png with your uploaded image URL.

If you still have any issue; kindly provide your URL.

Cheers!

[mdmason23]

Rupok,

I added the code to the custom javascript, but the image still does not show on the tab in my products. I will provide ftp credentials in another private message.

Thanks for your help,
Monique

[mdmason23]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back with URL. You need to update the code a bit with right selector for your site :

jQuery(document).ready(function($) {
  var html = '<img src="https://butterbeescraps.com/wp-content/uploads/2016/08/unit-conversion-table.png"/>';
  $( html ).appendTo('.single-product .additional_information_pane');
});

I have updated this to make sure it works. If you want to add some spacing or control the styling of the image; you can add this under Custom > CSS in the Customizer.

.additional_information_pane.active > img {
  margin-top: 25px;
}

Let’s add your own CSS if needed to control size as well.

Cheers!

[mdmason23]

Rupok,

This is great…thanks for the very quick support!

I do have one more question…how do I center the image? I have tried setting both margin-right and margin-left to auto, but it does nothing.

Monique

[mdmason23]

Rupok,

I also notice that when I add the javascript into the customizer and save, the preview shows my image; however, when I exit the customizer and view the website, no image is appearing. This seems to be happening only when I am logged into the website…I am stumped.

Thanks,
Monique

[Christopher]

Hi there,

Please add margin-right: auto;margin-left: auto; display: block; in image’s style field.
The image is displaying fine, see the attachments.

Thanks.

[mdmason23]

Thanks…for some reason, when I am logged in as admin, the image is not showing on the additional information tab…in customizer or not now. It appears in customizer until I add the margin-left: auto; Margin-right: auto; display: block;…then poof, it’s gone. It will still show when I add your original code above with the margin-top: 25px.

I have logged in with the credentials I provided to you, and the image appears. The image also shows if I’m not logged in.

Any ideas as to why this might be happening?

[Rupok]

Hi there,

I am logged in to your site as well as I tested the code after adding. It’s fine on my end no matter logged in or logged out. It’s working like a charm as you added the code right.

Cheers!

[mdmason23]

Rupok,

I know it’s fine when you log in…that’s what I said in my previous message. The problem is that it’s not showing the image when I login as I always do using my secure admin credentials that I never give to anyone.

I have purged the cache on my server, plus my web browser cache, but still no image when I am logged in as admin.

Monique

[Friech]

Hi Monique,

Logged in or not, I am seeing the image (table) on my end. Would you mind to clarify how we can replicate this issue?

Thanks.

[mdmason23]

Friech,

The only way you can replicate it on your end would be to login as admin…not the tempadmin. I’m not going to worry about it…my customers are seeing the image, and that’s the most important thing.

Thanks,
Monique

[Joao]

Hi Monique,

If you need further help, please let us know.

Joao

[Author]

Posts