12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Aug 12, 2019

[Condition] Checkbox State

Sridhar Katakam

This members-only tutorial provides the steps to register a custom condition called "Checkbox State" that will return true if the provided checkbox-type custom field's state is ticked in Oxygen and false if the checkbox is not ticked.

In short, this allows you to output elements depending on whether a checkbox is ticked or not.

Use Case

Let's say you have a project CPT and a bunch of corresponding fields like project budget, project completion date, architects and engineers.

You edit CPT's single Template in Oxygen and add a Section to output these values below a heading that reads "Project Details".

Now, what if you want to have a "Show Project Info?" checkbox and want the Project Details section to be output/printed on the front end only if this checkbox is ticked?

You simply follow the steps in this tutorial and add a condition on the Section like this:

Usage

Here == operator is used as checked state and != as unchecked state.

The name of the custom field is to be entered in the right box.

If the custom field has been created using Toolset Types, append wpcf- at the front. Ex.: if the field slug is project-info-visible, you would enter wpcf-project-info-visible.

Do NOT click the "data" button for the value field and use Oxygen's integration with ACF/Toolset. Type/paste the custom field name manually.

Note:

If using ACF, the field type of interest is actually True / False and not Checkbox.

If using Toolset, the field type is Checkbox.

Custom Condition Code

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Condition] Checkbox State

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right