Adding NEW Class to Related Products Images

What is the reason you need to add an additional class?

Hello Royho,

I am using a plugin that allows “exemptions” on lazy load items (Lazy Load XT), but the issue is I am unable to write exempted classes like this: “#Parent .Child” in order to show that I only want to exempt the .Child of #Parent– I can only utilize the final .Child class, which effects almost all site images. If I select just the #Parent, then the images are not effected. If I try to select #Parent.Child: nothing happens. #Parent .Child: Still effects most images AND the parent id.

I need to be able to only effect the Related Product images for this reason…which is why I would like to create an additional class for Related Products images, if possible.

Thank you!

Can you use JS to add the class in on page load before your “lazy load” script fires?

Hello Royho,

Thank you for your reply. I only know basic Javascript, but did try using it to find the class and add another class to the end, but it did not seem to fire (nothing happened), although it did show in the header of the site. I also tried jQuery with the same results, found at StackOverFlow. I may have gotten the code wrong, however. Would JS be the easiest way to resolve this?

Thank you.

JS would be the fastest way without writing a bunch of PHP script. Did you make sure the class was indeed added to the element? Perhaps paste the code you used?

Hello Royho,

Thank you again for your reply! I have JS that “works” on sites like codePen, but does not work when I add it to the site. Here is the code using html copied from my site (edited out names and links):
https://codepen.io/xkurohatox/pen/rxLOEo

var parent = document.getElementsByClassName('owl-item');
var parent2 =
parent[0].querySelectorAll('.attachment-shop_catalog');

for (var i = 0; i < parent2.length; i++) {
    parent2[0].classList.add("otherClass");
}

Here is a debug view where you can easily inspect elements and see the “other class” applied.: https://s.codepen.io/xkurohatox/debug/rxLOEo

When I add this code to my site though, nothing happens. For some reason this appears near the footer (not the head)…and unfortunately it does not work.

Thank you.

Please post your site url with the code you added so I can inspect.

Thank you Royho!

Here is a link to a site page that shows the related products: Click here

(The above is a temporary URL).

Thank you again.

I just had a look and the image already has “otherClass” and it also has “lazy-loaded”. That means your script that adds the class is working. But I cannot tell what the reason is for the lazy load not to work as that is not a plugin I am familiar with.

Hello Royho,

You are very kind! I looked again and you are right, the JS is working, but only affecting the first occurrence of “parent2”. I did not notice before that it was working at all!

Do you have any suggestions to make the loop affect all instances of .attachment-shop_catalog?

Thank you again Royho.

Do you mean you want to add “otherClass” to all img tags within the related images?

Hello Royho,

Yes, that is correct. I’m pretty terrible at JS so am surprised I could even effect the first image.

Thank you again.

You can try this:

<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
     $( '.wrps_related_products_area' ).find( 'img.attachment-shop_catalog' ).addClass( 'otherClass' );
});
</script>

Hello Royho,

Thank you for your help again.
Unfortunately, I am trying to use pure JS, but not sure if it is easily possible to affect all related images. I feel like I’m pestering you, but do you have any JS solutions, or suggestions?

Thank you Royho.

My JS is rusty but you can try:

var parent = document.getElementsByClassName('owl-item');

for (var i = 0; i < parent.length; i++) {
    var image = parent[i].querySelectorAll('.attachment-shop_catalog')[0];
    image.className += ' otherClass';
}

Untested…