Блог

Страница моего продукта довольно длинная. Итак, я добавил по крайней мере три кнопки покупки на страницу с помощью шорткода 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) Как мне добавить галочку перед кнопкой .added КУПИТЬ?

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

Вы можете использовать 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:  "27130a0" !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() amp;amp; 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(); ?> amp;amp; ! $(this).hasClass('added') )
                    $(this).addClass('added');
            });
        });
    });
    </script>
    <?php
    endif;
}
  

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

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() amp;amp; 37 == get_the_id() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        checkmark = '<i class="fas fa-check"></i>amp;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(); ?> amp;amp; ! $(this).hasClass('added') )
                    $(this).addClass('added').before(checkmark);
            });
        });
    });
    </script>
    <?php
    endif;
}
  

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