产品缺货时删除按钮 Elementor PRO/Woocommerce

Question

I'd really appreciate some help if anyone knows the solution :)

I set up Product page template in Elementor Pro for Woocommerce product. I added a custom button there "Reserve now" (class .reserve-button) which opens a stripe payment form. I'd like to hide this button if the product is out of stock.

I've tried a dozen of different solutions and searched through lot of fourms, but Im really stuck :(

Here is one of them:

add_action( 'woocommerce_before_add_to_cart_button', function() {
global $product;
if ( !$product->is_in_stock() ) {?>
<style>
.reserve-button {
display: none;}
</style> <?php 
}

});

Thank you in advance!

Answer 1

It seems every conditions you made properly but one thing that you missed is you added with a wrong action, because the woocommerce_before_add_to_cart_button action only fire when the button is enable, as you are checking with out of stock product and in that product there is no add to cart button, so your action is not fired ever. What you can do to add any other action like my code

add_action( 'woocommerce_single_product_summary', function() {
    global $product;
    if ( !$product->is_in_stock() ) {?>
        <style>
        .reserve-button {
            display: none;
        }
        </style> <?php  
    }
    
});

Here I have added the style with the product summary action. You can choose any other action but not add to cart related any actions. Hope it will work for you. https://prnt.sc/5fGq-RFcaEFn .