Page builders and custom product templates
The amount field normally appears on its own, just above the add-to-cart button. This page is for the cases where it does not, and for placing it yourself. Reading time: three minutes.
How the field appears
WooCommerce gives themes and plugins a fixed place just before the add-to-cart button, and every theme that uses WooCommerce’s product template honours it. Measure and Price puts its field there. It has been checked on Storefront, Astra, Kadence, GeneratePress, the block theme Twenty Twenty-Five, and with Elementor active.
Some page builders let you design the product page yourself. As long as your design includes WooCommerce’s add-to-cart element, the field still appears, because that element calls the same place.
If the field does not appear
Work through these in order.
- On the product’s Sold by tab, is Sold by set to something other than Each? And does the product have a price?
- Does your product page show WooCommerce’s add-to-cart button at all? If the page is built from scratch without it, the field has nowhere to go. Use the shortcode or the block below.
- Is a caching plugin serving an old copy of the page? Clear its cache once.
Placing the field yourself
Shortcode. Put [measure_and_price] wherever you want the field. On a single product page it picks up that product. To target a product by number, for example in a landing page, use [measure_and_price product="123"].
Block. In block templates, add the block called Measure and Price calculator. It shows a placeholder in the editor and the real field on the site.
Either way the field finds the product’s add-to-cart form on the page and works with it, even when it is placed somewhere else on the page.
Elementor
Elementor’s free version uses WooCommerce’s product page, so nothing changes. Elementor Pro’s single product templates include an Add To Cart widget; use it and the field appears inside it. If you prefer, add a Shortcode widget with [measure_and_price] next to your own layout instead.
Divi and YOOtheme Pro
Both can build product layouts with their own add-to-cart elements, which call WooCommerce’s usual place. If your layout does not, use the shortcode module both builders provide, with [measure_and_price].
Quick view and product popups
Quick-view plugins load a product summary in a popup without the page’s scripts. The field may appear without its live summary in those. Customers can still open the product page to see the full calculation. If you rely on quick view heavily, tell us which plugin and we will look at it.