Кнопки WC

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

Редирект в Оформление

Чтобы при добавлении товара в корзину сразу происходил редирект, нужно сделать 2

1. Включить чекбокс Перенаправить в корзину после успешного добавления в настройках Woocommerce > Товары.

2. Добавить функцию:

// Редирект в оформление при добавлении товара
add_filter('add_to_cart_redirect', 'lw_add_to_cart_redirect');
function lw_add_to_cart_redirect() {
	global $woocommerce;
	$lw_redirect_checkout = $woocommerce->cart->get_checkout_url();
	return $lw_redirect_checkout;
}

[site-socialshare]