/ Плагины / Кнопки WC

Кнопки WC

HIT

17.01.2018

2103

4

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

Если на сайте есть возможность предзаказа, то можно сделать условие и по выводу надписи Предзаказ:

// Изменение текста кнопок
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) ) {
		if ( $product->backorders_allowed() ) {
			return __( 'Предзаказ', 'woocommerce' );
		} else {
			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' ); }
}

В карточке:

// 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() ) {
			if ( $_product->backorders_allowed() ) {
				return __('Предзаказ', 'woocommerce');
			} else {
				return __('Добавить в корзину', 'woocommerce');
			}
		}
	}
	return __('Add to cart', '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).

Добавить кнопку Перейти в корзину

Добавим кнопку перехода в корзину для товаров которые уже есть в корзине (в шаблоне карточки товара)

function go_cart_button_single() {
	foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];

		if( get_the_ID() == $_product->get_ID() ) {
			echo '<a class="button go-cart" href="/cart/">Перейти в корзину</a>';
		}
	}
}

add_action( 'woocommerce_after_add_to_cart_button', 'go_cart_button_single' );

Изменить текст кнопки Оформление

// Изменить текст кнопки Оформление заказа
add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' );
function woo_custom_order_button_text() {
	return __( 'Перейти к оплате', 'woocommerce' );
}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Обзор плагинов по созданию скидок

Обзор плагинов по созданию скидок

Рассмотрим различные плагины по созданию функционала скидок. Рассматриваться будут плагины которые предоставляют возможность комплексного формирования скидок на состав корзины. Практически все плагины в обзоре могут в бесплатной версии предоставить простой Читать далее »

Отзывы к товарам

Отзывы к товарам

Рассмотрим различные аспекты такого функционала WC как отзывы к товарам. Изображения в отзывах Плагин YITH WooCommerce Advanced Reviews (6000) добавляет в комментарии поле изображение (можно добавлять несколько) и заголовок. Также Читать далее »

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

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

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

/

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

4 комментария

  1. Александр

    Здравствуйте, спасибо зам за мега полезную информацию. Скажите, в какой файл нужно вставить код проверки товара в корзине?

    1. Alexandr

      Здравствуйте! Если Вы про функционал «Товар уже в корзине», то эти функции нужно вставлять в functions.php.

  2. Александр

    Да, и в какой файл нужно добавить скрипт?

    1. Alexandr

      Скрипт добавляем в файл со всеми скриптами которые используем на сайте. Как подключать подобные файлы описано здесь.

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