How to Show an Instruction Bar Above Product Boxes

Description:

In this guide, we will learn how to display an instruction bar above product boxes using the Advanced Custom Fields (ACF) plugin. This allows you to add custom text instructions to specific products on your WooCommerce site. Here’s how you can easily set it up and display the instruction bar using custom fields.

Steps:

1. Install the Required Plugins

You’ll need two plugins to make this work:

• Advanced Custom Fields (ACF): This plugin allows you to add custom fields to your WooCommerce products.
  
• cpb-instruction-bar Plugin: This is the plugin that will handle the display of the instruction bar based on the custom field.
  

How to Install the Plugins:

• Download, install, and activate the ACF plugin on your WordPress site.
• Download, install, and activate the cpb-instruction-bar plugin.

2. Add a Custom Field Using ACF

A custom field is like a blank space where you can store extra information (like instructions) about a product. We will add a custom field for the instruction text.

How to Add a Custom Field:

• After activating ACF, go to your WordPress dashboard.
  
• Navigate to Custom Fields > Add New.
  
• Create a new field group. In this group, you will add a field specifically for the instruction text.
  • For example, name the field “Instruction Text.”
    
  • Set the Field Type to “Text” (since we’re adding a short instruction).
    
  • Under Location, choose “Show this field group if: Post Type is equal to Product.” This means the field will only appear on product edit pages.
    
• Save the field group.

3. Adding the Instruction Text to a Product

• Once the field is created, edit the product where you want the instruction bar to appear.
  
• On the product edit page, you will now see the custom field labelled “Instruction Text” (or whatever you named it).
  
• Add your instructions to this field and save the product.

4. Display the Instruction Bar on the Frontend

Now that you’ve added the instruction text to a product, you need to display it on the front end of the website (the part your customers see). To do this, you will need to add a small piece of code to your theme’s functions.php file.

Code:

Here is the code you’ll need to add to your theme’s functions.php file:

/**
 * Filters the text to show before instruction before box.
 *
 * @since  4.1.0
 * @param  string  $text  Default Instruction text.
 * @return string $text
 */
function cpb_addon_selection_instruction_text_function( $text ) {
	global $product;

	return ! $product->is_type( 'wdm_bundle_product' ) ? $text : get_post_meta( $product->get_id(), 'cpb_instruction_text', true );
}
add_filter( 'cpb_addon_selection_instruction_text', 'cpb_addon_selection_instruction_text_function' );

/**
 * Get HTML to show instruction before box.
 *
 * @since  4.1.0
 * @param  object $cpb_product Box product object.
 * @param  array  $addon_list  List of addons.
 * @return void
 */
function cpb_before_box_instruction_function( $cpb_product, $addon_list ) {
	if ( ! $cpb_product->is_type( 'wdm_bundle_product' ) ) {
		return;
	}

	wc_get_template(
		'/single-product/cpb-before-box-instruction.php',
		array(),
		'custom-product-boxes/',
		CPB()->plugin_path() . '/templates/' . CPB()->cpb_template_folder(),
	);	
}

add_action( 'cpb_before_box_wrap', 'cpb_before_box_instruction_function', 10, 2 );

5. View the Product

After saving the changes to your functions.php file, go to the front end of your website, view the product, and you’ll see the instruction bar displayed above the product boxes.

Example Scenario:

• Let’s say you have a product called “Custom Gift Box,” and you want to add a special instruction like “Please select your preferred items below.” Using the steps above, you will:
  
• Create a custom field called “Instruction Text” for this product.
  
• Add the instruction “Please select your preferred items below” in the custom field.
  
• Add the code to your theme to display this instruction.
  
• Now, when customers visit the product page, they’ll see this message before the options to select the items.

This method provides flexibility because you can add different instructions for each product, without having to hard-code them into the theme. The custom field approach also keeps your site organized and easy to manage.