Hiding ACF fields
-
I have a number of ACF fields like multiple phone numbers & urls that I would like to hide if empty. The plugin does hide the fields, but it doesn’t hide the container or margins/padding or if the acf links are on images the images themselves. So basically, the data doesn’t show which is good, but it leave a hole which is bad. Anyway to fix this?
This is currently just on a local testing site so I do not have a link to include.
-
Another option would be to have a user meta state for each user and check for that in the Section’s visibility options. But that would involve a bit of coding.
Example: Whenever the user’s settings are saved, if all of them are empty, update a user meta called “acf_profile_fields_empty” with value “1” (you can pick any name for the user meta). If there is at least one field filled in, it should be updated with value “0”.
So now you can check in the section for “acf_profile_fields_empty” user meta and if the value is “1” you can hide the entire Section.Putting this option on Sections doesn’t help that much.
If a section and all it’s children have to be set to actually fully hide a field it sounds like everything you want hidden separately has to be in it’s very own section.
It certainly doesn’t work for a business listing, with multiple phone numbers, websites and social links. Put each one in it’s own section, that doesn’t seem practical. I’m not sure if it would even work and I bet it would look ugly at the end if it did.
As I look at this more closely I see this happening on all fields not just those with images.
In very few circumstances do I see it be useful to keeping the space something occupies when you are hiding that item. For example:
—-
Phone: 1 (222) 333-4444
Mobile: 1 (222) 333-4445
Fax: 1 (222) 333-4446
—-If the listing doesn’t have a Mobile, this becomes ugly:
—-
Phone: 1 (222) 333-4444Fax: 1 (222) 333-4446
—-You can make them inline sure, but if you add margin or padding then that still shows producing an ugly space.
I did find one work around that seems to work.
- Install the free plugin Shortcoder.
- Make a new shortcode using your acf field and
information you want attached to it. For example:
Mobile: [acf field=’mobile-phone’]
That gives you a new shortcode: [sc name=”phones-mobile”][/sc] - Put the new Shortcoder shortcode into a text editor
- Set Visibility to Show when the following condition is met under Dynamic Conditions:
Shortcode – [sc name=”phones-mobile”][/sc]
Condition – Contains
Compare Type – Text
Condition Value – ACF Field (Mobile Phone)
This gives you the much improved:
—-
Phone: 1 (222) 333-4444
Fax: 1 (222) 333-4446
—-This works, but it does seem a bit ridiculous to have to create a new shortcode for each and every field to compare in this way if you don’t want the space to remain when a field is empty. It also means you have to add something extra to the new shortcode even for fields that you may not want a label on.
I’m not a programmer and don’t know the challenges. Is there anyway to something similar with your code to just get rid of all the space of the element itself when you are hiding it?
-
This reply was modified 2 years, 8 months ago by
. Reason: trying to clarify what I was saying
-
This reply was modified 2 years, 8 months ago by
-
This reply was modified 2 years, 8 months ago by
-
This reply was modified 2 years, 8 months ago by
-
This reply was modified 2 years, 8 months ago by
Hi,
In this example:
Phone: 1 (222) 333-4444
Mobile: 1 (222) 333-4445
Fax: 1 (222) 333-4446“Phone:” is a separate widget from “1 (222) 333-4444”? Does “Phone:” have visibility options?
“Hide when empty” option works only when all the widgets inside the Section are hidden by Visibility conditions. If you have any other widget inside it that doesn’t meet this condition, it will not work.
Example 1:
Section 1 -> Column 1 -> Widget 1
Section 1 -> Column 2 -> Widget 2
____
Section 1 – “Hide when empty” option “ON”
____
Result: Section 1 will be completely removed from the page if Widget 1 & 2 are hidden via Visibility options.Example 2:
Section 1 -> Column 1 -> Widget 1
Section 1 -> Column 2 -> Widget 2
Section 1 -> Column 3 -> Section 2 -> S2_Column 1 -> Widget 3
____
Section 1 – “Hide when empty” option “ON”
Section 2 – “Hide when empty” option “OFF”
____
Result: Section 1 will never be hidden because Section 2 has to be displayed.____
Section 1 – “Hide when empty” option “ON”
Section 2 – “Hide when empty” option “ON”
____
Result: Section 1 will be hidden if Widget 1 & 2 & Section 2 will be hidden. Section 2 will be hidden if Widget 3 will be hidden.Here is a small demo: https://drive.google.com/file/d/1KrR3ihJIpg8Zc8gXW6YKnE9XI8M9eMzb/view
Note: If any of the widgets has the option “Keep HTML/Hide by CSS” enabled, it will NOT work because that forces the element to be hidden via CSS.
- The topic ‘Hiding ACF fields’ is closed to new replies.
