In a WooCommerce store, customizing the product display can help provide additional information or highlight key features to potential customers. Adding custom text under the product price on the shop page is a great way to offer supplementary details or promotional messages that can influence purchasing decisions. In this guide, we’ll show you how to effortlessly integrate custom text under the product price on the shop page, enhancing the product presentation and improving the shopping experience for your customers.
Add text after the product price on the shop page
/**
* Snippet Name: Add text after product price on loop items
* Snippet Author: wpsnippets.dev
*/
//Add custom text under product price on shop page
function wps_add_custom_text_under_product_price() {
echo '<span class="wps-custom-text">Your custom text or HTML goes here</span>';
}
add_action( 'woocommerce_after_shop_loop_item_title', 'wps_add_custom_text_under_product_price', 10 );
Add custom text for a specific product by providing its ID
/**
* Snippet Name: How to add text after product price on loop items for specific ID
* Snippet Author: wpsnippets.dev
*/
// adding custom text based on product id
function wps_add_text_after_price( ) {
global $product;
$target_product_id = 55;
// Check if the current product ID matches the target product ID
if ( is_a($product, 'WC_Product') && $product->get_id() === $target_product_id) {
echo "<span class='wps-custom-text'>". __('Cute Ninja T-shirt.', 'textdomain'). "</span>";
}
};
add_action( 'woocommerce_after_shop_loop_item', 'wps_add_text_after_price', 1, 0 );
Add custom text for a specific product and similar text for other products
/**
* Snippet Name: Add custom text for a specific product and similar text for other products
* Snippet Author: wpsnippets.dev
*/
function wps_add_text_after_price( ) {
global $product;
$target_product_id = 55;
// Check if the current product ID matches the target product ID
if ( is_a($product, 'WC_Product') && $product->get_id() === $target_product_id) {
echo "<span class='wps-custom-text'>". __('Cute Ninja T-shirt.', 'textdomain'). "</span>";
}
else{
echo '<span class="wps-custom-text">Your custom text or HTML goes here</span>';
}
};
// add the action
add_action( 'woocommerce_after_shop_loop_item', 'wps_add_text_after_price', 1, 0 );
Code Explanation
- Add text after the product price on the shop page
- This code snippet defines a function
add_custom_text_under_price
that echoes out the HTML markup for the custom text or HTML content. - The function is hooked into the
woocommerce_after_shop_loop_item_title
action hook to ensure that the custom text is displayed under the product title on the shop page.
- This code snippet defines a function
- Add custom text for a specific product by providing its ID
- This code snippet defines a function
add_custom_text_under_price
that checks if the target ID and product ID match. If it does, then a custom text will be added. - The function is hooked into the
woocommerce_after_shop_loop_item_title
action hook to ensure that the custom text is displayed under the product title on the shop page.
- This code snippet defines a function
- Add custom text for a specific product and similar text for other products
- This code snippet defines a function
add_custom_text_under_price that checks if the target ID and the product ID match. If it does, then it adds specific custom text, else
it provides other text. - The function is hooked into the
woocommerce_after_shop_loop_item_title
action hook to ensure that the custom text is displayed under the product title on the shop page.
- This code snippet defines a function