WooCommerce display price on add to cart button

3 comments

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.

   Log in to Reply

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 ); 
   

   Log in to Reply

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.

   Log in to Reply