[WooCommerce] Hiển thị “Sản phẩm đã mua” trên trang My account

Trong hướng dẫn này chúng ta sẽ tạo một tab khác trong trang account của woocommerce hiển thị các sản phẩm được mua bởi một khách hàng.

Và đây là những gì chúng ta sẽ tạo ra.

Ok, bây giờ chúng ta sẽ sử dụng api $wpdb và WP_Query nhưng trước khi code, vui lòng lưu ý những vấn đề sau.

• Bạn không thể truy cập bảng WooCommerce theo cách này: $wpdb->woocommerce_order_itemmeta    mà thêm tiền tố trước bảng, vd  $wpdb->prefix . 'woocommerce_order_itemmeta  
• Cột post_author  trong bảng  $wpdb->posts  không phải mã ID của khách hàng, các customer IDs được lưu trữ trong bảng  $wpdb->postmeta  có meta_key= _customer_user  
• Chúng ta sẽ cần giá trị  _product_id  từ bảng  wp_woocommerce_order_itemmeta . Vì vậy, api  $wpdb->get_col()     sẽ được sử dụng.
• WooCommerce có hàm wc_customer_bought_product( $email, $user_id, $id )     cho phép kiểm tra xem khách hàng này đã mua một sản phẩm nào đó. Bạn có thể nghĩ rằng đây là hàm có thể sử dụng trong vòng lặp để kiểm tra từng sản phẩm. 👻 Không, nó không phải là một ý tưởng hay! Hãy tưởng tượng nếu cửa hàng WooCommerce có 20K sản phẩm
• Lưu ý, trước khi truy cập URL endpoint purchased-products   trong đoạn mã dưới đây, đừng quên lưu lại cấu trúc URL tại trang Settings > Permalinks , nếu không bạn sẽ nhận được lỗi 404.

Sao chép đoạn mã dưới đây vào cuối tệp functions.php cho giao diện wordpress hiện tại hoặc trong plugin tùy chỉnh của bạn.

add_filter ( 'woocommerce_account_menu_items', 'hoangweb_purchased_products_link', 40 );
add_action( 'init', 'hoangweb_add_products_endpoint' );
add_action( 'woocommerce_account_purchased-products_endpoint', 'hoangweb_populate_products_page' );
 
// here we hook the My Account menu links and add our custom one
function hoangweb_purchased_products_link( $menu_links ){
 
	// we use array_slice() because we want our link to be on the 3rd position
	return array_slice( $menu_links, 0, 2, true )
	+ array( 'purchased-products' => 'Purchased Products' )
	+ array_slice( $menu_links, 2, NULL, true );
 
}
 
// here we register our rewrite rule
function hoangweb_add_products_endpoint() {
	add_rewrite_endpoint( 'purchased-products', EP_PAGES );
}
 
// here we populate the new page with the content
function hoangweb_populate_products_page() {
 
	global $wpdb;
 
	// this SQL query allows to get all the products purchased by the current user
	// in this example we sort products by date but you can reorder them another way
	$purchased_products_ids = $wpdb->get_col( $wpdb->prepare(
		"
		SELECT      itemmeta.meta_value
		FROM        " . $wpdb->prefix . "woocommerce_order_itemmeta itemmeta
		INNER JOIN  " . $wpdb->prefix . "woocommerce_order_items items
		            ON itemmeta.order_item_id = items.order_item_id
		INNER JOIN  $wpdb->posts orders
		            ON orders.ID = items.order_id
		INNER JOIN  $wpdb->postmeta ordermeta
		            ON orders.ID = ordermeta.post_id
		WHERE       itemmeta.meta_key = '_product_id'
		            AND ordermeta.meta_key = '_customer_user'
		            AND ordermeta.meta_value = %s
		ORDER BY    orders.post_date DESC
		",
		get_current_user_id()
	) );
 
	// some orders may contain the same product, but we do not need it twice
	$purchased_products_ids = array_unique( $purchased_products_ids );
 
	// if the customer purchased something
	if( !empty( $purchased_products_ids ) ) :
 
		// it is time for a regular WP_Query
		$purchased_products = new WP_Query( array(
			'post_type' => 'product',
			'post_status' => 'publish',
			'post__in' => $purchased_products_ids,
			'orderby' => 'post__in'
		) );
 
		echo '<div class="woocommerce columns-3">';
 
		woocommerce_product_loop_start();
 
		while ( $purchased_products-&gt;have_posts() ) : $purchased_products-&gt;the_post();
 
			wc_get_template_part( 'content', 'product' );
 
		endwhile;
 
		woocommerce_product_loop_end();
 
		woocommerce_reset_loop();
		wp_reset_postdata();
 
		echo '</div>';
	else:
		echo 'Nothing purchased yet.';
	endif;
 
}

Bạn có thể chèn thêm icon đẹp vào menu của bạn với một vài dòng mã CSS, như thế này.

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--purchased-products a:before{
	content: "\f1b2";
}

Nếu bạn có bất kỳ câu hỏi nào xin để lại ý kiến của mình dưới bài viết này nhé. Chúc bạn thành công.