Как с помощью кода совместить тему WordPress с WooCommerce

Сниппет для темы WordPress

Итак, вы решили добавить в свою тему магазин – замечательно! Плагин WooCommerce – это отличный выбор. Если посмотреть с технической точки зрения, то абсолютно все темы должны быть с ним совместимы. Теоретически в WordPress любой плагин должен работать с любой темой (если она должным образом построена).

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

Важная информация: некоторые из указанных ниже сниппетов используют опции, доступные только в WooCommerce, поэтому убедитесь, что они не просто вставлены в файл functions.php. Если вы собираетесь поделиться своей темой с другими пользователями или продать её, убедитесь, что сниппеты из файла загружаются только тогда, когда плагин WooCommerce активен.

Проверить, включён ли WooCommerce

С помощью данного сниппета можно задать значение пользовательской константы, используемой для проверки того, включён или нет WooCommerce. Так можно будет добавлять файлы или выполнять функции только при активном WooCommerce (см. важную информацию выше).

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

Известить о поддержке WooCommerce

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

add_action( 'after_setup_theme', function() {
	add_theme_support( 'woocommerce' );
} );

Удалить стили WooCommerce

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

Следующий сниппет предназначен для удаления абсолютно всех стилей WooCommerce:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Этот сниппет является примером того, как можно удалять стили CSS в зависимости от условий:

function wpex_remove_woo_styles( $styles ) {
	unset( $styles['woocommerce-general'] );
	unset( $styles['woocommerce-layout'] );
	unset( $styles['woocommerce-smallscreen'] );
	return $styles;
}
add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

Удалить название магазина

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

add_filter( 'woocommerce_show_page_title', '__return_false' );

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

Если архивные заголовки отображаются с помощью функций archive_title() или get_archive_title(), то, настроив фильтр, вы сможете заменить их на страницу товара.

function wpex_woo_archive_title( $title ) {
	if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
		$title = get_the_title( $shop_id );
	}
	return $title;
}
add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Изменить количество товаров на страницу

Этот код поможет изменить количество товаров, показываемых на отдельной странице магазина.

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 12;
}
add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Изменить количество столбцов

WooCommerce устроен так, что нельзя просто перенастроить фильтр ‘loop_shop_ columns’, необходимо также вставить особые классы для столбцов в тег `body`. В то время, как шорткоды Woo заключены в теги `div` с нужными классами, в страницах магазина это отсутствует, поэтому требуются две функции.

// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
	return 4;
}
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Изменить стрелки навигации Следующий/Предыдущий

Этот сниппет позволит вам настроить стрелки навигации соответственно вашей теме.

function wpex_woo_pagination_args( $args ) {
	$args['prev_text'] = '<i class="fa fa-angle-left"></i>';
	$args['next_text'] = '<i class="fa fa-angle-right"></i>';
	return $args;
}
add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

Изменить текст значка продажи

Очень полезен на многоязычных сайтах.

function wpex_woo_sale_flash() {
	return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Изменить столбцы миниатюр в галерее товаров

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

function wpex_woo_product_thumbnails_columns() {
	return 4;
}
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Изменить количество отображаемых похожих товаров

Позволяет изменить число похожих товаров, показываемых на странице товаров.

// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
	$args['posts_per_page'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Изменить количество столбцов для секций похожих и популярных товаров

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

// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
	return 4;
}
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
	$args['columns'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
	if ( is_singular( 'product' ) ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Добавить в меню динамическую ссылку на корзину и стоимость товаров в корзине

Этот сниппет позволит отображать в меню стоимость товаров в корзине. К тому же, при включённом Font-Awesome на сайте будет отображаться маленький значок в виде сумки.

Важная информация: эти опции не должны быть заключены в is_admin(), поскольку они используют AJAX для обновления стоимости. Необходимо убедиться в доступности функций, когда is_admin() выдаёт True и False.

// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

	// Make sure your change 'wpex_main' to your Menu location !!!!
	if ( $args->theme_location === 'wpex_main' ) {

		$css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
		
		if ( is_cart() ) {
			$css_class .= ' current-menu-item';
		}

		$items .= '
<li class="' . esc_attr( $css_class ) . '">';

			$items .= wpex_menu_cart_item();

		$items .= '</li>

';

	}

	return $items;

}
add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 );

// Function returns the main menu cart link
function wpex_menu_cart_item() {

	$output = '';

	$cart_count = WC()->cart->cart_contents_count;

	$css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count );

	if ( $cart_count ) {
		$url  = WC()->cart->get_cart_url();
	} else {
		$url  = wc_get_page_permalink( 'shop' );
	}

	$html = $cart_extra = WC()->cart->get_cart_total();
	$html = str_replace( 'amount', '', $html );

	$output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">';

		$output .= '<span class="fa fa-shopping-bag"></span>';

		$output .= wp_kses_post( $html );

	$output .= '</a>';

	return $output;
}


// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
	$fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item();
	return $fragments;
}
add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Заключение

WooCommerce по умолчанию работает с любой темой, но вы легко можете добавить в него некоторые дополнительные функции для лучшего соответствия теме. Вы можете купить тему, чтобы иметь возможность взглянуть на то, как всё это сделано (см. файлы в wpex-new-york/inc/woocommerce). Этот простой способ позволит вам, используя уже готовую тему, правильно добавить различные функции в магазин WooCommerce.

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

Понравилась статья? Поделись с друзьями:
Добавить комментарий
Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

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