Синхронизация нескольких кнопок ajax Add-to-cart на одном продукте Woocommerce

Question

Моя страница товара довольно длинная. Итак, я добавил по крайней мере три кнопки Buy на странице с коротким кодом ajax [add_to_cart id='123']

После добавления товара ссылка на корзину просмотра удаляется с

a.added_to_cart.wc-forward {
    display: none !important;
}

, и только текст ПОКУПКИ отображается, как и раньше, с

.add_to_cart_button.added  {
    display:  inline-block !important;
}

Я пытался добавить галочку перед кнопкой КУПИТЬ, но это не сработало. Я попробовал:

a.ajax_add_to_cart:visited:before {
   content:  "\2713 " !important;
}

1) Есть ли способ синхронизировать / связать эти три кнопки Добавить в корзину вместе. Итак, когда первый щелкается, другие тоже показывают галочку? Я полагаю, проблема в том, что у первого теперь другой класс, который .added а два других просто .ajax_add_to_cart

2) Как добавить галочку перед кнопкой добавления. Купить?

Любая помощь приветствуется.

Answer 1

Вы можете использовать jQuery для синхронизации ваших галочек на всех кнопках добавления в корзину.

1) галочка внутри кнопки (перед текстом кнопки)

Правила CSS:

a.added_to_cart.wc-forward {
    display: none !important;
}
.add_to_cart_button.added  {
    display:  inline-block !important;
}
.add_to_cart_button.added:before {
   content:  "\2713\00a0" !important;
}

PHP / jQuery (где вы замените 37 идентификатором вашего продукта) :

add_action('wp_footer', 'sync_multiple_add_to_cart_buttons' );
function sync_multiple_add_to_cart_buttons() {
    // Only on single product pages for a specific product
    if( is_product() && 37 == get_the_id() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        $(document.body).on('added_to_cart', function(){
            $('a.ajax_add_to_cart').each( function(){
                if( $(this).attr('data-product_id') == <?php echo get_the_id(); ?> && ! $(this).hasClass('added') )
                    $(this).addClass('added');
            });
        });
    });
    </script>
    <?php
    endif;
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.

---

2) Флажок снаружи перед кнопкой (используется fontawesome )

Правила CSS:

a.added_to_cart.wc-forward {
    display: none !important;
}
.add_to_cart_button.added  {
    display:  inline-block !important;
}

add_action('wp_footer', 'sync_multiple_add_to_cart_buttons' );
function sync_multiple_add_to_cart_buttons() {
    // Only on single product pages for a specific product
    if( is_product() && 37 == get_the_id() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        checkmark = '<i class="fas fa-check"></i>&nbsp;';
        $(document.body).on('added_to_cart', function(){
            $('a.ajax_add_to_cart').each( function(){
                if( $(this).attr('data-product_id') == <?php echo get_the_id(); ?> && ! $(this).hasClass('added') )
                    $(this).addClass('added').before(checkmark);
            });
        });
    });
    </script>
    <?php
    endif;
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.