The Gravity Forms Product Add-Ons Extension is a powerful tool to extend a WooCommerce site. One of the great features allows you to create a dropdown list of product add-ons, each which have an associated price assigned to them. This price gets added to the original product price.
By default, the dropdown list includes both the value and the price difference from the currently selected option. What happens if you don’t want to show the price difference? We’ll show you how to remove the price & only display the value.
Gravity Forms – Form Setup
Here’s what the form looks like in Gravity Forms. You have to use the “Option” field type under “Pricing Fields.” Notice we have text for both “Label” and “Price.”
Add Gravity Form To Product
Go to your product edit screen, scroll down to Gravity Forms Product Add-Ons, and select the form you just created.
Dropdown Displays Price Difference
When you view the product on your website, you’ll see something that looks like this (below). We are going to remove the price differences (ex: +$50.00, -$25.00, etc.) from the dropdown.
How to Remove priceLabel from Dropdown
We are going to use a filter provided by Gravity Forms called gform_format_option_label. If you are using a child theme, this code should be placed there. I recommend putting this code in your footer.php file, but you could optionally include it in the <head> section of header.php, or your own linked JavaScript file.
I’m placing it in footer.php:
- because it doesn’t need to load before the page content, so this will help speed up the page load
- so I can use an if statement to only include it on single product pages (the only pages that ever display the form)
Here’s what the code looks like. Place this immediately before the call to <?php wp_footer(); ?>:
<?php if ( is_singular('product') ) { // only single product pages ?>
<script type="text/javascript">
function gform_format_option_label(fullLabel, fieldLabel, priceLabel, selectedPrice, price, formId, fieldId) {
// Disable option pricing. Simply return the field label.
// This removes the "+$25.00" or "-$100.00" from the dropdown.
return fieldLabel;
}
</script>
<?php } // end if, single product pages ?>This will remove the priceLabel (+$50.00) from the dropdown menu, and only display the fieldLabel. The above code will do this for ALL fields on your site.
Remove priceLabel for a specific form
To do this, use the formId parameter:
<?php if ( is_singular('product') ) { // only single product pages ?>
<script type="text/javascript">
function gform_format_option_label(fullLabel, fieldLabel, priceLabel, selectedPrice, price, formId, fieldId) {
// Only for form with ID of 1
if (formId == 1)
// Disable option pricing. Simply return the field label.
// This removes the "+$25.00" or "-$100.00" from the dropdown.
return fieldLabel;
}
</script>
<?php } // end if, single product pages ?>
Remove priceLabel for a specific field
To do this, use the fieldId parameter:
<?php if ( is_singular('product') ) { // only single product pages ?>
<script type="text/javascript">
function gform_format_option_label(fullLabel, fieldLabel, priceLabel, selectedPrice, price, formId, fieldId) {
// Only for field with ID of 5
if (fieldId == 5)
// Disable option pricing. Simply return the field label.
// This removes the "+$25.00" or "-$100.00" from the dropdown.
return fieldLabel;
}
</script>
<?php } // end if, single product pages ?>Remove price label from WooCommerce email notifications
The ability to remove the price label from email notifications was asked about several times in the comments, and Yhlas Sovbetov was generous enough to write up some code to solve this. Please see his comment below.
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment