因此，您想在主题中添加一家商店-太棒了！WooCommerce是一个不错的选择。从技术上讲，  所有主题都是“ WooCommerce兼容”的，因为它是一个插件。从理论上讲，任何插件都可以与任何WordPress主题（正确编码）一起使用。

作为主题开发人员，您可能希望调整WooCommerce的输出以更好地适合您的主题，或为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 CSS

我个人更愿意覆盖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产品库，缩放和灯箱（v3.0 +）

在WooCommerce 3.0中，他们引入了新的产品库，缩放和灯箱。如果要在主题中使用它们，则必须通过“ add_theme_support”全部启用。

add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

删除店铺名称

许多主题已经具有显示档案标题的功能，因此此代码从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' );

更改产品相关和追加销售部分的每行列数

就像商店一样，如果您想在单个产品页面上适当地更改相关产品和追加销售产品的列数，则必须过滤这些列并相应地更改主体类别。

// 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' );

在菜单中添加动态购物车链接和购物车费用

此代码段会将WooCommerce购物车项目添加到您的菜单中，以显示购物车中项目的成本。另外，如果您的网站启用了“超赞字体”，它将显示一个小购物袋图标。重要说明：不得将这些函数包装在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默认情况下可以与任何主题配合使用，但是很容易做到，为插件添加了一些额外的支持，使其更适合您的主题。我实际上在编写纽约WordPress博客和商店主题时写了这篇文章， 因此这些调整大部分都包含在我们的主题中。或者，如果您愿意购买该主题以查看如何完成所有操作（请参阅wpex-new-york / inc / woocommerce中的文件），这可能是您更轻松地学习如何正确添加的方式通过查看已经编码的主题对WooCommerce插件的自定义支持。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！