WooCommerce out of stock inquiry form

The following code will add a button to a product that is out of stock. Clicking the button will open a form. Example from Theme Twenty Twenty Two.

Single Individual Product Page Out of stock WooCommerce.
Single Individual Product Page Out of stock WooCommerce.

If product is not in stock then show button. Add a forms shortcode to the form that you use. Here is an example using Ninja Forms shortcode.

/* A variation of this tutorial: https://businessbloomer.com/woocommerce-show-inquiry-form-single-product-page-cf7/ */

add_action( 'woocommerce_single_product_summary', 'woocommerce_single_product_inquiry', 30 );

function woocommerce_single_product_inquiry() {
   global $product;
   if ( ! $product->is_in_stock() ) {
echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Let me know when this product is back in stock.</button>';
echo '<div id="product_inq" style="display:none">';
echo do_shortcode('[ninja_form id=1]');
echo '</div>';
   }
    else {
     return;
         }
}

/* Button trigger for open and close.  */
add_action( 'woocommerce_single_product_summary', 'inquiry_on_click_show_form_and_populate', 40 );
function inquiry_on_click_show_form_and_populate() {
?>
<script type="text/javascript">
jQuery('#trigger_cf').on('click', function(){
if ( jQuery(this).text() == 'Let me know when this product is back in stock.' ) {
jQuery('#product_inq').css("display","block");
jQuery('input[name="your-subject"]').val('<?php the_title(); ?>');
jQuery("#trigger_cf").html('Close the form');
} else {
jQuery('#product_inq').hide();
jQuery("#trigger_cf").html('Let me know when this product is back in stock.');
}
});
</script>
<?php

}

Result – showing a button with the words: “Let me know when this product is back in stock.”

Single Individual Product Page Out of stock button WooCommerce.
Single Individual Product Page Out of stock with button WooCommerce.

Clicking the button shows the form.

Single Individual Product Page Out of stock form WooCommerce.
Single Individual Product Page Out of stock form WooCommerce.

Changing the words “Out of stock”.

We might only want to change the words “Out of stock”. It can be done with this code.

/* https://www.templatemonster.com/help/woocommerce-how-to-change-in-stock-out-of-stock-text-displayed-on-a-product-page.html */
add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {

// Change In Stock Label - or just remove the word Available so that no word is seen when product is in stock.
if ( $_product->is_in_stock() ) {
$availability['availability'] = __('Available', 'woocommerce');
}
// Change Out of Stock Label
if ( ! $_product->is_in_stock() ) {
$availability['availability'] = __('Product not available', 'woocommerce');
}
return $availability;
}

Resources:

https://businessbloomer.com/woocommerce-show-inquiry-form-single-product-page-cf7/
https://www.templatemonster.com/help/woocommerce-how-to-change-in-stock-out-of-stock-text-displayed-on-a-product-page.html

Plugin:

wordpress.org/plugins/woocommerce-product-stock-alert

This tutorial was originally written 29 October 2019.

Share the article:

Leave a Reply

Your email address will not be published. Required fields are marked *