Blog Categories  Tips & Tricks Contact

HOME
WORDPRESS HOW TO ADD TEXT AFTER OR BEFORE PRODUCT TITLE IN WOOCOMMERCE?

How to Add Text After or Before Product

Title in WooCommerce? FOLLOW US
Stay updated via social channels
HOW TO
WOOCOMMERCE
WORDPRESS

AMAN MEHRA
AUGUST 13, 2021
LEAVE A COMMENT

Tweet on Twitter
Share on Facebook

Get New Post By Email

Name

Your email address

SUBSCRIBE

RECENT POSTS

How to Add Text After or Before

Product Title in WooCommerce?
Do you want to add text after or before the product title on the woocommerce
How to Optimize Images Without
single product page? And you don’t know how to do that?
Losing Quality to Increase Website
Speed?
Don’t worry!
How to Disable Widget Block
Editor (Gutenberg) in WordPress?
We will learn this tutorial, how you can add a title after or before product title
step-by-step guide. Laravel Unique Validation Rules
Examples

So as you know woocommerce is the most popular eCommerce platform to How to Hide Admin Bar in
build the online store with WordPress. The woocommerce plugin is free of cost WordPress?
but there are more plugins that are paid. You can use them to enhance the
functionality. It is up to you, you want to use it or not.

There are many customizations available in the woocommerce plugin using the
action/hooks. You can customize the functionality which is customizable. Like
CATEGORIES
you can also add text after or before add to cart button, make custom product
view counter and redirect to checkout, etc. Git

How To
So today, we will customize the product title on a single page by adding the text
JavaScript
after or before it. And also on woocommerce shop archive page.
Laravel
But there is no specific action or filter hook in woocommerce for the product title PHP
to customize it directly but still have a solution, you can customize it using the
Python
other action hooks. We will see this in the below tutorial.
ReactJS
Let’s get started.
WooCommerce

Before starting to add text after or before woocommerce product title, let’s see WordPress

the default layout of a single product page and product title.

MOST VIEWED POSTS

WooCommerce Remove Update

Cart Button and Make it
Automatically Update.

How to Redirect to Checkout After

Add to Cart?

How to Change Price of Specific

Product and Quantity in Cart?

Upload Multiple Featured Images

in a Post OR Page

let’s now start to add text after the product title. How can I Prevent SQL Injection in
PHP?

Table of Contents
1
Add Text After the Product Title
TIPS & TRICKS
2
Add Text Before the Product Title
Add Custom Columns to Laravel
2.1
Using the woocommerce_single_product_summary
Models Using Accessors
2.2
Using the woocommerce_before_single_product_summary
Delete a Line in Text File Using
3
Add Text After or Before on the Shop Page/Archive Page
Python

Create CSV from PHP Array

Add Text After the Product Title Get Current Page URL in PHP

How to Take Chrome Full Page

We will use the woocommerce_single_product_summary action hook to Screenshot Without Extension?
modify the default product title with our text append to it.

Syntax: do_action('woocommerce_single_product_summary',
$post, $product);

The woocommerce_single_product_summary allows us to add your custom

code on a single product page inside the product information section. It will call,
just before the product title. See the following image to understand visually
where this hook call.

Hope you understand the visual guide for

woocommerce_single_product_summary on the single product page.

Now we will use this same action hook to add text after product title. So let’s
now make the function hook.

1 remove_action( 'woocommerce_single_product_summary', 'wo

2 ​
3 function woocommerce_add_custom_text_after_product_title
4 ​
5 $custom_text = '<span>My Custom Text</span>';
6 the_title( '<h3 class="product_title entry-title">',
7 ​
8 }
9 add_action( 'woocommerce_single_product_summary', 'wooco

In the above code, first, we removed the default product title using the
remove_action() function. Then we make our custom function to append
custom text to the product title.

We used the the_title() function and concatenate our custom code variable in it.

Syntax: the_title( string $before = '', string $after = '',

bool $echo = true )

So add the above code snippet to your child’s theme and save it. It will show you
the custom text after the product title and further you can style it using the CSS
as per your requirements.

After adding the code, you will see the product title and custom text like in the
following image.

Add Text Before the Product Title

To add the before the text to the product title, we have two ways to do this. First,
we will use the same action hook as we did for “after product title” and second
for using the woocommerce_before_single_product_summary . Both
the ways work fine and the result will be the same as the text before the product
title.

Using the woocommerce_single_product_summary

It will be the same process as we did above. We just have to change the
concatenation variable position. In the above code snippet, we concatenate it
with the “after” parameter but in this method, we will concatenate it with the
“before” parameter. See the following code snippet.

1 remove_action( 'woocommerce_single_product_summary', 'wo

2 ​
3 function woocommerce_add_custom_text_before_product_titl
4 ​
5 $custom_text = '<span>My Custom Text</span>';
6 the_title( '<h3 class="product_title entry-title">'
7 ​
8 }
9 add_action( 'woocommerce_single_product_summary', 'wooco

Using the woocommerce_before_single_product_summary

The woocommerce_before_single_product_summary allows us to add

the custom code just before the main start of product information block.

So let’s add the text before the product title using this hook.

1 add_action( 'woocommerce_before_single_product_summary'
2
3 function add_custom_text_before_product_title() {
4 echo '<span>My Custom Text</span>';
5 }

So add the one code snippet from above both of them in your theme’s
functions.php file and save it. And you will see the screen like the below image.

OK, so all the above code snippets are only for woocommerce single product
page.

But what if you same things also want on the shop page or product archive
page?

Then you have to make another action hook to achieve the same functionality
on the shop page. We will make a hook for all looped products to customize the
loop product title and add custom text with it.

Add Text After or Before on the Shop

Page/Archive Page

We will use the woocommerce_shop_loop_item_title hook to add the

custom text after or before the product title. Let’s see the following code.

1 remove_action( 'woocommerce_shop_loop_item_title','wooco
2 ​
3 function customize_shop_page_product_title() {
4 ​
5 $custom_text = 'My Custom Text';
6 echo '<h3 class="woocommerce-loop-product__title">'
7 ​
8 }
9 add_action('woocommerce_shop_loop_item_title','customize

In the above code, we make an action hook for the loop product and did the
same thing, product title concatenates with custom text variable. But in this
case, we use the get_the_title() function because now we are customizing the
title in the loop.

So save the code and you will see the result same as the below image.

Hope you understand, how you can customization in woocommerce and add
custom text after or before the product title.

If you have still have questions please ask me in the comment section. I would
like to help you with that.

ADD TEXT AFTER PRODUCT TITLE ADD TEXT AFTER PRODUCT TITLE WOOCOMMERCE
ADD TEXT BEFORE PRICE WOOCOMMERCE ADD TEXT BEFORE PRODUCT TITLE
PRODUCT TITLE BEFORE TEXT PRODUCT TITLE CUSTOMIZATION
TEXT BEFORE PRODUCT TITLE WOOCOMMERCE ADD TEXT AFTER PRODUCT TITLE
WOOCOMMERCE ADD TEXT BEFORE PRODUCT TITLE WOOCOMMERCE ADD TEXT BEFORE TITLE
WOOCOMMERCE PRODUCT TITLE FILTER WOOCOMMERCE PRODUCT TITLE HOOK
WOOCOMMERCE SINGLE PRODUCT PAGE TITLE

Tweet on Twitter
Share on Facebook

YOU MAY ALSO LIKE

How to Optimize Images Without How to Disable Widget Block Editor

Losing Quality to Increase Website (Gutenberg) in WordPress?
Speed?

How to Hide Admin Bar in How to Duplicate Pages OR Posts in

WordPress? WordPress?

How to Test Internet Speed Using

Python?

ABOUT THE AUTHOR: AMAN MEHRA

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+
years of experience. I love coding and help to people with this blog.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Comment

Name * Email * Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT

ABOUT QUICK LINKS RECENT POSTS GET IN TOUCH

Your Blog Coach is the best site Blog How to Add Text After or Before
Name
for finding the solution to any Product Title in WooCommerce?
Categories
issue related to coding and learn
How to Optimize Images Without Your email address
more cool stuff and tricks. Contact
Losing Quality to Increase
About Website Speed?
SUBSCRIBE
How to Disable Widget Block
Editor (Gutenberg) in WordPress?

© 2020 Your Blog Coach Privacy Policy

Terms and Conditions
Sitemap