WPSlash

Add Price on Add To Cart Button

Wednesday March 31, 2021

The following snippet will copy the price automatically and add it inside the add to cart button

add_action("wp_footer", "wpslash_hook_to_add_the_price_in_button");
function wpslash_hook_to_add_the_price_in_button()

{

    ?>
    <script>

        jQuery(document).ready(function() 


            {



jQuery(document).on('change', '.extra-options-accordion select, .extra-options-accordion input , .input-text.qty', function()
    {


        var price  = jQuery('.wf_product_view .price:first').text();

        jQuery('.wf_product_view .single_add_to_cart_button').html(price+' | Add to cart');

    });   
			
				jQuery( this ).on( 'found_variation', function( event, variation ) {


        var price  = variation.price_html;

        jQuery('.wf_product_view .single_add_to_cart_button').html(price+' | Add to cart');

    });            



      });
		
		




    </script>

    <?php
}

function wpslash_include_price_in_add_to_cart_button( $text, $product ) {
 		
        $text = strip_tags(wc_price($product->get_price()))." | ".$text;
    
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpslash_include_price_in_add_to_cart_button', 10, 2 );

Leave a Comment

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

Related Articles

Tutorials

How to Optimize Restaurant Food Photography and Image Compression for Faster WooCommerce Menu Pages (Complete Guide)

Why High-Quality Food Images Make or Break Your Restaurant’s Online Orders Here’s a stat that should grab your attention: studies consistently show that menu items with high-quality photos receive up to 30% more orders than those without images. When customers can’t smell or taste your food through a screen, photography becomes your most powerful selling […]
March 25, 2026
Tutorials

How to Customize Colors, Images, and Branding for Your Restaurant Ordering Website in WooCommerce (Complete Visual Guide)

Your restaurant’s food might be incredible, but if your restaurant ordering website isn’t a one-afternoon project — it’s an ongoing process of refinement. Start with the highest-impact changes: set your brand colors, upload optimized food photography, and make sure your buttons and checkout page look polished. Then layer in custom CSS tweaks and email branding […]
March 25, 2026
Tutorials

How to Set Up a Multilingual Restaurant Menu and Online Ordering System in WordPress (Step-by-Step Guide)

Running a restaurant in a diverse neighborhood or a tourist-heavy area? Chances are, a good chunk of your potential customers speak a language other than English at home. If your online menu and ordering system only speaks one language, you’re leaving money on the table — literally. Setting up a multilingual restaurant website in WordPress […]
March 25, 2026