How to Display Field Calculations in Your View

The Calculations addon allows you to display Sum or Average calculations for numeric fields in your WPForms Views. You can place these calculations before or after your entry list to provide meaningful insights from your form data.

What You Can Do With Calculations #

• Calculate Sum or Average of numeric field values
• Choose between Visible Entries (respects filters/pagination) or All Entries
• Place calculations anywhere in your view (before loop, after loop, or in the loop)
• Customize the display text with merge tags
• Support for text, number, and hidden field types

Adding a Calculation Field to Your View #

Step 1: Access the View Editor #

1. Navigate to WPForms → Views
2. Open the view where you want to add calculations
3. You’ll see three sections: Before Entry List Fields, Entry List Fields, and After Entry List Fields

Step 2: Add the Calculation Field #

For calculations before the entry list:

1. Click the “+ Add Field” button in the Before Entry List Fields section
2. Scroll down and select “Calculation” from the field list
3. The calculation field will be added to your view

For calculations after the entry list:

1. Click the “+ Add Field” button in the After Entry List Fields section
2. Select “Calculation” from the field list

Step 3: Configure the Calculation Field Settings #

When you click on the calculation field, the Field Settings panel opens on the right. Configure the following options:

1. Select Field for Calculation #

• Choose which form field’s values you want to calculate
• Only text, number, and hidden field types are available
• Example: If you have a “Price” or “Quantity” field, select it here

2. Calculation Data Source #

Choose which entries to include in your calculation:

Visible Entries (default): Calculates only the entries currently displayed

• Respects search filters
• Respects pagination (only current page)
• Respects view filters
• Perfect for “Total on this page” scenarios

All Entries: Calculates across all entries in the view

• Ignores pagination
• Still respects view filters and permissions
• Perfect for “Grand Total” scenarios

3. Calculation Type #

Select the type of calculation:

Sum: Adds up all the values

• Example: Total sales, Total donations, Total quantity

Average: Calculates the mean value

• Example: Average rating, Average price, Average score

4. Label (Optional) #

Customize how the result is displayed:

• Default: {result} (displays just the number)
• Use {result} as a placeholder for the calculated value
• Examples:
  • Total: ${result}
  • Average Score: {result} out of 10
  • Total Donations: ${result}
  • {result} entries processed

Real-World Examples #

Example 1: Total Sales Before Entry List #

Scenario: Display total sales amount at the top of your order list

Setup:

• Field: Select your “Order Amount” field
• Data Source: All Entries
• Calculation Type: Sum
• Label: Total Sales: ${result}
• Location: Before Loop section

Result: Shows “Total Sales: $15,234.50” above your order entries

---

Example 2: Average Rating After Product Reviews #

Scenario: Show average product rating below review entries

Setup:

• Field: Select your “Rating” field (1-5 scale)
• Data Source: All Entries
• Calculation Type: Average
• Label: Average Rating: {result} ⭐
• Location: After Loop section

Result: Shows “Average Rating: 4.23 ⭐” below all reviews

---

Example 3: Page Total in Paginated View #

Scenario: Show subtotal for current page in a paginated order list

Setup:

• Field: Select your “Amount” field
• Data Source: Visible Entries
• Calculation Type: Sum
• Label: Page Total: ${result}
• Location: After Loop section

Result: Shows the sum of only the entries on the current page

---

Example 4: Multiple Calculations #

You can add multiple calculation fields to show different metrics:

Before Loop:

• Total Revenue: ${result} (Sum, All Entries, Amount field)
• Total Orders: {result} (Sum, All Entries, Quantity field)

After Loop:

• Page Subtotal: ${result} (Sum, Visible Entries, Amount field)

Best Practices #

When to Use “Visible Entries” #

• Paginated views where you want per-page totals
• Filtered results where the calculation should update with filters
• Search results where you want to calculate only matching entries
• Views with “Load More” or “Show More” features

When to Use “All Entries” #

• Grand totals that should remain constant
• Overall statistics (like average rating)
• Summary dashboards
• Views where users need to see the complete picture

Field Type Considerations #

• Use number fields for precise calculations (prices, quantities, scores)
• Use text fields if they contain numeric values
• Hidden fields work great for calculated values or unique identifiers
• Non-numeric values are treated as 0 in calculations

Styling Your Calculations #

You can style calculation fields using CSS:

/* Target calculation in before loop */
.wpforms-view .wpforms-view-field-type-calculation-value {
    font-size: 24px;
    font-weight: bold;
    color: #2271b1;
    padding: 15px;
    background: #f0f6fc;
    border-left: 4px solid #2271b1;
    margin-bottom: 20px;
}

/* Different style for after loop calculations */
.wpforms-view-section-afterloop .wpforms-view-field-type-calculation-value {
    text-align: right;
    font-size: 18px;
    padding: 10px;
    border-top: 2px solid #ddd;
}

Add this CSS to Appearance → Customize → Additional CSS or your theme’s stylesheet.

Combining with Other Features #

With Filters #

When you set up view filters, calculations using “All Entries” will respect those filters. This is perfect for:

• Filtering by date range and showing totals for that period
• Filtering by category and calculating category-specific metrics
• Filtering by user and showing user-specific totals

With Search #

When users search your view, calculations set to “Visible Entries” will update to show results for only the matching entries.

With Conditional Display #

You can use Display Conditions on calculation fields to show/hide them based on criteria:

• Show “Grand Total” only if more than 10 entries exist
• Display “Average” only for completed entries
• Conditional calculations based on entry dates or values

Troubleshooting #

Calculation Shows 0 #

• Verify you’ve selected the correct field
• Ensure the field contains numeric values
• Check that entries exist in your view
• Confirm the field type is text, number, or hidden

Calculation Not Updating #

• Clear your browser cache
• Verify “Calculation Data Source” setting matches your needs
• Check if view filters are affecting available entries

Wrong Values in Calculation #

• Ensure the field contains clean numeric data (no currency symbols or text)
• Check for empty values that might affect averages
• Verify view filters aren’t excluding important entries

Advanced: Filter Hook #

Developers can modify calculation results using the filter hook:

add_filter( 'wpf_views/calculations/result', 'custom_calculation_display', 10, 3 );

function custom_calculation_display( $text, $entries, $formFieldId ) {
    // Add thousand separators
    $result = str_replace( ' ', ',', $text );
    
    // Add currency symbol
    if ( $formFieldId == 5 ) { // Check specific field
        $result = '$' . number_format( floatval( $text ), 2 );
    }
    
    return $result;
}

Summary #

Calculations in WPForms Views provide powerful insights into your form data:

• Choose Sum or Average calculations
• Calculate from visible or all entries
• Place before, after, or within entry loops
• Customize display with merge tags
• Works with filters, search, and pagination
• Style with custom CSS