[Support request] insert image on top of product thumbnail if product is sold out

[nik9]

Hello Guys,

Im trying to add a image on top of the product thumbnail in shop archive and product single page if a product is out of stock. The PHP snipped works and adds the class to all out of stock product. But the image is not displayed there.

This is the wanted result on archive page: https://ibb.co/J2nhPvp
And this is the wanted result on product single page: https://ibb.co/nzv5xSV

This is the PHP snipped so add the classes to html:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<div class="sold_out_loop_wrapper"><span class="sold_out_img"></span></div>';
   }
});

This is my CSS to add the image:

.sold_out_loop_wrapper {
    position: relative;
}

.sold_out_loop_wrapper .sold_out_img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(https://XXXXX.ch/quantity-testing/wp-content/plugins/coming-soon-for-woocommerce/assets/img/coming_soon_8.png) no-repeat left center;
    background-size: contain;
}

[Elvin]

Hi,

Can you link us to a product w/ no stock so we could check?

Also, can you try adding fixed width and height property to the element?

Since the element being added by the snippet doesn’t seem to have any content to base its width and height on, it will most likely have 0 width x 0 height. That’s likely the reason why it is not displaying.

Let us know.

[nik9]

Hi Elvin

Thanks. You find the login info below. So you have admin access and then you can navigate to the shop archive page.

[Elvin]

Thanks, it helps a lot.

Here’s the approach I’d recommend to achieve the required result:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<div class="sold_out_loop_wrapper"><img src="https://brewmee.ch/quantity-testing/wp-content/plugins/coming-soon-for-woocommerce/assets/img/coming_soon_8.png"/></div>';
   }
});

I changed the <span> into an <img>.

I then style it with this CSS:

.sold_out_loop_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

Here’s the result: https://share.getcloudapp.com/GGu2W4K7

As for the single product image, I don’t think woocommerce_before_shop_loop_item_title will work.

You’ll have to refer to WooCommerce’s hook documentation on how to insert your custom markup for the single product page.

[nik9]

Hi Elvin

Cool. Works!

For Single product pages I can us this one:

add_action( 'woocommerce_product_thumbnails', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<div class="sold_out_loop_wrapper"><img src="https://xxxxx.ch/quantity-testing/wp-content/plugins/coming-soon-for-woocommerce/assets/img/coming_soon_8.png"/></div>';
   }
});

Is it possible that on hover on the product image the “Comming soon” image is not visible?

[Elvin]

Is it possible that on hover on the product image the “Comming soon” image is not visible?

1000000% possible.

we can use :hover for the sold_out_loop_wrapper.

Here’s an example:

.sold_out_loop_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.sold_out_loop_wrapper:hover{
    opacity: 1;
}

Here’s how it’ll look like: https://share.getcloudapp.com/eDuwylEn

Transition is added for animation easing but it is optional. Removing it should still work but it’ll just disappear immediately once you hover.

But if you wish to keep it but change the curve, you can use this as reference:
https://www.w3schools.com/css/css3_transitions.asp

[nik9]

Hi Elvin,

Okey.. But then the normal zoom effect is gone. How can we keep this?
https://share.getcloudapp.com/DOuoq4zz

Cheers.

[Elvin]

Okey.. But then the normal zoom effect is gone. How can we keep this?
https://share.getcloudapp.com/DOuoq4zz

You’ll have to pick between the 2 if you want to stick with just CSS or change the whole CSS thing with a script that uses the image as the event listener for the sold_out_loop_wrapper. This will require mouseover and mouseout eventlistener for that toggles display:none/block

Unfortunately, scripts are site customizations that outside of our scope.

But to help you out:

You can try something like this.

<script>

function coming_soon_toggle(){
    var wcgallery = document.querySelector('figure.woocommerce-product-gallery__wrapper'); //woocommerce photo wrapper
    var comingsoon = wcgallery.querySelector('div.sold_out_loop_wrapper'); // coming soon wrapper

    wcgallery.addEventListener("mouseout", function( event ) {   //hover out
        comingsoon.style.display = 'block'; //display it when not hovering
    }, false);

    wcgallery.addEventListener("mouseover", function( event ) {   //while hovering
        comingsoon.style.display = "none"; //remove from display on hover
    }, false);

}
window.addEventListener('DOMContentLoaded', function(){
    coming_soon_toggle(); //run the script after loading all elements
});

</script>

I’ve added comments on what the lines do. They’re optional and you can remove them if you want.

[nik9]

Hi Elvin,

Ah, I see. Cool! Thanks! works!

To be honest, the idea of doing this comes from a plugin, which can display “Coming soon” product. But in a very very basic level. So there is no feature of planned publishing its only a checkbox to display this “comming soon” image on a product thumbnail.

We now adjust thsi via PHP to on out of stock product. Very nice!

In notes you see a product, on which this is “coming soon” check box is activated. In notes you can see two product links. One is only with activated checkbox from the plugin and one is our custom snipped inkl. script.

As you maybe can see, there is a minimal difference betweenin the display: none on hover for the both “coming soon” images. With you script it is not as smooth as the other. Where do I have to adjust setting for this? In the script?

[David]

Hi there,

i am not able to access the first link it is private protected ?

[nik9]

Hello David,

Yes, the first product ist from the staging system. Below in notes is temporary admin access account if you use this, afterward you can browse the page to the product link.

[David]

It might just be me – but i am not seeing any real noticeable difference between the two.

[nik9]

Hi David,

The difference is the speed to hide. Its has something to do with comingsoon.style.display = "none"; I tried to change this to opacity 1s ease-in-out; but this does not work as expected.

[Elvin]

Where do I have to adjust setting for this? In the script?

We can adjust the script a bit to make it smoother. (add transition)

Try this:

<script>

function coming_soon_toggle(){
    var wcgallery = document.querySelector('figure.woocommerce-product-gallery__wrapper'); //woocommerce photo wrapper
    var comingsoon = wcgallery.querySelector('div.sold_out_loop_wrapper'); // coming soon wrapper
    comingsoon.style.transition = "opacity 1s ease-in-out"; // Added transition

    wcgallery.addEventListener("mouseout", function( event ) {   //hover out
        comingsoon.style.opacity = '1'; //display it when not hovering
    }, false);

    wcgallery.addEventListener("mouseover", function( event ) {   //while hovering
        comingsoon.style.opacity = "0"; //remove from display on hover
    }, false);

}
window.addEventListener('DOMContentLoaded', function(){
    coming_soon_toggle(); //run the script after loading all elements
});

</script>

I’ve added the transition property to smoothen the opacity change. I’ve also replaced display to opacity.

And yeah, it may be better to resort to plugins if you can find one as there’s a lot more thought that goes through in making them compared to this which a somewhat on-the-spot fix we come up when reading this topic. 😀

Note: This only applies on desktop. Tablets and phones uses a different eventlistener(touch events).

[nik9]

Hi elvin,

Cool! I made some transitions changes in speed to get close to the goal.
The transition is now very smooth. But now the image zoom box does not open when hovering over the coming soon image which on top of the product image. While hovering over the product image the zoom box opens but when hover over the coming soon image the zoom disappears.

I guess this happens because the display of the coming soon image is not “none” and still there, isn’t it?

<script>

function coming_soon_toggle(){
    var wcgallery = document.querySelector('figure.woocommerce-product-gallery__wrapper'); //woocommerce photo wrapper
    var comingsoon = wcgallery.querySelector('div.sold_out_loop_wrapper'); // coming soon wrapper
    comingsoon.style.transition = "opacity 0.1s ease-in-out"; // Added transition

    wcgallery.addEventListener("mouseout", function( event ) {   //hover out
        comingsoon.style.opacity = '1'; //display it when not hovering
    }, false);

    wcgallery.addEventListener("mouseover", function( event ) {   //while hovering
        comingsoon.style.opacity = "0"; //remove from display on hover
    }, false);

}
window.addEventListener('DOMContentLoaded', function(){
    coming_soon_toggle(); //run the script after loading all elements
});

</script>

This is the current CSS:

.sold_out_loop_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

[Author]

Posts