Home>Support>Issue with the SiteOrigin Tabs widget

Issue with the SiteOrigin Tabs widget

Hi Andrew,

I have a page with just two widgets: (1) SiteOrigin Tabs and (2) Custom HTML (refer to their full setup in the WeTransfer link shared below).
There are 9 images in the tabs widget. They have been pre-assigned with 9 separate images (1.png to 9.png).
The codes in the Custom HTML widget are meant to dynamically change the images in the tabs widget to a different set of images (10.png to 18.png).
However, the tabs widget doesn’t display the correct/new images (10.png to 18.png) as expected. The tabs widget still shows the original images 1.png to 9.png although the images have been changed dynamically via the codes in the Custom HTML widget.
Any help you could provide and/or hints of where the issue lies would be most appreciated.
Thanks in advance for your help.

WeTransfer link: https://we.tl/t-1QPJgbAgyr (link expires in 7 days)


This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 months, 16 days ago Andrew Misplon
    Hi, I Work Here

    Hi KC

    Thanks for posting your question.

    We do our very best with a limited budget. We aren’t normally able to assist with anything custom-related within our free support scope. Not because we don’t want to but because of real-world limitations. I’ve asked Alex here at SiteOrigin to take a quick look. The following feedback isn’t tested but might help, with emphasis on might.

    The Custom HTML widget script is executing immediately when the page loads. At this point, the elements with IDs like product-gallery-img-1 and product-gallery-href-1 may not exist in the DOM yet, as the SiteOrigin Tabs widget might not have finished rendering. To fix this, you can wrap the image updating code inside a document.addEventListener(“DOMContentLoaded”, function() { … }); block to ensure that the code runs after the DOM is fully loaded. The image URLs in the Custom HTML widget are using relative paths (e.g., 10.png, 11.png, etc.). If these images are not located in the same directory as the page, the browser won’t be able to find them. Make sure to use the correct absolute or relative paths to the images.

    We can assist with a task like the above to completion within our premium support scope where the budget allows it.

    Thanks again.


  2. 3 months, 13 days ago kcwong

    Dear Andrew,

    Many thanks for your prompt and quick response. Based on your response, I have managed to resolve this issue by removing all the initial references to the images i.e. making src = “”. Later, I replaced the src attributes with the actual images to be displayed. Beats me but that small hack did the trick!

    Thanks for your kind assistance again. Much appreciated! God bless!


  3. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    Hi KC

    Glad to hear you found a way forward; great news!



Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More