Кнопки WC

17.01.2018

492

Давно хотел подробно разобрать тему с кнопками WC. Кнопки меняют свой вид и функционал в зависимости от типа продукта, наличия, и других факторов. Так же в движке магазина Woocommerce множество других кнопок не относящихся непосредственно к товарам (перейти в корзину, перейти к оформлению и т.д.).

Ajax кнопка В корзину в карточке товара

Из коробки кнопка В корзину при добавлении товара обновляет страницу. Изменим это, добавив Ajax. Данный функционал я почерпнул на сайте http://elartica.com. Работает как для простого товара, так для вариативного.

Добавляем скрипт:

var $warp_fragment_refresh = {
    url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_refreshed_fragments' ),
    type: 'POST',
    success: function( data ) {
        if ( data && data.fragments ) {

            $.each( data.fragments, function( key, value ) {
                $( key ).replaceWith( value );
            });

            $( document.body ).trigger( 'wc_fragments_refreshed' );
        }
    }
};

$('.entry-summary form.cart').on('submit', function (e)
{
    e.preventDefault();

    $('.entry-summary').block({
        message: null,
        overlayCSS: {
            cursor: 'none'
        }
    });

    var product_url = window.location,
        form = $(this);

    $.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result)
    {
        var cart_dropdown = $('.widget_shopping_cart', result)

        // update dropdown cart
        $('.widget_shopping_cart').replaceWith(cart_dropdown);

        // update fragments
        $.ajax($warp_fragment_refresh);

        $('.entry-summary').unblock();

    });
});

Меняем в шаблоне woocommerce/single-product/add-to-cart/simple.php строку

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

на

<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" />
<button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

Если в магазине у нас только простые товары (без вариативных), то можно сделать еще проще — установить кнопку с шаблона архива:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );

Надписи на кнопках в каталоге

// Изменение текста кнопок
add_filter( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' );
function custom_woocommerce_product_add_to_cart_text() {
	global $product;
	$product_type = $product->product_type;
	
	switch ( $product_type ) {
		case 'external':
			return __( 'Buy product', 'woocommerce' );
		break;
		case 'grouped':
			return __( 'View products', 'woocommerce' );
		break;
		case 'simple':
			return __( 'Add to cart', 'woocommerce' );
		break;
		case 'variable':
			return __( 'Select options', 'woocommerce' );
		break;
		default:
			return __( 'Read more', 'woocommerce' );
	}
}

Товар уже в корзине

Чтобы изменить текст кнопки В корзину, если товар уже добавлен, используем функции:

// Change the add to cart text on single product pages
add_filter('woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text');
function woo_custom_cart_button_text() {
	
	foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];
	
		if( get_the_ID() == $_product->get_ID() ) {
			return __('Already in cart - Add Again?', 'woocommerce');
		}
	}
	
	return __('Add to cart', 'woocommerce');
}

// Change the add to cart text on product archives
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );
function woo_archive_custom_cart_button_text() {
	
	foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];
	
		if( get_the_ID() == $_product->get_ID() ) {
			return __('Already in cart', 'woocommerce');
		}
	}
	
	return __('Add to cart', 'woocommerce');
}

Текст кнопки для товара у которого нет цены

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Апселлы и кросселы

Апселлы и кросселы

У Woocommerce есть функционал Апселлы и Кросселы. Апселлы Апселлы — лучшие товары которые вы бы рекомендовали в замен данному. К примеру, товары которые лучше по качеству или каким-то другим характеристикам, Читать далее »

WooCommerce and 1C:Enterprise

WooCommerce and 1C:Enterprise

Разбираем на элементы плагин WooCommerce and 1C:Enterprise/1С:Предприятие Data Exchange. Плагин дает функционал обмена данными между сайтом и программой 1С: Предприятие. Некоторые моменты синхронизации сайта с 1С описаны в статье Интеграция Читать далее »

Статусы заказов

Статусы заказов

Как и любой интернет-магазин Woocommerce присваивает заказам определенные статусы в зависимости от отплаты и формирования заказа. Существует 7 различных статусов заказа: В ожидании оплаты (Pending payment) Обработка (Processing) На удержании Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Кнопки WC
Взаимодействие форм и scripts
Рекомендации для васВзаимодействие форм и scriptsOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.