Como criar um tipo de produto WooCommerce personalizado programaticamente

Ao construir uma loja WooCommerce complexa, pode ser necessário criar suas próprias soluções para problemas específicos. Um desses problemas é a falta de tipos específicos de produtos WooCommerce. É por isso que nós da QuadLayers trouxemos para você nosso guia sobre como criar um tipo de produto WooCommerce personalizado para o seu site.

Veremos como você pode definir seus tipos de produtos, habilitar opções e preços específicos para eles e muito mais. Mas primeiro, vamos ver os tipos de produtos WooCommerce e o que os tipos de produtos personalizados podem fazer.

Por que adicionar um tipo de produto personalizado no WooCommerce?

Por padrão, o WooCommerce possui quatro tipos de produtos exclusivos. Esses são:

• produto simples
• produto variável
• Externo/Afiliado
• Produto para download

Obviamente, com plug-ins externos do WooCommerce, você pode adicionar mais tipos de produtos, como produtos de assinatura, produtos reserváveis, associações e muito mais.

Mas e se você quisesse criar um tipo de produto diferente desses tipos específicos? Se você tiver requisitos específicos que os tipos de produtos WooCommerce padrão não podem atender, ou se quiser criar um tipo de produto personalizado, como associação ou produtos de leilão sem usar um plug-in de terceiros, poderá criar um tipo de produto personalizado usando um pouco de codificação.

Usar um tipo de produto personalizado significa adicionar configurações diferentes e exclusivas ao tipo de produto. Por exemplo, se você quiser um tipo de produto variável específico e adicionar diferentes configurações de visibilidade ou preço para ele, poderá fazer isso usando um tipo de produto personalizado. Além disso, você também pode definir um tipo de produto específico para um único tipo de produto exclusivo e alterar as configurações do tipo de produto apenas se desejar.

Independentemente de suas necessidades, ter seu tipo de produto personalizado oferece mais flexibilidade ao personalizar e definir os produtos que você vende em seu site.

Como criar um tipo de produto WooCommerce personalizado?

O processo de criação de um tipo de produto WooCommerce é bastante simples, mas requer algum nível de codificação. Recomendamos que nossos clientes aprendam um pouco mais sobre como criar plug-ins personalizados do WordPress e adicionar códigos a eles se quiserem continuar com este artigo.

Depois de entender os fundamentos da criação de plugins do WordPress no diretório do seu site, vá em frente e abra o diretório de instalação do WP , abra wp-content/plugins e crie a pasta ' QuadLayers_custom-product-type '. Para nossa demonstração, usaremos nosso diretório localhost.

Depois disso, crie um arquivo chamado ' Quadlayers_custom-product-type.php .' Este é o seu arquivo principal que funciona como uma porta de entrada para o restante dos recursos do seu plug-in.

Abra este arquivo e cole as seguintes linhas de código no arquivo:

 <?php

/**
* Nome do plug-in: tipo de produto personalizado Quadlayers
* Descrição: Guia do Code for Quadlayers sobre como criar um tipo de produto WooCommerce personalizado
*/

if (! definido('ABSPATH')) {
Retorna;
} 

Este conjunto de códigos define seu plug-in adicionando um nome e uma descrição do plug-in. Por enquanto, isso é suficiente, pois precisamos adicionar mais códigos a esse arquivo para que ele funcione. Agora, você precisa ativar seu plug-in recém-criado. Manteremos o plug-in ativado para o tutorial e adicionaremos mais códigos à medida que avançamos.

Então vá em frente e abra seu WP Admin Dashboard e clique em Plugins . Aqui, você deve ver um novo plugin chamado Quadlayers Custom Product Type. Vá em frente e ative -o e vá para a próxima etapa do tutorial.

Registrar tipo de produto WooCommerce personalizado

Em seguida, criaremos uma função para definir nosso tipo de produto personalizado e registrá-lo como um tipo de produto WooCommerce. Para isso, adicione este código ao arquivo principal do seu plugin:

 add_action( 'init', 'register_demo_product_type' );
função register_demo_product_type() {
classe WC_Product_Demo estende WC_Product {

public function __construct($produto) {
$this->product_type = 'demonstração';
pai::__construct($produto);
}
}
}

Isso registrará um tipo de produto personalizado chamado demo. Caso queira alterar o nome do tipo de produto, basta alterar o texto em $this->product_type = 'demo';

Adicionar opção de produto WooCommerce personalizado.

Depois disso, precisamos adicionar o tipo de produto personalizado à lista suspensa Tipo de produto. Isso torna seu tipo de produto selecionável quando você cria ou edita um produto em seu WP Admin Dashboard. Adicione este código ao arquivo principal do seu plug-in e você verá uma nova opção na sua lista de Tipos de produto.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
função add_demo_product_type($tipos){
$types[ 'demo' ] = __( 'Produto de demonstração', 'dm_product' );
retornar $tipos; 
}

Este código adicionará seu tipo de produto personalizado à lista suspensa Dados do produto usando a linha $types['demo'] = __('Custom Product Type') . Você pode alterar o texto de Tipo de produto personalizado para qualquer coisa, como Produto de demonstração, Pedido personalizado, Cartão-presente, etc.

Agora, abra seu WP Admin Dashboard e crie um novo produto. No menu suspenso Tipo de produto , você verá uma nova opção chamada ' Produto de demonstração '.

Adicionando uma guia de tipo de produto personalizado

A função a seguir criará uma nova guia de configurações para seu tipo de produto personalizado. Dessa forma, você pode adicionar detalhes específicos ao seu tipo de produto que não são compartilhados com outros tipos de produtos.

Cole esta função para criar uma guia Detalhes do produto personalizado:

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
function demo_product_tab( $tabs) {

$tabs['demonstração'] = array(
'rótulo' => __( 'Produto de Demonstração', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
retornar $tabs;
}
}

Lembre-se de usar seu ID product_type em vez de 'demo' em $tabs['demo'] = array se você definiu seu próprio product_type acima.

Os três parâmetros na matriz que usamos são:

rótulo: Isso define o nome da guia do seu produto personalizado.
target: define um identificador que usaremos para adicionar configurações à guia.
classe: Isso permite que você verifique quando mostrar a guia do produto personalizado.

Aqui, no parâmetro de classe, usamos show_if_Demo_product, o que significa que esta guia só será exibida quando seu tipo de produto personalizado for selecionado.

Adicionar campos da guia de tipo de produto personalizado

Em seguida, vamos adicionar algumas configurações e campos à nossa guia para que você possa definir preços e várias opções para seu tipo de produto personalizado. Para isso, adicione este código ao arquivo principal do seu plugin:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

function QL_custom_product_options_product_tab_content() {
// Não se esqueça de alterar o id no div com o alvo da aba do seu produto
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Ativar tipo de produto personalizado'),
) );

woocommerce_wp_text_input(
variedade(
'id' => 'demo_product_info',
'label' => __( 'Detalhes do produto personalizado', 'dm_product' ),
'espaço reservado' => '',
'desc_tip' => 'verdadeiro',
'description' => __( 'Insira os detalhes do produto Demo.', 'dm_product' ),
'tipo' => 'texto'
)
);


?></div>
</div><?php
}

Isso adicionará uma opção de caixa de seleção para ativar o tipo de produto personalizado e um campo de texto personalizado para o produto. Claro, você pode adicionar mais configurações usando outras funções do WooCommerce, como woocommerce_wp_select() para uma lista suspensa, woocommerce_wp_textarea_input() para uma área de texto e muito mais.

Mas, para nossa demonstração, exibiremos apenas informações de texto simples sobre o produto personalizado que os administradores podem personalizar no back-end.

Você pode aprender mais sobre essas funções e como usá-las aqui.

Salvando campos personalizados da guia Tipo de produto WooCommerce

Agora que criamos nossas configurações de tipo de produto, devemos salvá-las em nosso banco de dados. Isso é feito usando o gancho woocommerce_process_product_meta. Para isso, usaremos estas linhas de código:

 add_action('woocommerce_process_product_meta', 'save_demo_product_settings');

função save_demo_product_settings($post_id){

$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta($post_id, 'demo_product_info', esc_attr($demo_product_info));
}
}

Depois de adicionar esse código ao arquivo principal do plug-in, você poderá salvar suas configurações personalizadas de tipo de produto ao atualizar ou publicar um produto.

No entanto, esses códigos são apenas para o back-end e agora serão exibidos no front-end do seu produto até definirmos um modelo para o WooCommerce usar. Para isso, usaremos a próxima etapa do nosso tutorial para exibir o conteúdo do nosso tipo de produto personalizado.

Adicionar conteúdo para o tipo de produto personalizado

Você acabou de criar o tipo de produto personalizado para o seu site, mas também precisa especificar ao WooCommerce que tipo de conteúdo deseja que o tipo de produto tenha. Para isso, usaremos o gancho woocommerce_single_product_summary para adicionar as informações do produto que adicionamos à guia Detalhes do produto personalizado.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

função demo_product_front () {
$produto global;
if ('demo' == $produto->get_type()) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Certifique-se de que o ID do tipo de produto corresponda ao código if ('demo' == $product->get_type() , como mencionamos acima. Depois de salvar esse código, você verá os detalhes do produto personalizado na frente.

Trecho de código completo

Para sua conveniência, combinamos os diferentes códigos em um único conjunto, para que você possa simplesmente colá-lo no arquivo principal do plug-in e editá-lo conforme necessário.

 <?php
/**
* Nome do plug-in: tipo de produto personalizado QuadLayers
* Descrição: Plugin para adicionar tipo de produto personalizado ao WooCommerce
* Autor: QuadLayers
* URI do autor: https://www.quadlayers.com
* Versão: 1.0
*/


definido( 'ABSPATH' ) ou sair;

add_action( 'init', 'register_demo_product_type' );
função register_demo_product_type() {
classe WC_Product_Demo estende WC_Product {

public function __construct($produto) {
$this->product_type = 'demonstração';
pai::__construct($produto);
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
função add_demo_product_type($tipos){
$types[ 'demo' ] = __( 'Produto de demonstração', 'dm_product' );
retornar $tipos; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
function demo_product_tab( $tabs) {

$tabs['demonstração'] = array(
'rótulo' => __( 'Produto de Demonstração', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
retornar $tabs;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' );
função demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php


woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Ativar tipo de produto personalizado'),
) );


woocommerce_wp_text_input(
variedade(
'id' => 'demo_product_info',
'label' => __( 'Detalhes do produto de demonstração', 'dm_product' ),
'placeholder' => 'Insira aqui o texto a ser mostrado no front-end',
'desc_tip' => 'verdadeiro',
'description' => __( 'Insira as informações do produto de demonstração.', 'dm_product' ),
'tipo' => 'texto'
)
);
?></div>
</div><?php
}

add_action('woocommerce_process_product_meta', 'save_demo_product_settings');

função save_demo_product_settings($post_id){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'sim não';
update_post_meta($post_id, '_enable_custom_product', $enable_custom_product);
$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta($post_id, 'demo_product_info', esc_attr($demo_product_info));
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

função demo_product_front () {
$produto global;
if ('demo' == $produto->get_type()) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Claro, todas as etapas que mostramos neste tutorial são bem simples e você pode e deve tentar adicionar mais campos, configurações e conteúdo ao seu tipo de produto personalizado. Além disso, como você pode ver, este tutorial é um pouco pesado em termos de programação. Portanto, se você é novo no WordPress ou na codificação, sempre pode pedir nossa ajuda na seção de comentários. Além disso, você também pode fazer as coisas de maneira bem diferente e usar o arquivo functions.php do seu tema para adicionar todos esses códigos ao seu site.

Isso pularia a etapa de criação de um plug-in do WordPress, mas observe que suas alterações desapareceriam se você alterasse ou atualizasse seu tema (a menos que você use um tema filho). É altamente recomendável usar um plug-in para esse método, mas se você preferir para usar o arquivo functions.php, você pode fazê-lo.

Lembre-se sempre de fazer um backup completo do seu site WordPress antes de fazer alterações no arquivo functions.php. Dessa forma, caso algo dê errado, você sempre poderá voltar para a versão de trabalho.

Basta clicar em Appearance > Theme File Editor e clicar em Theme functions ou functions.php na barra lateral direita de Theme files.

Em seguida, basta colar os códigos acima no editor e clicar em Atualizar arquivo para finalizar.

Conclusão

E isso encerra todas as etapas necessárias para criar programaticamente um tipo de produto WooCommerce personalizado . Vamos resumir rapidamente todas as etapas necessárias para criar seu tipo de produto personalizado:

• Crie e ative o plug-in para o seu tipo de produto WooCommerce personalizado.
• Registre seu novo tipo de produto.
• Adicione uma guia para seu tipo de produto personalizado para a página de produtos individuais.
• Adicione campos e configurações à guia do produto.
• Salve os campos e configurações na guia do seu produto.
• Exiba o conteúdo da guia do produto no front-end.

Por fim, para sua conveniência, combinamos todas as diferentes partes do código para fornecer o código completo. Assim, você pode simplesmente copiar todo o código do seu arquivo principal e fazer as alterações necessárias.

Esperamos que você ache este artigo útil. Se você quiser saber mais sobre como definir várias configurações e opções de produtos do WooCommerce, por que não conferir alguns de nossos outros artigos:

• Como configurar descontos em massa do WooCommerce
• Como criar um usuário WordPress programaticamente
• Criando campo personalizado do WordPress programaticamente