WooCommerce display price on add to cart button

Question

I'm trying to add the price to the add to cart button in the loop.

[100$ Add to cart] instead of [Add to cart]

add_to_cart.php template:

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="tiny button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

price.php template:

<?php if ( $price_html = $product->get_price_html() ) : ?>
    <span class="price"><?php echo $price_html; ?></span>
<?php endif; ?>

How do I combine these two? Couldn't find anything on the web.

Answer 1

This should work: modify the add_to_cart.php file to

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s %s</a>',
    esc_url( $product->add_to_cart_url() ),
    esc_attr( $product->id ),
    esc_attr( $product->get_sku() ),
    $product->is_purchasable() ? 'add_to_cart_button' : '',
    esc_attr( $product->product_type ),
    $product->get_price_html(),
    esc_html( $product->add_to_cart_text() )
),
$product );

and the price will display in front of the "Add to cart" text.

EDIT: You should note that updating the woocommerce plugin will undo that and any other modification you have made to any of the files.

Answer 2

WooCommerce 3.1.0 updated the Functions for Add to Cart Button

apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<li><a href="%s" rel="nofollow" data-product_id="%s"
    data-product_sku="%s" class="btn-filled cart add-to-cart %s
    product_type_%s"><i class="fa fa-shopping-cart" ></i></a></li>',
    esc_url( $product->add_to_cart_url() ),
    esc_attr( isset( $quantity ) ? $quantity : 1 ),
    esc_attr( $product->get_id() ),
    esc_attr( $product->get_sku() ),
    esc_attr( isset( $class ) ? $class : 'button' ),
    esc_html( $product->add_to_cart_text() )
),
$product ); 

Answer 3

If you want to be (somewhat) safe from a future Woocommerce upgrade, follow the official safe way to do it (thank you Felix).

Copy add-to-cart.php into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.

Example: To override the admin order notification, copy: wp-content/plugins/woocommerce/templates/emails/admin-new-order.php to wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php

Here is the file updated for Woocommerce 3.3.0 :

<?php
/**
 * Loop Add to Cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/add-to-cart.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     3.3.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
    sprintf( '<a href="%s" data-quantity="%s" class="%s" %s><span style="color:#bb0d00;">%s</span> &nbsp;&nbsp;<span style="color:#999;">|</span>&nbsp;&nbsp; %s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        $product->get_price_html(),
        esc_html( $product->add_to_cart_text() )
    ),
$product, $args );
?>

Of course, styling the button or modificating its content is entirely up to you and isn't limited to show the product price.