Woocommerce добавить в корзину проверки скрыть предупреждение

Question

У меня есть woocommerce, одна страница продукта, вариационный продукт с двумя вариантами. Если некоторые из них (или ни одного) не отмечены, кнопка «Добавить в корзину» отключена, и у меня появляется предупреждение с сообщением. Как я понял это функция woocommerce_add_to_cart_validation . Мне нужно отключить предупреждение и показать это сообщение об ошибке перед количеством в корзине и кнопкой Добавить в корзину. Как я понял, это woocommerce_before_add_to_cart_button . Как я могу это сделать?

Я нашел несколько решений о том, как настроить поведение, но не нашел, как скрыть предупреждающее сообщение.

ОБНОВЛЕНИЕ

Я говорю о JS предупреждении, которое появляется, когда вы нажимаете sh Добавить в корзину, но с недопустимой формой варианта. Например, у меня есть продукт с размером и цветом. Я выбрал цвет, но забыл выбрать размер. Кнопка «Добавить в корзину» отключена, и если я нажму sh, появится предупреждение JS с сообщением, что мне нужно заполнить форму. Я хочу скрыть это всплывающее окно JS и поместить собственное сообщение об ошибке перед блоком add_to_cart_button.

Answer 1

https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/

/**
 * Add JavaScript code to page footer
 */
function my_script() {
    ?>
    <script type="text/javascript">
    jQuery( function($) {
        // Class Selector (“.class”) * https://api.jquery.com/class-selector/
        $( '.single_add_to_cart_button' ).click( function(e) {
            // The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).
            $( '.alert' ).append( '<p>My Alert</p>' );

            e.preventDefault(); // Stop the button
            return false; // Prevent the Alert from firing
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'my_script' );

/**
 * Add Text Before add to cart button
 */
function action_woocommerce_before_add_to_cart_button() {
    // this will print a div before the add to cart button
    echo '<div class="alert"></div>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'action_woocommerce_before_add_to_cart_button', 10, 0 );

Answer 2

Я продолжил исследовать эту проблему и обнаружил, что это оповещение пришло от / woocommerce / assets / js / frontend / add-to-cart-variation. js

I нашел эту функцию

    VariationForm.prototype.onAddToCart = function( event ) {
    if ( $( this ).is('.disabled') ) {
        event.preventDefault();

        if ( $( this ).is('.wc-variation-is-unavailable') ) {
            window.alert( wc_add_to_cart_variation_params.i18n_unavailable_text );
        } else if ( $( this ).is('.wc-variation-selection-needed') ) {
            window.alert( wc_add_to_cart_variation_params.i18n_make_a_selection_text );
        }
    }
};

Вторым является текущее оповещение. Поэтому я решил не переписывать этот прототип, а использовать более простое решение. У меня уже была пользовательская форма в мета-позиции одного продукта.

<script type="text/javascript">
jQuery( function($){
    $( '<span id="show_error">Please, fill all options!</span>' ).insertBefore( ".single_variation_wrap" );
    $('#show_error').hide();
    ...........

    $('.single_add_to_cart_button').on('click',function(e){
      if ( $( this ).is('.disabled') ) {
        e.preventDefault();
        if ( $( this ).is('.wc-variation-selection-needed') ) {
          $('#show_error').show();
          setTimeout(function () {
            $('#show_error').hide();
          }, 3000);
          return false;
        }
      }
    });


 });
</script>

Поэтому я добавил пользовательский блок диапазона для сообщения об ошибке, и теперь, если я забуду заполнить все параметры в форме, появится сообщение об ошибке. на три секунды. Это не лучшее решение, но оно работает очень хорошо!