Как добавлять в корзину товары с помощью ajax?

316

22 марта 2017, 19:03

Подскажите, как настроить добавление товара в корзину с помощью ajax?
В магазине на основе плагина woocommerce используются стандартные шаблоны на всех страницах, а именно archive-product.php и для вывода товара content-product.php.
Других плагинов не установлено! В шапке есть такой код, который показывает количество товаров в корзине:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <title><?php wp_title();?> | <?php bloginfo('name'); ?></title>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="top-cart">
    <ul>
        <li>
            <a href="<?php echo wc_get_cart_url(); ?>">
                <span class="cart-icon"><i class="fa fa-shopping-cart"></i></span>
                <span class="cart-total">
                    <span class="cart-title"><?php _e( 'Cart', 'woocommerce' ); ?></span>
                    <span class="cart-item"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>- </span>
                    <span class="top-cart-price"><?php echo WC()->cart->get_cart_total(); ?></span>
                </span>
            </a>
        </li>
    </ul>
</div>

При нажатии на кнопку "Добавить в корзину" на одном из товаров, этот товар добавляется в корзину, но в шапке это изменение не видно. А если перезагрузить страницу, тогда в шапке видно, что количество товаров прибавилось на единицу.
Как сделать, чтобы при нажатии на "Добавить в корзину" в шапке было сразу видно, что количество увеличилось на один товар с помощью ajax?
Нужно ли что-то прописывать в файле functions.php для ajax?