Link WP Ultimate Recipe ingredients to WooCommerce products

David Nash woocommerce, wordpress 3 Comments

WP Ultimate Recipe is probably the best WordPress plugin for creating recipes. It has one major drawback – it’s not possible to link to WooCommerce products on your site. This seems like a feature that online food retailers would want.

The WP Ultimate Recipe premium plugin adds the ability to add a link to a product ingredient. This is great if the store doesn’t have many products, or you want to link off-site. What I wanted was to let the site admin search their WooCommerce products without having to jump to a different tab to find the link.

First, install WooCommerce, WP Ultimate Recipe (WordPress download) and Advanced Custom Fields (ACF).

In ACF, create a new field group, “Ingredients”. Add a field called “Product”. Set the field type to “Relationship”. Set post type to “Product”. Leave the other settings at their default values.

Under Location, set the rule to show the field group if “Taxonomy type” is equal to “Ingredients”.

Create a recipe in WP Ultimate Recipe. The ingredients added here will be shown in wp-admin under Recipes > Ingredients. Click an ingredient to edit it.

You should now see the “Product” field, with a nice and easy autocomplete input field. This is great if the site has hundreds of products.

Display the WP Ultimate Recipe product link in the theme

This section is based on the instructions for coding your own template from the WP Ultimate Recipe site.

In your functions.php, add this code:

/* use a custom template for WP Ultimate Recipe plugin */
function wpurp_custom_template( $content, $recipe ) {

	//see wp-content/plugins/wp-ultimaterecipe/helpers/models/recipe.php for model
	ob_start();
	include('includes/content-recipe.php');
	$output = ob_get_contents();
	ob_end_clean();
		
	return $output;
}

add_filter('wpurp_output_recipe', 'wpurp_custom_template', 10, 2);

Then in your theme directory, create the directory includes  with a file content-recipe.php  inside it.

<?php 
$ingredients = $recipe->ingredients(); 
if( count( $ingredients ) > 0 ):
?>
<div class="ingredients active">
	<h2>Ingredients</h2>
	<ul>
	<?php 
	foreach( $ingredients as $i ) :
		//nicely format any fractions
		$item = str_to_fraction($i['amount']).' '.$i['unit'].' ';
			
		//see if a WC product is linked to this ingredient
		$product_option = get_option('ingredient_'.$i['ingredient_id'].'_product');

		if( isset( $product_option[0] ) ) {
			$product_link = get_permalink( $product_option[0] );
			$item .= '<a href="'.$product_link.'">'.$i['ingredient'].'</a>';
		}
		else
			$item .= $i['ingredient'];

		if( ! empty($i['notes']) ) {
			$item = rtrim($item);
			$item .= ', '.$i['notes'];
		}
		?>
		<li><?php echo $item ?></li>
	<?php endforeach; ?>
	</ul>
</div><!-- .ingredients -->
<?php 
	endif; //any ingredients
?>

This is just the basics for this tutorial. You will need to add the recipe method and cooking times.

I created str_to_fraction() in this post Pretty print fractions as HTML entities using PHP.

The interesting line is this:

$product_option = get_option('ingredient_'.$i['ingredient_id'].'_product');

This is what we use to get the linked product from Advanced Custom Fields. I couldn’t work out how to get the value from ACF. So I looked at the database and realised the object is stored as an option.

Save the file, and view the recipe on your site. You should now see the ingredients with links to the WooCommerce products.

And that’s it! I really hope WP Ultimate Recipe adds this feature soon. But until then, we can use this.

Comments 3

  1. Hi there, I’ve followed this tutorial through a few times but dont seem to be able to get it to work. When I view a recipe, the page is just blank?

Leave a Reply

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