如何在Blocksy主题产品归档页中添加数量选择器？

Blocksy主题是一个非常强大而又灵活的WordPress主题，它为用户提供了很多扩展网站功能的方法。如果您还不了解Blocksy主题，可以参考牛奇网的文章Blocksy主题——一款轻量多用途WordPress主题。

今天，牛奇网要给大家介绍一个很有用的功能，就是在Blocksy的产品归档页面上添加数量选择器。添加后，不用进入产品的详情页，就可以直接在产品列表页，选择他们想要购买产品的数量。这样，可以节省用户的时间，提升他们的购物体验，也可以增加网站的销售转化率。

什么是数量选择器？

数量选择器是一个很小的输入框，让用户可以输入购买数量，或者点击增减按钮来调整想要购买的产品数量。通常，在产品详情页面上会显示数量选择器，和“加入购物车”按钮一起。本文我们介绍的是在产品归档页面上添加数量选择器。

本教程是基于以下条件：1、已安装Blocksy主题；2、已安装并激活Blocksy Companion插件；3、已经导入Blocksy模板。如果您想没用过Blocksy主题，可以查看WordPress网站如何安装Blocksy主题。

下图是正常情况下的产品归档页面，产品下方只有个“Add to cart”按钮。

另外，要在产品归档页面上添加数量选择器，还需要安装一个Code Snippets插件。Code Snippets是一个免费的WordPress插件，可以通过它添加PHP代码。这样，不用修改主题的functions.php文件，就可以添加一些自定义的功能到网站上了。

下面，我会给你详细地介绍如何使用Code Snippets插件来添加数量选择器到产品归档页面上。

第一步：安装并激活Code Snippets插件

Code Snippets是一个免费的WordPress插件，可以从WordPress官方插件目录下载它。要从WordPress后台安装Code Snippets插件，可以参考以下步骤操作：

1、在WordPress后台左侧菜单栏中找到Plugins -> Add New，并点击它。

2、在搜索框中输入“Code Snippets”，并按回车键。

3、在搜索结果中找到Code Snippets插件，并点击“Install Now”按钮来安装。

4、安装完成后，点击“Activate”按钮来激活。

第二步：复制并粘贴代码片段

激活Code Snippets插件后，在WordPress后台左侧菜单栏中找到Snippets -> Add New，并点击它。这会打开一个新建代码片段的页面。

在新建代码片段的页面中，给你的代码片段起一个名字，比如“Quantity Selectors on Product Archive”。然后，在“Code”区域中复制并粘贴下面这段代码：

<?php
add_filter( 'woocommerce_loop_add_to_cart_link', function( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$class = implode( ' ', array_filter( array(
			'button',
			'product_type_' . $product->get_type(),
			$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
			$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
		) ) );

		$html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s ct-cart-actions">%s</a>%s',
			'<form class="cart">',
			woocommerce_quantity_input( array(), $product, false ),
			esc_url( $product->add_to_cart_url() ),
			esc_attr( isset( $quantity ) ? $quantity : 1 ),
			esc_attr( $product->get_id() ),
			esc_attr( $product->get_sku() ),
			esc_attr( isset( $class ) ? $class : 'button' ),
			esc_html( $product->add_to_cart_text() ),
			'</form>'
		);
	}

	return $html;
}, 10, 2 );

add_action( 'wp_footer' , function () {
	if ( is_home() || is_front_page() || is_shop() || is_product_category() || is_product_tag() ) {
?>
<script type='text/javascript'>
jQuery( document ).ready( function( $ ) {
	$( document ).on( 'change', '.quantity .qty', function() {
		$( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );
	});
});

jQuery(function($) {
	$(".add_to_cart_button.product_type_simple").on('click', function () {
		var $button = $(this);
		$button.data('quantity', $button.parent().find('input.qty').val());
	});

	$(document.body).on("adding_to_cart", function () {
		$("a.added_to_cart").remove();
	});
});
</script>
<?php
	}
} );

这段代码是从Blocksy官方文档获取的，它的作用是在产品归档页面上添加一个数量选择器到每个产品的下方。它还添加了一些JavaScript代码，来实现数量选择器和“加入购物车”按钮之间的交互。

第三步：选择代码片段的范围和描述

在新建代码片段的页面中，还可以选择代码片段要运行在哪些范围和条件下。这样，可以控制代码片段只在特定的页面或者场景下生效。

在“Run snippet everywhere”区域中，可以选择代码片段要在整个网站上运行，还是只在后台或者前台运行。对于我们这个例子，我们选择“Only run on site front-end”。

在“Description”区域中，可以给该代码片段添加一些描述或者注释，来说明它的作用或者来源。这样，方便管理和查找代码片段。

第四步：保存并查看效果

完成上述步骤后，点击下方的“Save Changes and Activate”按钮来保存并激活代码片段。然后，在浏览器中打开网站，并访问产品归档页面。就可以看到每个产品下面，都多了一个数量选择器。可以试着调整数量，并点击“加入购物车”按钮，看看它是否能正常工作。

总结

通过上述步骤，便成功地使用Code Snippets插件，在Blocksy主题的产品归档页面中添加了数量选择器。