Personalize o WooCommerce: adicionando campos personalizados aos seus produtos simples

Talvez você esteja configurando seu site de comércio eletrônico do zero e queira vender diferentes tipos de produtos. Talvez você tenha uma loja virtual há alguns anos e queira expandir seus horizontes e oferecer novos produtos. Seja qual for o motivo que o trouxe a este tutorial, o fato é que você precisa personalizar o WooCommerce. E você pode encontrar tudo o que precisa saber com o Bright Vessel!

WooCommerce é o mais popular Plugin do WordPress para e-commerce e a solução preferida de muitos vendedores. Por quê? É gratuito e altamente versátil, pois é fácil personalizar o WooCommerce para atender às suas necessidades. Embora o plugin ofereça uma série de opções definidas, há muito que você pode fazer nos bastidores.

Muitos dos nossos clientes na Bright Vessel buscam uma solução de e-commerce exclusiva que leve em conta as nuances de seus negócios específicos. Com nossa vasta experiência com WooCommerce, podemos ajudar você a configurar sua loja virtual de acordo com suas necessidades. Com isso em mente, vamos começar!

O que você precisará para Personalize o WooCommerce

Abaixo, você encontrará a configuração básica necessária para personalizar o WooCommerce:

• Seu sistema operacional de desktop preferido, seja MacOS, Microsoft Windows, distribuições Linux, etc.
• Pré-processador de hipertexto (PHP) pelo menos 5.6.25.
• Servidores HTTP Apache ou Nginx.
• MySQL 5.6.33.
• Um WordPress atualizado, ou pelo menos versão 4.7.
• O plugin WooCommerce está pelo menos na versão 3.9.
• O ambiente de desenvolvimento integrado (IDE) de sua escolha.

Personalize o WooCommerce para adicionar campos personalizados

Dito isso, os campos personalizados no WooCommerce são um pouco diferentes dos do WordPress. Em vez de trabalhar com metadados em posts, como o WordPress define, vamos nos referir a "campos personalizados" como um campo de texto real. No menu do WooCommerce, acesse a aba Produtos Vinculados do tipo Produtos Simples.

API do WooCommerce - Ganchos

Há um conceito crítico do WordPress que precisamos esclarecer antes de nos aprofundarmos em como personalizar o WooCommerce: Ganchos. De acordo com WPIniciante Ganchos são “funções aplicáveis a uma Ação ou a um Filtro no WordPress. Ações e Filtros no WordPress são funções que você pode modificar pelos desenvolvedores de temas e plugins para alterar a funcionalidade padrão do WordPress”.

O WooCommerce fornece sua API que permite aos usuários se conectarem aos ciclos de vida de suas páginas. No entanto, a API do WooCommerce é um pouco diferente da API de metadados do WordPress. Há dois ganchos principais que você precisa conhecer:

• Woocommerce_product_options_grouping. Este hook serve para criar uma descrição e uma entrada de texto que aceita nossos valores.
• woocommerce_process_product_meta. O uso desta função é processar, higienizar e salvar o valor da entrada de texto.

Para usar esses ganchos, você precisará defini-los e personalizar sua funcionalidade.

Personalizando a funcionalidade

• Defina uma classe com uma variável since como dado de instância. Essa variável será uma representação do ID do campo de entrada, conforme mostrado ao usuário:

Agora você pode usar os ganchos acima adicionando uma função de inicialização que registra duas funções personalizadas no gancho.

Campo de entrada de texto

Para adicionar um campo de entrada de texto, você deve primeiro adicionar uma função vinculada a woocommerce_product_options_grouping:

Para implementar a função, você deve:

• Crie um ID exclusivo para identificar o campo de texto. Use os dados da instância no construtor.
• Use um rótulo para adicionar uma descrição ao campo de entrada.
• Se desejar, você pode especificar um espaço reservado.
• Se isso tornar as coisas mais confortáveis, você pode exibir uma dica de ferramenta quando o usuário passar o mouse sobre um ícone.
• Para adicionar texto à dica de ferramenta, você pode usar a opção de descrição.

As informações acima estarão em um array associado e, em seguida, chegarão ao woocommerce_wp_text_input. Esta função da API para personalizar o WooCommerce gera um elemento de texto com as informações que você acabou de fornecer.

Salvando informações

Para salvar as alterações acima, você precisará:

• No método init, adicione este código:
• Verifique se há vários valores nonce presentes; caso contrário, você deve retornar false como precaução de segurança. Você pode detectar valores nonce verificando o que o WooCommerce fornece especificamente no código-fonte.
• Na coleção $_POST correspondente à entrada do usuário, higienize os dados.
• Salve as informações registradas anteriormente na tabela de metadados da postagem.

Renderizando informações no front-end

Para renderizar informações no front-end, você precisará criar uma nova classe. Você precisará especificamente de:

Um ID de campo de texto e sua inicialização no construtor.

• Uma função de inicialização para conectar o front end ao código criado anteriormente.
• Para renderizar o valor real.

Iniciando o plugin

Você está quase terminando este tutorial sobre como personalizar o WooCommerce! O último passo é configurar um arquivo bootstrap para iniciar o plugin com todas as alterações recentes. Aqui está o código para começar:

Algumas notas extras:

• É aqui que você inclui as dependências.
• Assim que a função estiver funcionando, verifique se ela está exibindo o painel. Se estiver, a parte correta do plugin está carregada corretamente; caso contrário, a exibição padrão está.

Para concluir

Agora que você sabe como personalizar o WooCommerce para adicionar seus campos a produtos simples, está no caminho certo para fornecer exatamente os serviços que deseja. Você pode encontrar mais Tutoriais do WooCommerce em nosso blog. Se você está procurando especialistas que saibam como usar este popular plugin de comércio eletrônico, Contate-nos para mais informações!