Hi guys I have created a form that works with wocommerce as a product. On the form a question has to be yes before the add to cart function shows. This is what I have researched so far to no avail!
I have disabled it with css on a specific product.
.postid-534 .single_add_to_cart_button { display: none !important; }
Then I have added this to my function.php
add_action('wp_footer', 'show_add_to_cart_after_radio_selection');
function show_add_to_cart_after_radio_selection() {
if ( is_product() && is_single(534) ) { // product ID
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Hide the Add to Cart button initially
var addToCartButton = document.querySelector('.single_add_to_cart_button');
// Get the radio button from the Formidable Form
var radioButton = document.querySelector('input[name="exf5o"]'); // actual Formidable field key
// Check if the radio button exists
if (radioButton) {
radioButton.addEventListener('change', function() {
if (radioButton.checked && radioButton.value === 'Yes') { // 'Yes' trigger the Add to Cart button
addToCartButton.style.display = 'block'; // Show the Add to Cart button
} else {
addToCartButton.style.display = 'none'; // Keep the button hidden if the condition is not met
}
});
}
});
</script>
<?php
}
}
It does not want to work
The input name, input[name="exf5o"], in your JavaScript is wrong. . An HTML field input name looks like this: input[name="item_meta[3]"]. Use your browser's inspection tool to get the correct input name for the radio button from the rendered HTML.
Please login or Register to submit your answer
Have you used the browser tools to step through the code or at least added console.log statements to see what's happening? "does not want to work" needs more detail.