Доработка функционала интернет-магазина на Woocommerce

Основным преимуществом разработки интернет магазина на WooCommerce является его гибкость и относительно низкая стоимость обслуживания. Связка WordPress c WooCommerce представляет собой набор кода, который изменяется в зависимости от ваших потребностей. WooCommerce использует плагины для расширения технической функциональности и темы для внешнего отображения магазина.

Плагины и дочерняя тема

Основная проблема при обновлении ядра магазина и темы — потеря ранее сделанных изменений и перезапись существующих файлов. Существуют два способа доработки WooCommerce:

  • Плагины
  • Дочерняя тема

Дочерняя тема

Дочерняя тема необходима для изменения внешнего вида и функциональности магазина без внесения правок в родительскую тему. Использование дочерней темы позволяет относительно безболезненно обновлять основную тему без потери внешнего вида и доработок.

Как правило, каталог с темой содержит в себе файлы таблицы стилей CSS и файл function.php для доработки технической функциональности интернет магазина. Внесение правок в CSS также возможно и через настройки темы. Необходимо помнить, что код CSS, внесенный в настройках темы хранится в базе данных, а не в файле. Хорошим тоном, на наш взгляд, является перенос стилей в отдельный файл (не будет нагружать сайт).

Использование плагинов

Плагины — это способ расширить функциональность сайта без изменения его исходного кода. Написанный код в плагине добавляет в модуль интернет магазина новые функции, например редактор полей WooCommerce Checkout Editor или конструктор товаров WooCommerce Composite Box.

Большинство разработчиков предоставляет бесплатную и платную версию плагинов. Необходимость приобретения премиум версий зависит от соотношения стоимости и времени. В целом, знание PHP и наличие технической документации позволяет дорабатывать бесплатные версии самостоятельно.

Использование function.php

Файл function.php используется при необходимости создания новой функциональности заточенной под конкретный проект и в данный момент нереализованной плагинами.

Заключение

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

Мы занимаемся не только созданием интернет магазинов, используя ВордПресс и WooCommerce, но и технической поддержкой уже существующих магазинов. Если вам необходима помощь в разработке интернет магазина, свяжитесь с нами для обсуждения интересующих деталей и начала взаимовыгодного сотрудничества.

 

Продолжаем дорабатывать различные аспекты модуля Woocommerce — полезные хаки и решения:

 

Изменяем формат отображения цен для вариативных товаров

по умолчанию они отображаются в виде диапазона «100 – 200 грн», но мы можем сделать их в виде «от 100 грн»

сниппет будет работать как в каталоге товаров, так и на страницах самих товаров, учет всех форматирований цены и знака валюты

в functions.php используемого шаблона дописываем код:

add_filter( 'woocommerce_variable_price_html', 'truemisha_variation_price', 20, 2 );
 
function truemisha_variation_price( $price, $product ) {
 
	$min_regular_price = $product->get_variation_regular_price( 'min', true );
	$min_sale_price = $product->get_variation_sale_price( 'min', true );
	$max_regular_price = $product->get_variation_regular_price( 'max', true );
	$max_sale_price = $product->get_variation_sale_price( 'max', true );
 
	if ( ! ( $min_regular_price == $max_regular_price && $min_sale_price == $max_sale_price ) ) {
		if ( $min_sale_price < $min_regular_price ) {
			$price = sprintf( 'от <del>%1$s</del><ins>%2$s</ins>', wc_price( $min_regular_price ), wc_price( $min_sale_price ) );
		} else {
			$price = sprintf( 'от %1$s', wc_price( $min_regular_price ) );
		}
	}
 
	return $price;
 
}

Вариант 2 без сложностей кодирования, использовать плагин WooCommerce Variation Price или WooCommerce Variation Price Hints.

 

Изменение разделителя хлебных крошек

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
// Change the breadcrumb delimeter from '/' to '>'
$defaults['delimiter'] = ' → ';
return $defaults;
}

 

Изменить заголовки товаров в каталоге

// Change woocommerce-loop-product__title From H2 to H6
remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );
function soChangeProductsTitle() {
echo '<span class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</span>';
}

 

Woocommerce SEO — Noindex для архива ‘Упорядочить по’

// Woocommerce SEO - Noindex 'Order by' archive
add_action( 'wp_head', 'cp_prevent_indexing_orderby' );
if(!function_exists('cp_prevent_indexing_orderby')){
function cp_prevent_indexing_orderby () {
if (isset($_GET['orderby'])){
echo '<meta name="robots" content="noindex, nofollow">';
}
}
}

 

Woocommerce замена знака валюты на буквы, например с символа ₴ в грн

add_filter( 'woocommerce_currencies', 'add_my_currency' );
function add_my_currency( $currencies ) {
$currencies['UAH'] = __( 'Українська гривня', 'woocommerce' );
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'UAH': $currency_symbol = 'грн'; break;
}
return $currency_symbol;
}}

 

Общий вес заказа

Чтобы выводить общий вес заказа, нужно в шаблонах cart-totals.php (в корзине) и/или review-order.php (в заказе) добавить следующий код (перед закрывающим тегом таблицы /table):

<tr class="total-weight">
	<?php global $woocommerce; ?>
	<th><?php _e('Общий вес', 'woocommerce'); ?></th>
	<td><?php
		$total_weight = $woocommerce->cart->cart_contents_weight;
		$total_weight .= ' '.get_option('woocommerce_weight_unit');
		echo $total_weight; 
	?></td>
</tr>

Автообновление корзины, при изменении количества

 

// Автоматическое обновлении корзины, при изменении количества товаров
add_action( 'wp_footer', 'cart_update_qty_script' );

function cart_update_qty_script() {
	if (is_cart()) :
	?>
		<script>
		jQuery('div.woocommerce').on('change', '.qty', function(){
			jQuery("[name='update_cart']").trigger("click");
		});
		</script>
	<?php
	endif;
}

 

Нельзя убирать input «Обновить», если он не нужен его надо просто скрыть display: none, без него обновление не работает

Более правильное поведение обновления: только когда пройдет секунда после внесения изменений, а не во время их.

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
	if (is_cart()) :
		?><script>
		let tmpTimer = undefined;
		$('div.woocommerce').on("change", ".qty", function() {
			clearTimeout(tmpTimer)
			tmpTimer = setTimeout(() => {
				jQuery("[name='update_cart']").trigger("click");
				tmpTimer = undefined
			}, 1000);
		})
		</script><?php
	endif;
}

Не показывать остатки (В наличие)

Не показывать количество товара, ограничившись надписью В наличие

// Настройка отображения наличия товара

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {
    
    // Change In Stock Text
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('В наличие', 'woocommerce');
    }
    // Change Out of Stock Text
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('Нет в наличие', 'woocommerce');
    }
    return $availability;
}

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

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {
    if ( $_product->is_in_stock() ) {
		if ( $_product->backorders_allowed() && $_product->get_stock_quantity() <= 0 ) {
			$availability['availability'] = __('<i class="fa fa-clock-o"></i> Под заказ, cрок поставки товара от 3 до 12 дней', 'woocommerce');
    	} else {
        	$availability['availability'] = __('<i class="fa fa-check-circle"></i> В наличии', 'woocommerce');
		}
    }
    if ( !$_product->is_in_stock() ) {
        $availability['availability'] = __('<i class="fa fa-times-circle"></i> Нет в наличии', 'woocommerce');
    }

    return $availability;
}

Также можно добавить интересное уведомление о наличии, если остался один товар в наличии:

if ( $_product->get_stock_quantity() == '1' ) {
   $availability['availability'] = __('<i class="fa fa-clock-o" aria-hidden="true"></i> Последний товар', 'woocommerce');
}

Если у нас в каталоге выведено поле количество, а товар в наличии остался все один, поле количество исчезает автоматически, вместо него можно вывести текст:

// Текст вместо кнопок количества, если последний товар
function woocommerce_last_stock_product() { 
	global $product;
	if ( $product->get_stock_quantity() == '1' ) {
        echo '<p class="laststock">Последний товар</p>';
    }
};
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_last_stock_product', 7 );

Поле количество, которое не выводиться, лучше скрывать более надежно (чем opacity: 0;):
.quantity.hidden {display: none;}

И еще одно уведомление о товаре Под заказ (включен backorder):

// Изменение текста кнопок
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 ( !empty($product_price) ) {
		
		if ( $product->get_stock_quantity() > 0 ) {
			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 __( 'Выбрать', 'woocommerce' ); break;
				default: return __( 'Подробнее', 'woocommerce' );
			}			
		} elseif ( $product->backorders_allowed() ) {
			return __( 'Под заказ', 'woocommerce' );
		} else {
			return __( 'Нет в наличии', 'woocommerce' );
		}
		
    } else { return __( 'Подробнее', 'woocommerce' ); }
}

Автоматическая нумерация строк корзины

Если нам нужно реализовать автоматическую нумерацию строк наименований корзины, нужно сделать следующее:

1. В файле шаблона woocommerce/cart/cart.php добавить в таблицу <th class=»product-number»>№</th>
2. Прописать CSS

/* Нумерация строк */

.cart {border-collapse: collapse; counter-reset: schetchik;}

.cart tbody tr {counter-increment: schetchik;}

.cart td, .cart tbody tr:before {text-align: center; border: 1px solid #ccc;}

.cart tbody tr:before {display: table-cell; vertical-align: middle;}

.cart tbody tr:before, .cart b:after {content: counter(schetchik);}

Выводить пустой рейтинг

Чтобы выводить пустой рейтинг в шаблоне товара достаточно в файле single-product/rating.php отключить проверку (//)

if ( $rating_count > 0 ) :

endif;

Для того чтобы рейтинг выводился в шаблоне архива, используем такую функцию

// Woocommerce rating stars always
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
add_action('woocommerce_after_shop_loop_item_title', 'get_star_rating', 2 );

function get_star_rating() {
	global $woocommerce, $product;
	$average = $product->get_average_rating();
	echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>';
}

В данном случае товары с пустым рейтингом будут выводиться с пятью пустыми звездами. Но можно сделать проверку и пустой рейтинг как-либо оформить по особенному

function get_star_rating() {
	global $woocommerce, $product;
	$average = $product->get_average_rating();

	if($average > 0) { echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>'; }
	else { echo '<div class="star-rating rating-empty"></div>'; }
}

Теперь у блока с пустым рейтингом появился дополнительный класс — rating-empty. Можно задать ему любые свойства css. Например .rating-empty:before {color: whitesmoke !important;}, рейтинг будет едва виден.

Убрать «Подытог»

// Убираем строку «Подытог»
add_filter( 'woocommerce_get_order_item_totals', 'adjust_woocommerce_get_order_item_totals' );

function adjust_woocommerce_get_order_item_totals( $totals ) {
  unset($totals['cart_subtotal']  );
  return $totals;
}

Изменить изображение placeholder

// Изменить миниатюру NO-IMAGE
add_action( 'init', 'custom_fix_thumbnail' );
 
function custom_fix_thumbnail() {
add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src');
   
	function custom_woocommerce_placeholder_img_src( $src ) {
	$upload_dir = wp_upload_dir();
	$uploads = untrailingslashit( $upload_dir['baseurl'] );
	$src = $uploads . '/2017/01/placeholder2.png';
	 
	return $src;
	}
}

Убрать скобки с счетчиков товаров

Убираем круглые скобки с счетчиков товаров в виджете Категории товаров

function categories_postcount_filter ($variable) {
   $variable = str_replace('(', '<span class="post_count"> ', $variable);
   $variable = str_replace(')', ' </span>', $variable);
   return $variable;
}
add_filter('wp_list_categories','categories_postcount_filter');

Убрать скобки в выводе категорий в архивах

function archive_postcount_filter ($variable) {
   $variable = str_replace('(', ' ', $variable);
   $variable = str_replace(')', ' ', $variable);
   return $variable;
}
add_filter('get_archives_link', 'archive_postcount_filter');

Убираем скобки счетчиков товаров в виджете Фильтр по атрибутам

function archive_postcount_filter ($variable) {
   $variable = str_replace('(', ' ', $variable);
   $variable = str_replace(')', ' ', $variable);
   return $variable;
}
add_filter('woocommerce_layered_nav_count', 'archive_postcount_filter');
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии