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

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

Home Forums Support insert image on top of product thumbnail if product is sold out

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1579481
    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;
    }
    #1579587
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1579617
    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.

    #1579658
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1579709
    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?

    #1579718
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1579798
    nik9

    Hi Elvin,

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

    Cheers.

    #1579832
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1579889
    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?

    #1580358
    David
    Staff
    Customer Support

    Hi there,

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

    #1580383
    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.

    #1580720
    David
    Staff
    Customer Support

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

    #1581029
    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.

    #1581050
    Elvin
    Staff
    Customer Support

    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).

    A wise man once said:
    "Have you cleared your cache?"

    #1581067
    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%;
    }
Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.