Adicione à página de produto do WooCommerceEtiquetas personalizadasPode ajudá-lo a apresentar melhor as informações sobre os produtos e a melhorar a experiência do utilizador. Estas etiquetas podem ser utilizadas para fornecer descrições adicionais, análises de utilizadores, especificações ou outras informações importantes. Com o plugin Elementor, é fácil personalizar estas etiquetas sem escrever código. Este artigo dar-lhe-á um guia passo-a-passo sobre como adicionar etiquetas personalizadas às suas páginas de produtos WooCommerce utilizando o Elementor.
Passo 1: Instale e active os plug-ins necessários
Em primeiro lugar, tem de se certificar de que os seguintes plugins estão instalados:
- WooCommercePlugin de funcionalidade de comércio eletrónico principal.
- Elementor Pro: ObrigatóriomontagemVersão Propara personalizar a página utilizando widgets relacionados com o WooCommerce.
- Gestor de separadores do WooCommerce(Opcional): Ajuda a facilitar a gestão dos separadores nas páginas de produtos do WooCommerce.
Etapa 2: Crie ou edite o WooCommerceofertaspágina web
- Aceda à página do produtoNo backend do WordPress, navegue até ao diretório
ofertas
>Todos os produtos
Em seguida, selecione o produto que pretende editar e clique emcompilador
Botão.
- Editar com o ElementorNa página de edição do produto, clique em
Editar com o Elementor
para aceder ao editor do Elementor.
Passo 3: Adicione separadores personalizados
- Adicionar estrutura de separadores de produtos::
- No editor do Elementor, clique em
Adicionar um novo contentor
selecione um botão apropriadocolunasEsquema. - Utilizando a funçãoWidget de separadoresArraste e largue-o na secção que acabou de criar. O widget Separadores adicionará automaticamente alguns separadores de amostra.
- No editor do Elementor, clique em
- Editar conteúdo dos separadores::
- Clique na área do título de cada separador para modificar o título do separador, como "Descrição", "Número do modelo", "FAQ", etc.
- Clique na área de conteúdo do separador para adicionar livrementeTexto, imagens, listase muito mais, tirando o máximo partido do rico conjunto de widgets do Elementor para personalizar o conteúdo de cada separador.
Passo 4: Adicione conteúdo dinâmico do WooCommerce a cada separador
O Elementor pode converterConteúdo dinâmico do WooCommerceAdicione a separadores. Por exemplo, exiba informações de descrição do produto geradas dinamicamente no separador Descrição.
- Inserção de dados dinâmicosClique nos widgets em qualquer área de conteúdo e selecione a opção do lado esquerdoÍcones de rótulos dinâmicos. Em seguida, selecione o conteúdo dinâmico relacionado com o WooCommerce no menu pendente, tal como
Descrição do produto
,Título do produto
talvezAnálises de produtos
.
- Conceção e personalizaçãoO Elementor também pode ser ajustado através da afinação doEstilos, espaçamento, tipos de letra, coresetc. para personalizar o aspeto de cada separador. Certifique-se de que o design dos separadores é coerente com o estilo geral do sítio.
Passo 5: Guarde e pré-visualize
Quando tiver terminado de adicionar e personalizar os separadores, clique na parte inferior da página no botãoatualização
para guardar as alterações. A página do produto pode então ser pré-visualizada para garantir que todos os separadores são apresentados corretamente e que o conteúdo está a ser carregado corretamente.
Passo opcional: Utilizar o gestor de separadores do WooCommerce
Se forem desejadas funcionalidades de gestão de separadores mais poderosas, considere a utilização doGestor de separadores do WooCommercePlugin. Este plugin pode:
- Adicione separadores personalizados globais que são automaticamente aplicados a todas as páginas de produtos.
- Arraste e largue facilmente para reordenar os separadores.
- Configure diferentes layouts de Tabs para diferentes produtos.
Passo 6: Optimize a experiência do utilizador
Para garantir que os utilizadores possam navegar facilmente pelas informações do seu produto, existem tambémSeparadorespara adicionar efeitos de animação. Exemplo:
- animação fade-in/out: na secção
nível elevado
pode adicionar efeitos de fade-in e fade-out aos separadores para entrar e sair, de modo a tornar a mudança de página mais suave.
- conceção reactivaVerifique como os seus separadores são apresentados em dispositivos móveis para garantir que proporcionam uma boa experiência de utilizador em todos os dispositivos.
resumos
aprovar (um projeto de lei ou uma inspeção, etc.)Elementorresponder com cânticosWooCommercePode adicionar facilmente etiquetas personalizadas às suas páginas de produtos para tornar as informações sobre os seus produtos mais claras e mais bem organizadas.
Plug-ins recomendados::
- Elementor ProUm conjunto rico de ferramentas para a conceção de páginas de produtos.
- Gestor de separadores do WooCommerce(Opcional): Uma ferramenta de gestão de separadores mais avançada para comerciantes com vários produtos.
Siga os passos deste artigo para adicionar etiquetas de produto personalizadas à sua loja WooCommerce e personalizar cada etiqueta com conteúdo e design, conforme necessário.