Кнопки WC

17.01.2018

695

Давно хотел подробно разобрать тему с кнопками 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->get_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' ); } 
}

Я дополнил код проверкой товаров на наличие и указание цены

// Изменение текста кнопок
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->get_type();
	$product_price = $product->get_price();
	
    if ( $product->is_in_stock() && !empty($product_price) ) {
		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 __( 'Подробнее', 'woocommerce' );
		}		
    } else { return __( 'Подробнее', 'woocommerce' ); }
}

Иконки в тексте кнопок

Чтобы вставлять в вышеописанный код иконки в виде html символов, нужно в шаблоне woocommerce/loop/add-to-cart.php изменить строку

esc_html( $product->add_to_cart_text() )

на

htmlspecialchars_decode( $product->add_to_cart_text() )

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

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

// 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');
}

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

Решено: можно использовать дополненное выше решение, и отдельно сделать отбор товаров по отсутствию цены empty($product_price).

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Добавление полей при оформлении заказа

Добавление полей при оформлении заказа

Добавляем поля для шаблона Оформление заказа Woocommerce. Стандартные поля Woocommerce делятся на 3 группы: поля оплаты (billing) поля доставки (shipping) поля аккаунта (account) Добавляем текстовое поле в стандартные группы WC Читать далее »

/
Изменяем админку Woocommerce

Изменяем админку Woocommerce

В данной статье собираются сниппеты меняющие функционал или внешний вид админ части Woocommerce. Вернуть выпадающий список категорий С версии WC 3.2 изменился фильтр постов в админке, конкретно выбор категории. Теперь Читать далее »

Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/

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

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

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