{"id":28019,"date":"2021-05-30T16:24:00","date_gmt":"2021-05-30T13:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28019"},"modified":"2021-10-18T04:06:03","modified_gmt":"2021-10-18T01:06:03","slug":"personalize-a-pesquisa-de-produtos-woocommerce-em-seu-site-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/personalize-a-pesquisa-de-produtos-woocommerce-em-seu-site-wordpress\/","title":{"rendered":"Personalize a pesquisa de produtos WooCommerce em seu site WordPress"},"content":{"rendered":"

Deseja personalizar a pesquisa de produtos WooCommerce em sua loja online? WooCommerce fornece uma p\u00e1gina de loja separada para uma lista de produtos. Ao modificar as pesquisas de produtos, seu cliente pode filtrar o produto desejado na pr\u00f3pria p\u00e1gina da loja. Neste artigo, estudamos como personalizar uma pesquisa de produto WooCommerce no site WordPress.<\/p>\n

WordPress vem com o formul\u00e1rio de pesquisa integrado. Quando um usu\u00e1rio insere alguma palavra-chave em um campo de pesquisa, ele redireciona para a p\u00e1gina de pesquisa onde o conte\u00fado relacionado \u00e0 palavra-chave ser\u00e1 exibido. No WordPress, a p\u00e1gina de pesquisa normalmente se parece com uma p\u00e1gina de lista de postagens.<\/p>\n

Esse fluxo de pesquisa \u00e9 ideal para sites CMS. Mas, quando se trata de WooCommerce, precisamos modificar esse fluxo.<\/p>\n

Para WooCommerce, quando um usu\u00e1rio procura o produto, ele deve mostrar o resultado filtrado na p\u00e1gina da loja. N\u00e3o faz sentido mostrar o resultado no formato de uma p\u00e1gina de listagem de postagens.<\/p>\n

Deixe-me explicar atrav\u00e9s das imagens.<\/p>\n

No meu caso, estou usando o tema ‘vinte e quinze’. Instalei o plug-in WooCommerce e alguns produtos est\u00e3o listados na p\u00e1gina da minha loja.<\/p>\n

\"Personalize<\/a><\/p>\n

Agora, quando eu insiro a palavra-chave dizer ‘desenvolvimento’ no campo de pesquisa, ele redireciona para uma p\u00e1gina onde vejo o produto conforme mostrado na imagem abaixo.<\/p>\n

\"Personalize<\/a><\/p>\n

Isso \u00e9 algo que n\u00e3o queremos em um site. Afinal, \u00e9 uma loja online, ent\u00e3o preferimos que a pesquisa de produtos seja filtrada na p\u00e1gina da loja como abaixo.<\/p>\n

\"Personalize<\/a><\/p>\n

Dito isso, vamos ver como personalizar a pesquisa de produtos no WooCommerce.<\/p>\n

Personalize a pesquisa de produtos do WooCommerce<\/h3>\n

O WooCommerce armazena todos os produtos com o post_type ‘produto’. Para atingir nosso objetivo, precisamos passar o par\u00e2metro post_type=product<\/code>no URL de pesquisa.<\/p>\n

Basicamente, quando clicamos no bot\u00e3o de pesquisa, precisamos modificar o URL<\/p>\n

YOUR_SITE_URL \/? S = development<\/p>\n

Com<\/p>\n

YOUR_SITE_URL \/? S = development & post_type = product<\/p>\n

Para isso, precisamos criar um searchform.php<\/code>arquivo no diret\u00f3rio do nosso tema ativo. Este \u00e9 o arquivo do qual o WordPress exibe um formul\u00e1rio de pesquisa. Se esse arquivo n\u00e3o for encontrado em uma pasta de tema, o formul\u00e1rio de pesquisa ser\u00e1 renderizado a partir do arquivo principal do WordPress. O desenvolvedor deve criar este arquivo na pasta do tema se ele n\u00e3o existir.<\/p>\n

Se voc\u00ea j\u00e1 tem searchform.php<\/code>em seu tema, ent\u00e3o voc\u00ea s\u00f3 precisa adicionar um campo oculto ao formul\u00e1rio conforme mostrado no c\u00f3digo abaixo.<\/p>\n

searchform.php<\/strong><\/p>\n

<form method=\"get\" action=\"<?php echo home_url('\/'); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"text\" name=\"s\" placeholder=\"What you are looking for?\" value=\"<?php the_search_query(); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"post_type\" value=\"product\">\n<\/form><\/code><\/pre>\n
Aqui, voc\u00ea deve adicionar algum CSS a este formul\u00e1rio e combin\u00e1-lo com o design do seu site.<\/p>\n
Observe que passamos um campo oculto com o nome ‘post_type’ e valor como ‘produto’. Esta \u00e9 a l\u00f3gica real para personalizar a pesquisa de produtos no WooCommerce.<\/p>\n
Agora, tente inserir qualquer nome de produto no campo de pesquisa, ele ir\u00e1 redirecion\u00e1-lo para a p\u00e1gina da loja. E na p\u00e1gina da loja, voc\u00ea ver\u00e1 o resultado filtrado relacionado \u00e0 palavra-chave.<\/p>\n
Espero que voc\u00ea entenda como personalizar a pesquisa de produtos WooCommerce em seu site WordPress. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n