[Resolved] Custom Fields Calculations – SUM total of two fields

[Author]

Posts

[stacyS-2]

I was working with another (see this thread): https://toolset.com/forums/topic/sum-of-2-numeric-custom-fields/

That solution works with one exception: what I'm needing is the total of all of those two custom fields.

I have 2 custom fields: BookWords & OtherWords.
Both are numeric fields can data in these fields will be added via multiple users, multiple times daily, so the total is always increasing.

I need to get a total of all the numbers in both of those two fields so that I have a total word count.

The solution from the other thread gives me a list of the total of each row... not the actual total of all the numbers. (see attached screenshot)
Day 1 had one entry: 4158-BookWords & 354-OtherWords for a total of 4512
Day 2 had one entry: 5711-BookWords & 216-OtherWords for a total of 5927

Here's the code we are working with:
in functions.php

add_shortcode('wpv-calculate', 'calculate_shortcode');
function calculate_shortcode($atts) {
return wpv_condition($atts);
}

The shortcode in the page to display:

[wpv-view name="sum-of-2-numeric-custom-fields" cached="off"]

this is the loop item created in Toolset Views

[wpv-calculate evaluate=" [types field='bookwords' format='FIELD_VALUE'][/types] + [types field='otherwords' format='FIELD_VALUE'][/types] "]

Help  – I have no idea how this should be modified to return the actual total of all the records for those two fields.

Thanks much for your help!

[Christian Cox]

Help – I have no idea how this should be modified to return the actual total of all the records for those two fields.
Hello, the shortcode approach you're using here is not designed for adding values from multiple posts. It sounds like that is really what you need here - loop over the posts returned by the View, get the two custom field values from those posts, and calculate a running total of those field values.

I suggest using a different set of shortcodes - one to calculate a running total of custom field values and another to output the running total. Add the following code to a new code snippet or to your child theme's functions.php file:

global $total;
function add_total_shortcode($atts, $content = '') {
global $total;
 
$total += wpv_do_shortcode($content);
}
 
add_shortcode('add-to-total', 'add_total_shortcode');
 
function show_total_shortcode() {
global $total;
$totalNew = $total;
$total = 0;
return $totalNew;
}
 
add_shortcode('show-total', 'show_total_shortcode');

Go to Toolset > Settings > Front-end Content and register add-to-total and show-total in third-party shortcode arguments. Then edit the View and use the new shortcodes inside the wpv-loop tags like this:

<wpv-loop>
[add-to-total]
[types field='bookwords' format='FIELD_VALUE'][/types]
[/add-to-total]
[add-to-total]
[types field='otherwords' format='FIELD_VALUE'][/types]
[/add-to-total]
</wpv-loop>

Note that this does not display the custom field values, it only serves to calculate a running total. If you want to display anything in the loop of results, you must add that information outside the add-to-total shortcodes.

After the wpv-view shortcode, you'll want to display the total. Insert this shortcode after the wpv-view shortcode:

[show-total][/show-total]

That's it. You should see a running total of the custom field values from all the posts returned by the View. Let me know if you have questions about that.

[stacyS-2]

You may be my hero today... okay... so that mostly works LOL  – I think that actually is it, but maybe I'm missing a simple thing.

When I'm editing my page in Elementor Pro... I stick in the shortcode and it appears to show me the correct total (/happydance/)

But... after I save the page and look at the actual live page in any browser, logged in or not, and after clearing the cache... it shows "0" ?!?

Any ideas? Because I'm stumped and don't think I've had enough coffee for this one. 😂

[Christian Cox]

Not sure offhand, but we can try some troubleshooting steps to see what is happening.
- Double-check to be sure you registered the shortcodes accurately in Toolset > Settings > Front-end content: Third-party shortcode arguments. You should see add-to-total and show-total in the registered functions list.
- Edit the View and add the following code somewhere inside the wpv-loop tags (but not inside either of the add-to-total shortcodes):

Test link to post: [wpv-post-link]<br />
Test bookwords value: [types field='bookwords' format='FIELD_VALUE'][/types],  raw: [types field='bookwords' output='raw'][/types]<br />
Test otherwords value: [types field='otherwords' format='FIELD_VALUE'][/types], raw: [types field='otherwords' output='raw'][/types]<br />

- Check the results on the front-end of the site. Take a screenshot and include that in your next reply.
- Edit this View and find the Query Filter panel. If you cannot see the Query Filter panel, scroll to the top right corner of the View editor screen and click "Screen Options". You can activate the Query Filter panel here.
- Edit or toggle open all the Query Filters and take screenshot(s) showing all Query Filter configurations. Include those screenshots in your next reply.
- Copy the complete contents of the Loop Editor panel and paste that code in your next reply.
- Check the post status of all the posts that you expect to see in the View results. If the statuses are anything other than Published, you may need to add/adjust a post status Query Filter to accommodate those statuses. By default, Draft and Pending Review posts are not displayed in a View on the front-end.
- Temporarily deactivate all plugins except Types, Views, and Elementor, and temporarily activate the default Twenty Twenty One theme. Temporarily deactivate any custom code snippets you have in Toolset > Settings > Custom Code, then create a new code snippet to replace the code from the now inactive functions.php file:

global $total;
function add_total_shortcode($atts, $content = '') {
global $total;
  
$total += wpv_do_shortcode($content);
}
  
add_shortcode('add-to-total', 'add_total_shortcode');
  
function show_total_shortcode() {
global $total;
$totalNew = $total;
$total = 0;
return $totalNew;
}
  
add_shortcode('show-total', 'show_total_shortcode');

Set the snippet to run everywhere and activate the snippet. Reload the page and be sure the snippet is active - there is a glitch with activating new snippets, so double-check and activate again if necessary, reload the page and confirm it's active.

Test the View again. If the results are different, there is a conflict somewhere. Deactivate/delete the new snippet. Reactivate your theme, then other plugins, then other custom snippets, one-by-one, testing each time until the problem returns. See if you can isolate one component as the source of this problem.

Let me know the results of these tests and we can go from there.

[stacyS-2]

1) The new registered shortcodes are correct.

2) The results still appear the same  – in Elementor editor view it shows the new test display along with the 17868 total  – in the live page display, it shows the new test content and no total (see screenshots)

3) Screenshot of query section of view attached.

4) Contents of Loop Editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [add-to-total]
          [types field='bookwords' format='FIELD_VALUE'][/types]
          [/add-to-total]
          [add-to-total]
          [types field='otherwords' format='FIELD_VALUE'][/types]
          [/add-to-total]
          Test link to post: [wpv-post-link]<br />
          Test bookwords value: [types field='bookwords' format='FIELD_VALUE'][/types],  raw: [types field='bookwords' output='raw'][/types]<br />
          Test otherwords value: [types field='otherwords' format='FIELD_VALUE'][/types], raw: [types field='otherwords' output='raw'][/types]<br />
        </wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

5) All posts (only 3 right now for testing) are showing Published

6) I didn't have any other custom snippets  – just the new on you had me add for testing.

7) Screenshots attached of the Elementor Editor view & the new live page view using the 2021 Theme  – all plugins disabled except elementor/pro & Toolset's

[stacyS-2]

PROGRESS! It appears there was something (bad) else going on with this WordPress site. After troubleshooting last night it crashed, giving the 'critical error on this site' message that I could not recover from even when going in thru the server file manager and disabling plugins / themes, etc. Long story short, I just rebuilt it from scratch.

Good news is... the total seems to be working! After clean rebuilding the site last night, only the minimal plugins, 2021 theme (I use Elementor to build my own 'theme' anyway)... the total seems to be working as expected! You ROCK!

I can't thank you enough for all your help with this... not only did you fix the issue, but you explained what we were doing and I LEARNED (so hopefully I won't have to pester you all moving forward... at least not much 🤣)

[stacyS-2]

Quick side question though: Does normal CSS styling not work for date picker fields in the Toolset form? The date picker is awful looking and no CSS I'm applying to it seems to be making it better. (see screenshot)

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/datepicker-styles/

[Christian Cox]

Good news is... the total seems to be working! After clean rebuilding the site last night, only the minimal plugins, 2021 theme (I use Elementor to build my own 'theme' anyway)... the total seems to be working as expected!
Excellent!

not only did you fix the issue, but you explained what we were doing and I LEARNED
This made my day 🙂 I'm glad you learned a bit and feel more confident with Toolset now. That's always my goal.

Quick side question though: Does normal CSS styling not work for date picker fields in the Toolset form?
Yes, though you may have to override some built-in styles using more specific CSS selectors - https://css-tricks.com/specifics-on-css-specificity/. Some people also create custom jQuery UI themes, which are pre-rolled design packages for jQuery UI elements like the datepicker - https://jqueryui.com/themeroller/.

I will split this question into a separate ticket so you can get additional assistance if needed. Our policy is to address one issue per ticket.