Out-of-stock contact form button for WooCommerce

Our webshop needs a button added to every out-of-stock product page. I've tried adding the code below, but the button appears on all products, including those that are in stock. Can someone provide guidance on how to fix this issue?

Appreciate any help!

// Code to display an enquiry form on Woocommerce Single product pages

add_action( 'woocommerce_single_product_summary', 'enquiry_form', 30 ); 
function enquiry_form() { echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Request Price</button>'; echo '<div id="product_inq" style="display:none">'; echo do_shortcode('[wpforms id="1372"]'); echo '</div>'; } 
add_action( 'woocommerce_single_product_summary', 'enquiry_form_1', 40);
function enquiry_form_1() {
?>
<script type="text/javascript">
    jQuery('#trigger_cf').on('click', function(){
    if ( jQuery(this).text() == 'Vraag de prijs op' ) {
                jQuery('#product_inq').css("display","block");
        jQuery("#trigger_cf").html('Close');
    } else {
        jQuery('#product_inq').hide();
        jQuery("#trigger_cf").html('Request Price');
    }
    });
</script>
<?php    
}

Answer №1

Adding global $product; and utilizing this code

get_post_meta( $product->ID, '_stock_status', true );
allows you to retrieve the stock status of the product. You can then include an if statement to check if the product is in stock or out of stock. If it's in stock, you can proceed to execute the code that displays a button.

Feel free to test out this code:

// Implementing an inquiry form on your Woocommerce Single product page

add_action( 'woocommerce_single_product_summary', 'enquiry_form', 30 ); 
function enquiry_form() { 
global $product;
$stockStatus = get_post_meta( $product->ID, '_stock_status', true );

if ($stockStatus == "outofstock"){
echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Request Price</button>';
echo '<div id="product_inq" style="display:none">'; echo do_shortcode('[wpforms id="1372"]');
echo '</div>'; } 
}

add_action( 'woocommerce_single_product_summary', 'enquiry_form_1', 40);
function enquiry_form_1() {
?>
<script type="text/javascript">
    jQuery('#trigger_cf').on('click', function(){
    if ( jQuery(this).text() == 'Request Price' ) {
                jQuery('#product_inq').css("display","block");
        jQuery("#trigger_cf").html('Close');
    } else {
        jQuery('#product_inq').hide();
        jQuery("#trigger_cf").html('Request Price');
    }
    });
</script>
<?php    
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

retrieving the webpage's HTML content from the specified URL using AngularJS

Utilizing the $http.get('url') method to fetch the content located at the specified 'url'. Below is the HTML code present in the 'url': <html> <head></head> <body> <pre style = "word-wrap: break ...

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

Is there a way to enable data-add-back-btn using jQuery script?

Currently, I am utilizing jQuery 1.9.1 and jQuery Mobile 1.3.1 to define multiple pages within my project setup: <div id="q1" data-role="page" data-add-back-btn="false" data-back-btn-text="Home"> <div data-role="header" data-position="fixed" ...

What is the best way to display the information contained within a .nfo file on a website?

Does anyone know of a plugin or code that can display the content of a .nfo file on a webpage (html or php)? I want to create multiple web pages with individual .nfo files, but I'm not sure if this is achievable through coding or if there's a scr ...

When it comes to printing, the @media rule for portrait orientation will not be effective if landscape orientation is also indicated

My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window. test.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

Contrasting Viewport on Android in Landscape and Portrait Modes

I've been working on a mobile site and in order to test it, I've set up different emulators for Android and used an iPhone emulator as well. The issue I am facing is that when I call window.innerWidth upon orientation change on the iPhone, the vi ...

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

Angular has the feature of a right float button with *ngfor

I've successfully implemented a form using Reactive Forms in Angular. Currently, my form is displayed as follows: <div class="center" appMcard> <form [formGroup]="GroupRMPM_FG"> <div formArrayName="GroupId_Name" *ngFor="let ...

What is the best way to modify React state?

Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

"Choosing a div element using nth-child() method: a step-by-step guide

An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image. <section id="main-c ...

Adjust the size of the div to fit its content while maintaining the transition animation

I am aiming for the DIV height to automatically adjust to the text within it, while also maintaining a minimum height. However, when the user hovers their mouse over the DIV, I want the height to change smoothly without losing the transition effect. When ...

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

Is there a way to use JQuery/AJAX to extract the selected values from all drop-down menus within a designated container?

With the help of JavaScript, I am dynamically creating dropdown lists under dvContainer. My goal is to retrieve the selected values of all select elements within that container. Below is the HTML code generated through JavaScript: <div id="dvContai ...

Align the top navigation centered horizontally, with the logo on the left and language selection on the right

Is there a way to center my menu horizontally while keeping the logo aligned to the left and language selection to the right, all with consistent proportions when resizing? I've tried various suggestions but nothing seems to work for my navigation bar ...

Streaming video to multiple clients concurrently using NodeJS

We are currently facing an issue with serving a video stream. Due to the fact that HTML5 video tag does not support udp to multicast, we have been attempting to repurpose an existing ffmpeg stream and broadcast it to multiple responses. Unfortunately, thi ...

What is the method to determine the encoding that the user is using to input into the browser?

After reading Joel's insightful article about character sets, I have decided to follow his advice by using UTF-8 on both my web page and in my database. However, one thing that confuses me is how to handle user input. As Joel aptly points out, "It doe ...

How can I eliminate the spacing in CSS?

Seeking assistance to eliminate the extra space above the navbar. Can someone guide me through this? Here is my HTML code for reference: And here is my CSS code: ...

Achieving consistent width for flex items in each row

Can I ensure that all flex items have the same width? Currently, my code looks like this: .video-container { background-color: blue; min-height: 90vh; display: flex; flex-wrap: wrap; } .video { flex: 1 0 25%; } <div class="video-contain ...

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

When trying to call an Alertify Confirmation dialog within a running Bootstrap 4 Modal, I encountered an issue with the tab focus. It seems to be stuck in the last element and not working as expected. I suspect that this might have something to do with th ...