Шпаргалка по WooCommerce

В этой статье буду перечислять всевозможные решения которые базово используются при работе с WooCommerce. Для кого-то это может быть своеобразным чек-листом, например когда вы будете делать интеграцию своей темы (или вёрстки) на WordPress WooCoommerce, поэтому рекомендую добавить в закладки браузера чтобы не потерять. Большую часть из примеров нужно добавлять в файл function.php вашей темы.

Включение поддержки WooCommerce в вашей теме

function theme_name_woocommerce_setup()
{
    add_theme_support(
        "woocommerce",
        array(
            "thumbnail_image_width" => 150,   // размер thumbnail
            "single_image_width"    => 300,   // размер изображений товара
            "product_grid"          => array( // параметры вывода товаров на страницах архивов
                "default_rows"      => 3,
                "min_rows"          => 1,
                "default_columns"   => 4,
                "min_columns"       => 1,
                "max_columns"       => 6,
            ),
        )
    );
    add_theme_support("wc-product-gallery-zoom");     # Увеличение изображений
    add_theme_support("wc-product-gallery-lightbox"); # Модальные окна
    add_theme_support("wc-product-gallery-slider");   # Слайдер изображений
}
add_action("after_setup_theme", "theme_name_woocommerce_setup");

Отключение встроенных стилей WooCommerce

// Отключение стилей WooCommerce по умолчанию
add_filter("woocommerce_enqueue_styles", "__return_empty_array");

Вывести шорткод в шаблоне темы

В нужном месте темы указать:

<?php echo do_shortcode('[название шорткода]'); ?>

Вывести список товаров в шаблоне темы с помощью шорткода

Данный пример выводит 5 товаров с помощью такого простого шорткода:

<?php echo do_shortcode('[products limit="5" columns="5" category="111" paginate="true"]'); ?>

Так как мы указали в шорткоде limit=”5″ – выводится только 5 товаров. Значение paginate=”true” выводит постраничную навигацию (1,2,3…), т.е. на каждой странице будет по 5 товаров.

Вывести последние 10 товаров в шаблоне на главной (или другой) странице через PHP

Пример ниже выводит 10 последних записей в любом месте вашего шаблона:

<?php
	$loop = new WP_Query( array(
		'post_type' => 'product',
		'posts_per_page' => 10,
		'orderby' => 'date',
		'order' => 'DESC',
	));
	while ( $loop->have_posts() ): $loop->the_post(); ?>
	<div class="product-card__item">
		<div class="product-card__img">
			<?php the_post_thumbnail("thumbnail-215x300"); ?>
		</div>
		<div class="product-card__info">
			<h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
			<div class="product-card__price">
				<?php woocommerce_template_loop_price(); ?>
			</div>
			
			<div class="product-card__footer">
				<?php woocommerce_template_loop_add_to_cart(); ?>
			</div>
		</div>
	</div>
<?php endwhile; ?>

Немного разберем параметры товаров в коде:

‘posts_per_page’ => 10 – говорит о том, что нужно выводить только 10 товаров. Вместо 10 можем указать любую цифру

‘orderby’ => ‘date’ – указывает что сортировать товары следует по дате добавления (т.е. последние добавленные товары, новинки). Также вместо date мы можем указать следующие значения: rand (сортировка случайным образом), title (по заголовку товара), popularity (по количеству продаж), id (по идентификатору товара), rating (по отзывам и оценкам).

‘order’ => ‘DESC’ – говорит о том, что вывод товаров должен производится по убыванию (вместо DESC можно написать ASC, чтобы вывести товары по возрастанию).

Вывести 10 последних товаров со своим HTML-шаблоном

Для того, чтобы вывести 10 последних товаров в WooCommerce со своим HTML-шаблоном вы можете воспользоваться следующим примером:

<?php
$args = array(
    'post_type' => 'product',
    'posts_per_page' => 10,
    'orderby' => 'date',
    'order' => 'DESC'
);

$products = new WP_Query( $args );

if ( $products->have_posts() ) :
    while ( $products->have_posts() ) : $products->the_post();
        ?>
        <div class="product">
            <h2><?php the_title(); ?></h2>
            <div class="image">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="description">
                <?php the_excerpt(); ?>
            </div>
            <div class="price">
                <?php echo wc_price( get_post_meta( get_the_ID(), '_regular_price', true ) ); ?>
            </div>
        </div>
        <?php
    endwhile;
endif;

wp_reset_postdata();
?>

Выбор количества товаров рядом с кнопкой добавления в корзину

В function.php вашей темы заносим следующий пример:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
		$html .= woocommerce_quantity_input( array(), $product, false );
		$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
		$html .= '</form>';
	}
	return $html;
}

Также предлагаю вывести кнопки “плюс” и “минус”, при нажатии на которые будет увеличиваться количество в поле. Для этого добавляем в function.php вашей темы следующий пример:

add_action( 'woocommerce_before_quantity_input_field', 'quantity_plus', 25 );
add_action( 'woocommerce_after_quantity_input_field', 'quantity_minus', 25 );
 
function quantity_plus() {
	echo '<button type="button" class="quantity_plus">+</button>';
}
 
function quantity_minus() {
	echo '<button type="button" class="quantity_minus">-</button>';
}

После этого вы увидите кнопки рядом с полем выбора количества. Но для того, чтобы заставить их работать нам необходимо добавить следующий JS-скрипт:

// при клике на кнопки
$( 'body' ).on( 'click', 'button.quantity_plus, button.quantity_minus', function() {
 
	var qty = $(this).parent().find( 'input' ),
	    val = parseInt( qty.val() ),
	    min = parseInt( qty.attr( 'min' ) ),
	    max = parseInt( qty.attr( 'max' ) ),
	    step = parseInt( qty.attr( 'step' ) );
 
	// дальше меняем значение количества в зависимости от нажатия кнопки
	if ( $( this ).is( '.quantity_plus' ) ) {
		if ( max && ( max <= val ) ) {
			qty.val( max );
		} else {
			qty.val( val + step );
		}
	} else {
		if ( min && ( min >= val ) ) {
			qty.val( min );
		} else if ( val > 1 ) {
			qty.val( val - step );
		}
	}
 
});

Список буду регулярно пополнять, но можете дополнительно запрашивать примеры в комментариях под этой записью.