Insert the product variation’s price into the add-to-cart button on the WooCommerce single product page. We’ll create a couple of JavaScript handlers to detect when the selected variation changes, and we’ll add options to hide the “clear variations” button, and the current variation price.
infoMake sure you’re using a custom child theme so you can edit “functions.php”.
How it’s going to work
The add-to-cart button for variable products looks like this:
<button type="submit" class="single_add_to_cart_button button alt"> Add to basket </button>
To dynamically show the price inside the button (after the text) we need to inject a small placeholder element, so the DOM fragment will look something like this:
<button type="submit" class="single_add_to_cart_button button alt"> Add to basket <span class="atc-price"></span> </button>
After we’ve injected the placeholder, we’ll listen for a couple of WooCommerce JavaScript events that fire when the selected variation changes, then update the contents of the placeholder.
Because we’re going to put the price inside the button, we probably want to hide the standard WooCommerce variation price – we’ll use a simple display:none; to do that.
Finally, we’ll add an option to get rid of the “Clear” button that resets the selected variation back to “none”.
The PHP code
In your custom child theme, create a file called wpt-price-in-add-to-cart.php and add the following. Check out the comments to see what each function does.
<?php
/**
* WP Tutorials Price in Add-to-Cart Button (WPTPIAB)
*
* https://wp-tutorials.tech/refine-wordpress/insert-product-price-into-the-add-to-cart-button/
*/
defined('WPINC') || die();
const WPTPIAB_HIDE_CLEAR_VARIATION_LINK = true;
const WPTPIAB_HIDE_SELECTED_VARIATION_PRICE = true;
/**
* Returns true on each page load that needs our JS/CSS assets.
*/
function wptpiab_is_variable_product_page() {
$is_variable_product_page = false;
if (!function_exists('WC')) {
// WooCommerce is not installed. Do nothing.
} elseif (!is_product() || empty($product = wc_get_product())) {
// Not a product page. Do nothing.
} elseif (!$product->is_type('variable')) {
// Not a variable product. Do nothing.
} else {
$is_variable_product_page = true;
}
return $is_variable_product_page;
}
/**
* Only add our script and CSS when showing a single product page for a
* variable product.
*/
function wptpiab_enqueue_scripts() {
if (wptpiab_is_variable_product_page()) {
// Hide the link that clears the selected variation back to "none".
if (WPTPIAB_HIDE_CLEAR_VARIATION_LINK) {
add_filter('woocommerce_reset_variations_link', '__return_empty_string');
}
$handle = 'wptpiab';
$base_uri = get_stylesheet_directory_uri();
$theme_version = wp_get_theme()->get('Version');
wp_enqueue_style(
$handle,
$base_uri . '/wpt-price-in-add-to-cart/wptpiab-single-product-page.css',
null,
$theme_version
);
wp_enqueue_script(
$handle,
$base_uri . '/wpt-price-in-add-to-cart/wptpiab-single-product-page.js',
array('jquery'),
$theme_version
);
}
}
add_action('wp_enqueue_scripts', 'wptpiab_enqueue_scripts');
/**
* If we want to hide the price of the selected variation, we add a class
* to the body, which we can pick up in our little stylesheet.
*/
function wptpiab_body_class($classes, $css_class) {
if (wptpiab_is_variable_product_page() && WPTPIAB_HIDE_SELECTED_VARIATION_PRICE) {
$classes[] = 'hide-variation-price';
}
return $classes;
}
add_filter('body_class', 'wptpiab_body_class', 10, 2);We’ve created a helper function called wptpiab_is_variable_product_page() that returns true on any page-load that’s a single product page (for a variable product).
Our core functions is a handler for the wp_enqueue_scripts hook. This is how we add custom JavaScript and/or stylesheets to the HTML headers in WordPress. By testing wptpiab_is_variable_product_page() at the top of the function, we can add our assets only to the pages that need them (instead of to every page on the site).
We’ve also got a handler for the body_class filter so we can add a custom CSS class to the body element on our page.
Now edit your child theme’s functions.php file and add the following couple of lines somewhere near the top.
// Headwall WP Tutorials : Variation price inside the Add-to-cart button. require_once dirname(__FILE__) . '/wpt-price-in-add-to-cart.php';
Modify the DOM in JavaScript
In your child theme, create a folder called “wpt-price-in-add-to-cart” and make a new file in there called “wptpiab-single-product-page.js“. Paste the following code into it:
/**
* WP Tutorials Price in Add-to-Cart Button (WPTPIAB)
*
* https://wp-tutorials.tech/refine-wordpress/insert-product-price-into-the-add-to-cart-button/
*/
(function($) {
'use strict';
// Diagnostics
// console.log('WPTPIAB : INIT');
$(window).on('load', function() {
// Create a span element within the Add to Cart button that will
// hold the (HTML) variation price.
$('.single_add_to_cart_button').append('<span class="atc-price"></span>');
});
// Triggered by WooCommerce when the user has selected a variation.
$(document).on('found_variation', 'form.cart', function(event, variation) {
// Diagnostics - show the variation object and all its properties
// console.log(variation);
// Diagnostics - show the variation's HTML snippet
// console.log(variation.price_html);
// Make sure our price ontainer is empty, then show it.
$('.single_add_to_cart_button .atc-price').empty();
$('.single_add_to_cart_button .atc-price').show();
// Append the HTML for the selected variation price.
$('.single_add_to_cart_button .atc-price').append(variation.price_html);
});
// Triggered by WooCommerce when there's no variation selected.
$(document).on('hide_variation', 'form.cart', function(event, variation) {
// Hide our price container.
$('.single_add_to_cart_button .atc-price').hide();
});
})(jQuery);The first thing the JavaScript does is create the placeholder (a span element with class="atc-price") and inject it into the add-to-cart button. Then we listen for found_variation and hide_variation to hide or show the placeholder. The “found_variation” event gives us a parameter called variation, which is an object that has a string property called price_html – this is what we need. To see what else is made available by the variation object, uncomment the diagnostic line that outputs variation to the console.
Adding the styles
Finally, create a small stylesheet in “wpt-price-in-add-to-cart” called “wptpiab-single-product-page.css” and add the following:
/**
* wpt-price-in-add-to-cart.css
*/
/* Hide the current variationn price */
.hide-variation-price form.cart .woocommerce-variation-price {
display: none;
}
.single_add_to_cart_button .atc-price {
margin-left: 0.5em;
}Wrapping up
Use the two constants at the top of the PHP file enable/disable the various functions:
- WPTPIAB_HIDE_CLEAR_VARIATION_LINK
- WPTPIAB_HIDE_SELECTED_VARIATION_PRICE
The JavaScript has some diagnostic console.log() lines you can uncomment to see what’s happening. Otherwise it should be easy to read and modify, and the stylesheet is easy to extend.
Featured plugin
Have fun tweaking your single product page 😎👍
