How to add a price to the linked product/variation button

This guide will walk you through how to show the price for each of your linked products on the button that links through to that product page.

This technique is used on Amazon (see below) and will improve the experience for your customers as they can see the price of each product at a glance without having to click.

price on linked product Amazon

To make this happen, add the following code to your functions.php file:

<?php
/**
 * Iconic Linked Variations - add price to button.
 *
 * @param array $group_data Group Data.
 * @param int   $product_id Product ID.
 *
 * @return array
 */
function iconic_lv_add_price_to_button( $group_data, $product_id ) {
	foreach ( $group_data['attributes'] as $attribute_slug => $attribute ) {
		foreach ( $attribute['terms'] as $term_slug => $term ) {
			if ( empty( $term['linked_variation_data']['variation']['id'] ) ) {
				continue;
			}

			$variation_id = $term['linked_variation_data']['variation']['id'];
			$variation    = wc_get_product( $variation_id );
			$price        = $variation->get_price();
			$price        = wc_price( $price );

			$group_data['attributes'][ $attribute_slug ]['terms'][ $term_slug ]['content'] = str_replace( '</span>', '<div class="iconic-lv-term-button-price">' . $price . '</div></span>', $group_data['attributes'][ $attribute_slug ]['terms'][ $term_slug ]['content'] );
			$group_data['attributes'][ $attribute_slug ]['terms'][ $term_slug ]['content'] = str_replace( '</a>', '<div class="iconic-lv-term-button-price">' . $price . '</div></a>', $group_data['attributes'][ $attribute_slug ]['terms'][ $term_slug ]['content'] );
		}
	}

	return $group_data;
}
add_filter( 'iconic_wlv_group_data', 'iconic_lv_add_price_to_button', 10, 2 );

The result will look like this:

price on linked product button woocommerce

WooCommerce Linked Variations

Link a group of WooCommerce products together by attribute; a new way to handle product variations.

Buy Now

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.