How to Hide and Show the Specific Related Products in WooCommerce?

In this blog, we will look at how to hide and show the specific related products in WooCommerce.

Before proceeding further we should know why we need to hide and show the specific related products in WooCommerce.

Related products in Woocommerce are the products that usually appear at the bottom of the product pages and help the company in increasing sales and profit.

The following are a few reasons why we would need to hide and show the specific related products in WooCommerce:

• If our theme is not suitable for the remaining products, we may decide to remove it from our store.
• Related products may burden and disappoint buyers, resulting in no purchases.
• If we offer a few unrelated products, we may not want to display them.

Insert the following code into your plugin’s function.php file to add this feature:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

In the above code, basically, we remove the default function ‘woocommerce_output_related_products’ which is attached to the ‘woocommerce_after_single_product_summary’ WooCommerce hook using the remove_action function.

After this, the single product page will look as below image:

First, we are going to add a custom checkbox field to the product page to remove the related products.

// Add a custom checkbox field to the product page.
function wk_add_related_checkbox_products() {
	woocommerce_wp_checkbox(
		array(
			'id'    => 'hrp',
			'class' => 'wk_hide',
			'label' => 'Hide Related Products',
		)
	);
}

add_action( 'woocommerce_product_options_general_product_data', 'wk_add_related_checkbox_products' );

Now, we can see a checkbox field on the product page as shown in the following picture:

We have created a checkbox to hide the related products. Now move towards the save checkbox field and hide the related products in the single product page.

// Save checkbox field data.
function wk_save_related_checkbox_products( $product_id ) {
	global $pagenow, $typenow;

	if ( 'post.php' !== $pagenow || 'product' !== $typenow ) {
		return;
	}
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}
	if ( isset( $_POST['hrp'] ) ) {
		update_post_meta( $product_id, 'hrp', $_POST['hrp'] );
	} else {
		delete_post_meta( $product_id, 'hrp' );
	}
}

add_action( 'save_post_product', 'wk_save_related_checkbox_products' );


// Hide related products in the single product page.
function wk_hide_related_checkbox_products() {
	global $product;

	if ( ! empty( get_post_meta( $product->get_id(), 'hrp', true ) ) ) {
		remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
	}
}

add_action( 'woocommerce_after_single_product_summary', 'wk_hide_related_checkbox_products', 1 );

We can set the number of related products which we want to display per product page and also set the number of products per row by assigning the value to the variables $args[‘posts_per_page’] and $args[‘columns’].

// Change the number of related products.
function wk_change_number_related_products( $args ) {
	$args['posts_per_page'] = 4; // Number of related products.
	$args['columns']        = 2; // Number of columns per row.

	return $args;
}

add_filter( 'woocommerce_output_related_products_args', 'wk_change_number_related_products', 21 );

I hope the above article is helpful for you. Thanks!

For any technical assistance related to WooCommerce, please raise a ticket or reach our team by mail at support@webkul.com. Also, browse the WooCommerce plugins to add more features to your online store.