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 is the most popular Plugin do WordPress for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its backstage.

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á paraCustomize WooCommerce

Below, you’ll find the basic setup you’ll need to customize 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

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPIniciante, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

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:

To implement the function, you should:

• 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.
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• 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

To save the changes above, you’ll need to:

• 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

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

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:

A couple of extra notes:

• É 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

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more Tutoriais do WooCommerce on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, Contate-nos for more information!