In this tutorial, we’ll go through how to add custom text after or before the WooCommerce cart button. This will be done for a single product page as well as a shop or product category page.
You do not need to modify the woocommerce default template files. This may be accomplished by including an action hook in the functions.php file.
Save this hooks in the functions.php file:
woocommerce_before_add_to_cart_buttonwoocommerce_after_add_to_cart_buttonwoocommerce_after_add_to_cart_quantitywoocommerce_before_add_to_cart_quantitywoocommerce_before_add_to_cart_formwoocommerce_after_add_to_cart_form
Before Add to Cart Button Content
Our custom function code will be called by woocommerce_before_add_to_cart_button. It will be executed before the action hook for the add-to-cart button. Consider the following example.
<?php
add_action( 'woocommerce_before_add_to_cart_button', 'cxc_before_add_to_cart_btn_content' );
function cxc_before_add_to_cart_btn_content(){
echo '<p>Hello Cxc Button Before Content ... !!!</p>';
}
?>After Add to Cart Button Content
this Hook woocommerce_after_add_to_cart_button is used to show content after add to cart button.
<?php
add_action( 'woocommerce_after_add_to_cart_button', 'cxc_after_add_to_cart_btn_content' );
function cxc_after_add_to_cart_btn_content(){
echo '<p>Hello Cxc Button After Content ... !!!</p>';
}
?>See the below image for the result after applying both codes in the funactions.php file.
Add content On the Shop or Category Page
If you believe that both of the aforementioned action hooks will work for the store and category pages, you are mistaken. To do this, you must use a whole separate action hook. It’s as straightforward as we said above.
<?php
add_filter( 'woocommerce_loop_add_to_cart_link', 'cxc_shop_before_after_add_to_cart_btn_content', 10, 3 );
function cxc_shop_before_after_add_to_cart_btn_content( $add_to_cart_html, $product, $args ){
$before_content = '<p>Hello Cxc Button Before Content ... !!!</p>'; // Cxc Some text or HTML here ...
$after_content = '<p>Hello Cxc Button After Content ... !!!</p>'; // Add some text or HTML here as well ...
return $before_content . $add_to_cart_html . $after_content;
}
?>Add content after or before the add to cart button on Sale Product
<?php
add_filter( 'woocommerce_loop_add_to_cart_link', 'cxc_shop_before_after_add_to_cart_btn_on_sale_content', 10, 3 );
function cxc_shop_before_after_add_to_cart_btn_on_sale_content( $add_to_cart_html, $product, $args ){
$before_content = '<p>Hello Cxc Button Before Content ... !!!</p>'; // Cxc Some text or HTML here ...
$after_content = '<p>Hello Cxc Button After Content ... !!!</p>'; // Add some text or HTML here as well ...
if( $product->is_on_sale() ) {
return $before_content . $add_to_cart_html . $after_content;
}
}
?>Add content after or before the add to cart button on Specific Product Id products
<?php
add_action( 'woocommerce_single_product_summary', 'cxc_add_content_after_add_to_cart_button', 30 );
function cxc_add_content_after_add_to_cart_button() {
global $product;
if ( function_exists( 'method_exists' ) && method_exists( $product, 'get_id' ) ) {
$product_id = $product->get_id();
} else {
$product_id = $product->id;
}
if( $product_id == 181 ) {
echo '<p>Hello Cxc Button After Content ... !!!</p>';
}
}
add_filter( 'woocommerce_short_description', 'cxc_add_content_before_add_to_cart_button', 99, 1 );
function cxc_add_content_before_add_to_cart_button( $content ) {
global $product;
if( is_single() ){
// get product id
if ( function_exists( 'method_exists' ) && method_exists( $product, 'get_id' ) ) {
$product_id = $product->get_id();
} else {
$product_id = $product->id;
}
if( $product_id == 181 ){
$content .= '<p>Hello Cxc Button Before Content ... !!!</p>';
}
}
return $content;
}
?>I hope you now understand how to place text after or before the woocommerce cart button. If you have any questions or comments, please leave them in the comments box below and I will respond.
In WooCommerce, how can I add text behind the Add to Cart button?
Go to Appearance > Theme Editor on your WordPress dashboard. On the right-hand side, under “Theme Files,” you’ll notice “Theme Functions”; click on it. Scroll down to the “Button Wording” area and type in the new text for the “Add to Cart” button.
Is it possible to add a button within an input?
CSS will be used to place the button inside the input field.
