O WooCommerce é uma plataforma poderosa para criação de lojas online, mas muitas vezes, você pode precisar adicionar informações personalizadas aos seus produtos que não estão disponíveis nos campos padrão. Uma solução para isso é criar campos personalizados. Neste guia, vamos mostrar como criar campos personalizados sem a necessidade de plugins, destacando os benefícios dessa abordagem e oferecendo um passo a passo intuitivo para implementar essa funcionalidade.

Por que Evitar Plugins?

Plugins são uma maneira conveniente de adicionar funcionalidades ao WooCommerce, mas existem razões sólidas para evitar usá-los para campos personalizados:

Prós:

1. Performance: Evitar plugins desnecessários pode melhorar a velocidade e o desempenho do seu site, uma vez que menos código é carregado.
2. Controle Total: Criando campos personalizados via código, você tem controle total sobre como eles são exibidos e funcionam.
3. Segurança: Menos plugins significam menos pontos de entrada para possíveis vulnerabilidades de segurança.
4. Flexibilidade: A abordagem de código permite que você crie campos personalizados precisamente da maneira que deseja.

Contras:

1. Habilidade Técnica: Requer algum conhecimento de PHP e WordPress/WooCommerce para implementar campos personalizados via código.
2. Tempo e Esforço: Pode levar mais tempo para configurar do que simplesmente instalar um plugin.

Preparando-se para Adicionar Campos Personalizados

Antes de começar, certifique-se de fazer um backup do seu site e do seu tema, para evitar problemas caso algo dê errado.

Adicionando Campos Personalizados

Aqui está um passo a passo para adicionar campos personalizados ao cadastro de produtos no WooCommerce:

1. Acesse o Arquivo functions.php: No painel de administração do WordPress, vá para "Aparência" > "Editor" e selecione o arquivo functions.php do seu tema ativo.
2. Adicione o Código: Cole o código fornecido abaixo no final do arquivo functions.php. Este código define o campo personalizado.
3. Salve as Alterações: Certifique-se de salvar as alterações no arquivo functions.php.

// Adiciona um campo personalizado ao cadastro de produtos do WooCommerce
function adicionar_campo_personalizado_produto() {
    global $post;

    echo '<div class="options_group">';

    woocommerce_wp_text_input(
        array(
            'id' => '_campo_personalizado',
            'label' => __('Campo Personalizado', 'woocommerce'),
            'placeholder' => __('Digite seu valor aqui', 'woocommerce'),
            'desc_tip' => 'true',
            'description' => __('Digite a informação do campo personalizado aqui.', 'woocommerce')
        )
    );

    echo '</div>';
}
add_action('woocommerce_product_options_general_product_data', 'adicionar_campo_personalizado_produto');

// Salva o valor do campo personalizado
function salvar_campo_personalizado_produto($post_id) {
    $campo_personalizado = isset($_POST['_campo_personalizado']) ? sanitize_text_field($_POST['_campo_personalizado']) : '';

    update_post_meta($post_id, '_campo_personalizado', $campo_personalizado);
}
add_action('woocommerce_process_product_meta', 'salvar_campo_personalizado_produto');

Preenchendo os Campos Personalizados

Agora, para preencher os campos personalizados:

1. Acesse o painel de administração do WooCommerce.
2. Clique em "Produtos" e selecione o produto que deseja editar ou criar um novo produto.
3. Role para baixo até encontrar o campo personalizado que você adicionou.
4. Insira o valor desejado no campo personalizado.
5. Clique em "Atualizar" para salvar as alterações.

Exibindo os Campos Personalizados no Front-End

Para exibir os campos personalizados no front-end, você pode adicionar o código PHP relevante a um arquivo de modelo de produto personalizado, como single-product.php ou content-single-product.php. Use a função get_post_meta para recuperar o valor do campo personalizado e exibi-lo na localização desejada no seu tema.

$campo_personalizado = get_post_meta(get_the_ID(), '_campo_personalizado', true);
if (!empty($campo_personalizado)) {
    echo 'Campo Personalizado: ' . esc_html($campo_personalizado);
}

Conclusão

Criar campos personalizados no WooCommerce sem a necessidade de plugins oferece mais controle, melhor desempenho e segurança ao seu site. Embora possa exigir um pouco mais de esforço e habilidades técnicas, a recompensa de um site mais rápido e personalizado vale a pena. Siga este guia passo a passo para adicionar campos personalizados e aproveite ao máximo a flexibilidade do WooCommerce.

Sugestões de cursos

Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.

Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.

As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.

Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.

Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.

O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.

Saiba mais sobre o curso de Node.js, React e React Native.