Personalize a pesquisa de produtos WooCommerce em seu site WordPress
Deseja personalizar a pesquisa de produtos WooCommerce em sua loja online? WooCommerce fornece uma página de loja separada para uma lista de produtos. Ao modificar as pesquisas de produtos, seu cliente pode filtrar o produto desejado na própria página da loja. Neste artigo, estudamos como personalizar uma pesquisa de produto WooCommerce no site WordPress.
WordPress vem com o formulário de pesquisa integrado. Quando um usuário insere alguma palavra-chave em um campo de pesquisa, ele redireciona para a página de pesquisa onde o conteúdo relacionado à palavra-chave será exibido. No WordPress, a página de pesquisa normalmente se parece com uma página de lista de postagens.
Esse fluxo de pesquisa é ideal para sites CMS. Mas, quando se trata de WooCommerce, precisamos modificar esse fluxo.
Para WooCommerce, quando um usuário procura o produto, ele deve mostrar o resultado filtrado na página da loja. Não faz sentido mostrar o resultado no formato de uma página de listagem de postagens.
Deixe-me explicar através das imagens.
No meu caso, estou usando o tema ‘vinte e quinze’. Instalei o plug-in WooCommerce e alguns produtos estão listados na página da minha loja.
Agora, quando eu insiro a palavra-chave dizer ‘desenvolvimento’ no campo de pesquisa, ele redireciona para uma página onde vejo o produto conforme mostrado na imagem abaixo.
Isso é algo que não queremos em um site. Afinal, é uma loja online, então preferimos que a pesquisa de produtos seja filtrada na página da loja como abaixo.
Dito isso, vamos ver como personalizar a pesquisa de produtos no WooCommerce.
Personalize a pesquisa de produtos do WooCommerce
O WooCommerce armazena todos os produtos com o post_type ‘produto’. Para atingir nosso objetivo, precisamos passar o parâmetro post_type=productno URL de pesquisa.
Basicamente, quando clicamos no botão de pesquisa, precisamos modificar o URL
YOUR_SITE_URL /? S = development
Com
YOUR_SITE_URL /? S = development & post_type = product
Para isso, precisamos criar um searchform.phparquivo no diretório do nosso tema ativo. Este é o arquivo do qual o WordPress exibe um formulário de pesquisa. Se esse arquivo não for encontrado em uma pasta de tema, o formulário de pesquisa será renderizado a partir do arquivo principal do WordPress. O desenvolvedor deve criar este arquivo na pasta do tema se ele não existir.
Se você já tem searchform.phpem seu tema, então você só precisa adicionar um campo oculto ao formulário conforme mostrado no código abaixo.
searchform.php
<form method="get" action="<?php echo home_url('/'); ?>">
<input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
<input type="hidden" name="post_type" value="product">
</form>Aqui, você deve adicionar algum CSS a este formulário e combiná-lo com o design do seu site.
Observe que passamos um campo oculto com o nome ‘post_type’ e valor como ‘produto’. Esta é a lógica real para personalizar a pesquisa de produtos no WooCommerce.
Agora, tente inserir qualquer nome de produto no campo de pesquisa, ele irá redirecioná-lo para a página da loja. E na página da loja, você verá o resultado filtrado relacionado à palavra-chave.
Espero que você entenda como personalizar a pesquisa de produtos WooCommerce em seu site WordPress. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.
Artigos relacionados
- Um guia rápido sobre WooCommerce REST API
- Como adicionar endpoints personalizados à API WordPress
- Como exibir produtos relacionados usando WooCommerce REST API