-1

I have an ecommerce store with a cart page that displays a custom shipping option called "Freight Quote (Email Us)". However, I would like to execute some short code on my site that will display a contact form so the user can easily fill out required details in order to get a freight quote. Below is what my page currently looks like:

enter image description here

After adding a code snippet in my plugin I managed to get the form to fire, but it is firing as soon as the page loads and then goes away whenever any of the other options are selected.

enter image description here

Here is the code snippet I added to get the above to show:

    <?php

add_action( 'woocommerce_after_shipping_rate', 'checkout_shipping_additional_field', 20, 2 );
function checkout_shipping_additional_field( $method, $index )
{
    if( $method->get_id() == 'request_shipping_quote' ){
        echo do_shortcode('[ws_form id="1"]');
    }
}

?>

To reiterate the problem, I am able to execute short code to get my contact form to show, but it only shows once the cart page loads and then immediately disappears whenever any of the shipping options are selected. I only want it to execute when "Freight Quote (Email Us)" is selected and re-show it everytime a user clicks off/back on again.

Data Dill
  • 353
  • 4
  • 14
  • Are you sure that form is working? I mean did you try to submit a form or proceed with checkout? Because in woo-commerce checkout is already wrap inside `form` tag and you also add your form which I assume have `form` tag and this is not valid HTML you can read more here - [Is it valid to have an HTML form inside another HTML form?](https://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form) – Bhautik Dec 14 '21 at 06:25
  • I actually did not even try to submit. It does indeed work/send after testing, but upon clicking.. it actually navigates to a random page (mysite.com/wp-json/ws-form/v1/submit) that displays the JSON. – Data Dill Dec 14 '21 at 22:32

1 Answers1

0

I would suggest you use the woocommerce_cart_totals_after_shipping hook.

function show_form_woocommerce_cart_totals_after_shipping(){
    echo do_shortcode('[ws_form id="1"]');
}
add_action( 'woocommerce_cart_totals_after_shipping', 'show_form_woocommerce_cart_totals_after_shipping', 20 );

for more info, you can check here WooCommerce Visual Hook Guide: Cart Page

You can use the updated_shipping_method trigger which is defied by woocommerce. check here

function show_hide_form_based_on_shipping(){
    ?>
    <script type="text/javascript">
        (function($){

            $( document.body ).on( 'updated_shipping_method', function(){
                
                var shipping_method = $('.shipping_method:checked').val();

                if( shipping_method == 'your-shipping-method-id' ){
                    $('.wsf-form').show();
                }else{
                    $('.wsf-form').hide();
                }
                
            } );

        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'show_hide_form_based_on_shipping', 10, 1 );
Bhautik
  • 11,125
  • 3
  • 16
  • 38
  • If I focus on the first part of your code only, why can't I get the modal to show? If I am understanding correctly, we create a custom function that calls my shortcode. Immediately after we create the function, the add_action and hook of woocommerce_cart_totals_after_shipping should immediately fire our custom function on page load, but that is not happening. I see nothing. – Data Dill Dec 14 '21 at 22:44