Show/hide order notes on checkout page

  • Resolved imta2d

    (@xsux2bmex)


    1 year, 10 months ago

    I would like to keep the order notes textarea hidden until someone wants to add a comment on the checkout page. I have managed to frankenstein a solution that works, however, upon clicking the link to reveal the textarea it also triggers the submit button as it displays the woocommerce_error message: “Please read and accept the terms and conditions to proceed with your order.” and moves the screen up to see it.

    Can someone have a look at my code and see how to suppress the error and the subsequent movement of the page please?

    function md_custom_woocommerce_checkout_fields( $fields ) 
{
    $fields['order']['order_comments']['placeholder'] = 'Add comments about your order (optional)';
    $fields['order']['order_comments']['label'] = '<button id=\"comment\">Add a comment +</button>';

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'md_custom_woocommerce_checkout_fields' );


function showhide_enqueue() {
    if(is_page( 11 )) {
        wp_enqueue_script( 'ui', get_template_directory_uri() . '/js/ui/jquery-ui.min.js', [], '1.8', true);
        wp_add_inline_script( 'ui',
            'jQuery(window).load(function() {
                jQuery(document).ready(function() {
  jQuery("#comment").click(function() {
    jQuery(".woocommerce-additional-fields span.woocommerce-input-wrapper").toggle();
  });
});
            });' );
    }
}
add_action('wp_enqueue_scripts', 'showhide_enqueue');


add_action( 'wp_footer', 'show_hide_commentbox' );
function show_hide_commentbox() {
	if(is_page(11)) {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals .subtotal-coupon .coupon').toggle();
                $('.cart_totals .subtotal-coupon .add-coupon').text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}}
Viewing 1 replies (of 1 total)
  • Thread Starter imta2d

    (@xsux2bmex)

    Thanks anyway, I got it.

    add_action( 'move_order_notes', 'cwpai_move_order_notes_after_submit_button' );
function cwpai_move_order_notes_after_submit_button() {
    ?>
    <div class="order-notes">
        <label for="order_notes"><?php _e( 'Order Notes +', 'woocommerce' ); ?></label>
        <textarea name="order_notes" class="input-text" placeholder="<?php esc_attr_e( 'Add any notes or comments about your order here (optional)' ); ?>" id="order_notes" rows="2" cols="5" style="display:none;"></textarea>
    </div>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $(document).on('click', 'label[for="order_notes"]', function(){
                $('#order_notes').toggle();
            });
        });
    </script>
    <?php
}
Viewing 1 replies (of 1 total)
  • The topic ‘Show/hide order notes on checkout page’ is closed to new replies.