Em vez do editor WordPress convencional, o WordPress versão 5.0 apresenta o Editor Gutenberg. Este é um personalizador de páginas que permite usar uma variedade de blocos para personalizar suas páginas. Você pode configurar rapidamente a página da sua loja usando WooCommerce e o Block Editor. Agora vamos ver como criar uma página Store no Block Editor com esses produtos passo a passo. O plugin WooCommerce adiciona blocos adicionais ao Editor WordPress Gutenberg.
Guia passo a passo
Etapa 1: crie a página da loja
WooCommerce cria uma página da Loja para você; Páginas > loja é onde você o encontrará. Você será levado ao editor de blocos do WordPress Gutenberg se clicar no link de edição abaixo do nome da página da loja.
Passo 2: Crie um layout com o editor de blocos
Agora que a página está instalada e funcionando no seu site WordPress, é hora de preenchê-la com conteúdo! Este é o ponto em que sua página começa a tomar forma.
Ao pesquisar Blocos no Editor de Blocos, lembre-se de que os blocos WooCommerce possuem sua própria área. Eles podem ser usados para exibir várias categorias de conteúdo relacionado à loja. Basta escolher um e colocá-lo em seu design. Esses blocos são essenciais para criar uma página de loja profissional usando WooCommerce e Gutenberg. Você pode continuar adicionando os blocos sedados um abaixo do outro, dependendo da quantidade de conteúdo que deseja adicionar à página da sua loja. Por exemplo, você pode pegar o bloco ‘produtos em destaque’ e arrastá-lo para o topo da página, conforme mostrado abaixo.
Depois de colocar o bloco, ele solicitará que você selecione o produto em destaque entre os produtos criados. Vamos selecionar ‘Cap’ para este exemplo.
Esta é a aparência da página da loja depois que adicionamos o bloco ‘imagem em destaque’.
Etapa 3: personalize seu design
É hora de modificar cada bloco agora que você configurou a estrutura da página da sua loja com os blocos de Gutenberg. Certas configurações podem precisar ser alteradas dependendo de como você deseja que a página da sua loja funcione. Este segmento pode ser apressado ou você pode aproveitar o tempo e realmente explorar tudo o que cada bloco tem a oferecer.
Explore as configurações do bloco mostradas na seção à direita clicando em cada bloco que você criou. Use o botão “Visualizar” no canto superior direito da página se não tiver certeza de como será o resultado final de uma configuração.
Aqui está uma prévia da minha página de teste da ‘loja’
Etapa 4: verifique seu trabalho e adicione os retoques finais
Agora é hora de salvar e testar a loja para ter certeza de que ela está funcionando. Selecione o botão “Publicar” no canto superior direito da tela para salvar seu trabalho. Não se preocupe, os visitantes do seu site só poderão ver a página mais tarde. Adicione “/shop” após o URL no front-end do seu site. Sua loja agora deve estar visível em seu navegador.
Examine o site e teste as ferramentas de filtro e classificação junto com os links dos produtos para ver se estão funcionando corretamente. Isso é para garantir que os itens sejam exibidos com precisão.
