{"id":6204,"date":"2022-10-12T15:49:44","date_gmt":"2022-10-12T12:49:44","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6204"},"modified":"2026-10-08T11:12:15","modified_gmt":"2026-10-08T08:12:15","slug":"search-box","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search-box\/","title":{"rendered":"Search Box"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acf0ce877678&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acf0ce877678\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2023-05-15-at-15.17.14.png\" alt=\"Search Box element displayed inside a Blocksy header\" class=\"wp-image-7122\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Search Box element in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Search Box<\/strong> element adds a search field directly to one of your header rows, giving visitors immediate access to your website&#8217;s search functionality without first opening a separate interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It provides many of the same search features as the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Search<\/strong><\/a> element, including live results, WooCommerce product information and control over which content types can be searched. The main difference is that the input field remains visible directly inside the header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use it, open the <strong>Customiser \u2192 Header<\/strong>, drag the <strong>Search Box<\/strong> element into the desired header row or supported area, and select it to configure its appearance and search behaviour.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acf0ce879f99&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acf0ce879f99\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"2940\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2026-10-08-at-11.10.31.png\" alt=\"\" class=\"wp-image-15278\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Search Box element configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Placeholder Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customise the placeholder displayed inside the search field before the visitor starts typing. This can be used to provide a short instruction or indicate what kind of content can be searched.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Input Controls<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>Input Maximum Width<\/strong> and <strong>Input Height<\/strong> to control the dimensions of the search field. Responsive controls let you adapt the Search Box independently for different device sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Icon<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the icon displayed inside the Search Box. You can use one of the available built-in designs or provide your own custom SVG icon for a more personalised appearance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Search Results<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These settings control the dynamic results displayed while visitors enter their search query.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Live Results<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Live Results<\/strong> to display matching content dynamically as the visitor types. When disabled, visitors can still submit their query normally and continue to the standard search results page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Live Results Images<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose whether featured images or product thumbnails are displayed alongside individual entries in the live results interface.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Live Results Product Price<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When WooCommerce products are included in the search, enable this option to display their current prices directly inside the live results.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Live Results Product Status<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display relevant WooCommerce product status information alongside products in the live results. This can include states such as <strong>In Stock<\/strong>, <strong>Out of Stock<\/strong> or <strong>On Sale<\/strong>, giving visitors additional information before they open a product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Taxonomy Filter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enable the <strong>Taxonomy Filter<\/strong> to let visitors narrow their search to a specific taxonomy term, such as a particular post category or product category.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is particularly useful on websites with a large amount of content, as visitors can restrict the search to the section that is most relevant to them before entering their query.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Taxonomy Children<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Taxonomy Children<\/strong> to include hierarchical child terms in the taxonomy filter. This allows visitors to browse and select nested terms, such as subcategories that belong to a parent category.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Search Through Criteria<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose which post types should be included in search queries. Depending on your WordPress configuration, the available choices can include <strong>Posts<\/strong>, <strong>Pages<\/strong>, <strong>Products<\/strong> and compatible Custom Post Types registered by other plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This lets you keep the Search Box focused on the types of content that are relevant to your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Search Through Taxonomies<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Search Through Taxonomies<\/strong> to include taxonomy terms in search queries alongside content from the selected post types. This allows visitors to find relevant categories, tags and other registered taxonomy terms in addition to individual posts, pages, products and Custom Post Types.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Search Box element adds a search field directly to one of your header rows, giving visitors immediate access to your website&#8217;s search functionality without first opening a separate interface. It provides many of the same search features as the Search element, including live results, WooCommerce product information and control over which content types can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6210,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6204","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"blocksy_meta":{"post_title_panel":"","has_hero_section":"default","838d9685195988528811d57442e641f8":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"ea88170beabde9cdcac1b13c13b2688e":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","3f8220fffdce925cf7ca9c907cf7d2d7":"","hero_structure":"narrow","8734640393010216f1393564ff59a892":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"7e959999f5d6477cca64807eea2cde3b":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"a60b53820445eb9c5f9de56fd902cd4a":"","page_structure_type":"default","651532dda55e168542fc3a1238d62269":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"7621b0ea7d770993532914db5b1dde94":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","a640b18b0499a81b5c0996582ca39e9f":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","1f40aafb474f9fbf6058a65f03281d99":"","header_footer_scripts_panel":"","header_scripts":"","7bc93bcf7a36c47996fceb616d4bcb08":"","header_after_body_scripts":"","5417e25db3062924b4f1ef1ade3b18fa":"","footer_scripts":"","docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6204"}],"version-history":[{"count":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204\/revisions"}],"predecessor-version":[{"id":15279,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204\/revisions\/15279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6210"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6204"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}