Add Content Above Single Product in WooCommerce

On the WooCommerce Single Product page, there is some ‘real estate’ you could potentially use to display other information about the product, banner, sale, etc. In this article I am sharing what I learned about customizing this area. Read on to learn more…

The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.

Note: All custom PHP code is placed in the child theme’s (the default Storefront theme with minimal customization in this case) functions.php file in a development/testing environment.

As I stated in the opening paragraph, I am interested in utilizing the area above the Single Product (shown in the red rectangle below). You could place whatever (to some extent) here.

But I’m keeping it simple with just some generic banner text.

Share with us in the comments section what you come up with for your customization(s).

woocommerce_before_single_product hook

You can target this area above the Single Product by hooking into the woocommerce_before_single_product hook using the add_action() function and your own callback function.

In the child theme’s functions.php file, I’ve placed this PHP:

add_action( 'woocommerce_before_single_product', 'custom_display_before_woo_single_product', 10 );

function custom_display_before_woo_single_product()
{
	echo "<div class='custom-product-banner-text'><p>This is one awesome product!</p></div>";
}

And in the child theme’s style.css file, some basic CSS for minor formatting:

.custom-product-banner-text {
	text-align: center;
	margin-bottom: 5px;
	font-size: 29px;
}

📰 Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!

This does work but displays for all products. If you have a limited number of similar products, maybe that’s okay.

However, targeting one specific product or a group of similarly related products may be a better application. Using a product’s ID property value, you can filter using an if() conditional and apply this type of customization to that specific product in the Single Product page.

Perhaps I am selling bass lures and in particular, I want to let all potential buyers know just how awesome this particular jig is. I could do something like this with PHP in the child theme’s functions.php file:

add_action( 'woocommerce_before_single_product', 'custom_display_before_woo_single_product', 10 );

function custom_display_before_woo_single_product()
{
	global $product;
	if ( 69 == $product->get_id() ) {
		echo "<div class='custom-product-banner-text'><p>This jig catches monster bass!</p></div>";
	}
}

However, if we visit any other product besides the bass jig, then we don’t have the banner text displayed above the Single Product as shown in this screenshot:

I sure do enjoy learning these types of WooCommerce customizations using PHP. If you see anything wrong in the code or have suggestions, please share them freely in the comments. Perhaps this is not the best use of this area. But, it sure is fun learning how to customize this area with PHP code snippets.

Thank you for reading this post. Please share it with someone else who would enjoy it as well.

Josh Otwell has a passion to grow as a PHP Developer, SQL expert, and technical blogger/writer.

Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.

More ways I can help

Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.

The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.

📰 Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!

2 thoughts on “Add Content Above Single Product in WooCommerce”

  1. Great post! I found it helpful to see how to customize the area above the Single Product using the woocommerce_before_single_product hook. Have you found any other creative ways to utilize this area or other hooks on the Single Product page?
    Curt
    TrafficLinkr

    Reply

Hey thanks for commenting! Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.