Stand with Ukraine. Fight for freedom and democracy

Donate
Troubleshooting //
Cannot Display Taxonomy Terms in Different Colors with Color Picker Field

Cannot Display Taxonomy Terms in Different Colors with Color Picker Field

Question

I want to display the taxonomy terms in different colors. What should I do?

Answer

Please find below a step-by-step guide:

  1. Add a Meta Box to the given taxonomy.

    You can add this meta box at the stage of Custom Post Type creation or anytime later. Just go to JetEngine > Meta Boxes, click “Add New” and configure the General Settings as follows:

    meta box creation

    You should also add a new meta field and set “Colorpicker” as its Field type. Please note that you should have a ready-made taxonomy to be able to attach this meta box to it.

  2. Set colors for each taxonomy term.

    Proceed to the taxonomy terms section (or Tags) and click to edit one of them. In the newly-opened window, select and assign the color you fancy. Update the changes. Repeat the routine for every taxonomy term on your list.

    editing cottages tag color field
  3. Create a new listing.

    Go to JetEngine > Listings, click “Add New” and set “Terms” as a Listing Source. In the From taxonomy select, pick the name of the taxonomy you’ve been working on. Click to create a new listing and check its settings in Elementor.

    listing item settings in Elementor
  4. Add the Dynamic Field widget to the blank canvas and select “Term name” as the Object Field.

    dynamic field settings in Elementor
  5. Tune the custom color settings.

    Now it’s possible to apply the color you’ve previously set in the color picker field. Click to edit the Section, press the Style tab, then choose “Custom” for Background Type. Hit the last icon to the right of the Color item and you’ll see a small window. Press the Dynamic Tag icon.

    dynamic tag icon in section background settings

    Then select the “Custom field” option within JetEngine attributes:

    jetengine attributes list

    Once the custom field window pops up, choose the custom field “Color” you’ve created at Step 1.

    choosing custom field color in dynamic tag settings

    As a result, the entire section will achieve the background color that has been selected for this Term in the Color meta field. Don’t forget to save the Listing.

    custom color applied to section background

That’s how the Colorpicker meta field works. You can now add this Listing to any page you wish using the Listing Grid widget. Enjoy!

Was this article helpful?
YesNo
Still need help?
Submit a request