{"id":13116,"date":"2022-06-14T13:11:42","date_gmt":"2022-06-14T13:11:42","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=13116"},"modified":"2023-07-19T09:53:47","modified_gmt":"2023-07-19T09:53:47","slug":"how-to-manage-custom-fields-in-ajax-search-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/","title":{"rendered":"How to Manage Custom Fields in AJAX Search"},"content":{"rendered":"\n<p>Using the <em>JetSearch<\/em><strong><em> <\/em><\/strong>plugin, you have an opportunity to display certain information from the meta fields of the posts in a search results area. In the <strong>Custom Fields<\/strong> section of the <strong>AJAX Search<\/strong> widget, you need to specify meta keys, and the particular data will be shown in the search.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"managing-custom-fields\">Managing Custom Fields <\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"wordpress-editor\">WordPress Editor<\/h3>\n\n\n\n<p>Open the page where the <strong>AJAX Search<\/strong> block is located. Then, click on the block to see the settings area.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/page-with-ajax-search.png\" alt=\"page with ajax search\">\n\n\n\n<p>First, specify the search areas (post types) in the <strong>Source <\/strong>field in the <strong>Search Query<\/strong> tab.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/ajax-search-block-source.png\" alt=\"ajax search block source\">\n\n\n\n<p>Now uncover the <strong>Custom Fields<\/strong> tab. There are <strong>Show Meta Before\/After Title<\/strong> and <strong>Show Meta Before\/After Content<\/strong> options, which have the same settings.&nbsp;<\/p>\n\n\n\n<p>You can enable the appropriate option (options) for displaying extra information from the meta fields in the search results. Moreover, you can determine the position of the meta fields in the corresponding settings field.<\/p>\n\n\n\n<p>After that, proceed to create a meta fields list with as many items as you need, just clicking the \u201c<strong>Add new item<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/ajax-search-block-custom-fields-settings.png\" alt=\"ajax search block custom fields settings\">\n\n\n\n<p><strong>Item #1<\/strong> appears by default, and you can customize it as necessary by clicking it. The settings windows will show up.&nbsp;<\/p>\n\n\n\n<p>In the <strong>Key<\/strong> field, you need to insert the meta key from the post meta table in the database. The <strong>Label<\/strong> option allows defining the label text. In the <strong>Value Format<\/strong> string, you can insert value format (using HTML markup), <strong>%s<\/strong> is meta value.<\/p>\n\n\n\n<p>You can use the <strong>Prepare meta value with callback<\/strong> option for the correct display of the date, URL, and images.<\/p>\n\n\n\n<p>There is a <strong>_pricing <\/strong>meta field in our case, and we want to display its data.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/ajax-search-meta-field-configured.png\" alt=\"ajax search meta field configured\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"elementor-page-builder\">Elementor Page Builder<\/h3>\n\n\n\n<p>The same settings are also available in the Elementor Page Builder. Proceed to the page built with Elementor and repeat the same steps described before.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/ajax-search-widget-custom-fields-in-elementor.png\" alt=\"ajax search widget custom fields in elementor\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-results\">Check the Results<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Let\u2019s check how it works on the front end page.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/results-area-with-meta-field-data.png\" alt=\"results area with meta field data\">\n<\/div><\/div>\n\n\n\n<p>Now you can easily display custom fields in the search results with the <strong>AJAX Search<\/strong> widget\/block from the <strong><em>JetSearch <\/em><\/strong>plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Read how to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[431],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Manage Custom Fields in AJAX Search | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Manage Custom Fields in AJAX Search | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-19T09:53:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/page-with-ajax-search.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/\",\"name\":\"How to Manage Custom Fields in AJAX Search | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-06-14T13:11:42+00:00\",\"dateModified\":\"2023-07-19T09:53:47+00:00\",\"description\":\"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Manage Custom Fields in AJAX Search\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Manage Custom Fields in AJAX Search | Crocoblock","description":"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Manage Custom Fields in AJAX Search | Crocoblock","og_description":"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/","og_site_name":"Help Center","article_modified_time":"2023-07-19T09:53:47+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/06\/page-with-ajax-search.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/","name":"How to Manage Custom Fields in AJAX Search | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-06-14T13:11:42+00:00","dateModified":"2023-07-19T09:53:47+00:00","description":"Learn to showcase information from the custom fields in the search results area of the AJAX Search block\/widget available in the JetSearch plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-manage-custom-fields-in-ajax-search-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Manage Custom Fields in AJAX Search"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/13116"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=13116"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=13116"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=13116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}