Como adicionar uma caixa meta personalizada ao produto WooCommerce
Publicados: 2021-07-23
Deseja adicionar uma meta box personalizada para adicionar informações extras na página de um único produto? Então fique até o final, pois este post tem como objetivo fornecer um trecho de código personalizado que fizemos especificamente para resolver esse problema. Claro, isso significa que você precisa ter alguma experiência em codificação para implementar esta solução.
WooCommerce foi criado para todos os tipos de sites de comércio eletrônico. No entanto, apenas satisfaz as necessidades básicas de uma loja online. Isso significa que, se seus produtos forem específicos, talvez seja necessário adicionar informações adicionais sobre o produto para ajudar seus clientes a tomar uma decisão informada.
Uma maneira de fazer isso é criar uma meta box personalizada na página Editar produto . Então, depois que as informações forem salvas, elas serão exibidas na página do produto único.
No entanto, se você fizer uma pesquisa rápida, encontrará muitos plugins para resolver esse problema. No entanto, se você tiver muitos plugins, eles acabarão inchando seu site. Como resultado, a velocidade de carregamento do seu site será afetada negativamente. É por isso que decidimos criar este tutorial para você.
Adicionar Meta Box Personalizada no Produto WooCommerce
No breve tutorial de hoje, mostraremos como adicionar uma meta box personalizada em sua loja WooCommerce. Usar trechos de código personalizados é a maneira recomendada de fazer alterações no WordPress.
Antes de prosseguir, você deve instalar ou criar um tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização.
Sem perder muito tempo, vamos direto ao assunto.
Etapas para adicionar uma caixa meta personalizada no produto WooCommerce
Aqui estão os passos simples que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema para adicionar a função para adicionar meta box personalizada no produto WooCommerce.
- Adicione o seguinte código ao arquivo php :
## ---- 1. Backend ---- ##
// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
function create_custom_meta_box()
{
add_meta_box(
'custom_product_meta_box',
__( 'Additional Product Information <em>(optional)</em>', 'cmb' ),
'add_custom_content_meta_box',
'product',
'normal',
'default'
);
}
}
// Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
function add_custom_content_meta_box( $post ){
$prefix = '_bhww_'; // global $prefix;
$ingredients = get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) : '';
$benefits = get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) : '';
$args['textarea_rows'] = 6;
echo '<p>'.__( 'Ingredients', 'cmb' ).'</p>';
wp_editor( $ingredients, 'ingredients_wysiwyg', $args );
echo '<p>'.__( 'Benefits', 'cmb' ).'</p>';
wp_editor( $benefits, 'benefits_wysiwyg', $args );
echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
}
}
//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{
function save_custom_content_meta_box( $post_id ) {
$prefix = '_bhww_'; // global $prefix;
// We need to verify this with the proper authorization (security stuff).
// Check if our nonce is set.
if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
return $post_id;
}
$nonce = $_REQUEST[ 'custom_product_field_nonce' ];
//Verify that the nonce is valid.
if ( ! wp_verify_nonce( $nonce ) ) {
return $post_id;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
// Check the user's permissions.
if ( 'product' == $_POST[ 'post_type' ] ){
if ( ! current_user_can( 'edit_product', $post_id ) )
return $post_id;
} else {
if ( ! current_user_can( 'edit_post', $post_id ) )
return $post_id;
}
// Sanitize user input and update the meta field in the database.
update_post_meta( $post_id, $prefix.'ingredients_wysiwyg', wp_kses_post($_POST[ 'ingredients_wysiwyg' ]) );
update_post_meta( $post_id, $prefix.'benefits_wysiwyg', wp_kses_post($_POST[ 'benefits_wysiwyg' ]) );
}
}
## ---- 2. Front-end ---- ##
// Create custom tabs in product single pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );
function custom_product_tabs( $tabs ) {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_ingredients ) )
$tabs['ingredients_tab'] = array(
'title' => __( 'Ingredients', 'woocommerce' ),
'priority' => 45,
'callback' => 'ingredients_product_tab_content'
);
if ( ! empty( $product_benefits ) )
$tabs['benefits_tab'] = array(
'title' => __( 'Benefits', 'woocommerce' ),
'priority' => 50,
'callback' => 'benefits_product_tab_content'
);
return $tabs;
}
// Add content to custom tab in product single pages (1)
function ingredients_product_tab_content() {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
if ( ! empty( $product_ingredients ) ) {
echo '<h2>' . __( 'Product Ingredients', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_ingredients );
}
}
// Add content to custom tab in product single pages (2)
function benefits_product_tab_content() {
global $post;
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_benefits ) ) {
echo '<h2>' . __( 'Product Benefits', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_benefits );
}
}
- Este é o resultado no back-end:
- Este é o resultado no front-end:
Conclusão
No tutorial de hoje, você viu como é fácil adicionar uma meta box personalizada no WooCommerce. Isso ajudará você a personalizar seu site para seus produtos específicos e oferecer mais informações aos seus clientes.
Se você não estiver familiarizado com o manuseio de código, recomendamos o uso de um plugin como o Meta Box. Esperamos que este post tenha fornecido uma solução para você.
Artigos semelhantes
- Qual é o melhor gateway de pagamento para WooCommerce
- Como ocultar a imagem em destaque em uma única página de produto
- Como exibir variações de produtos no WooCommerce
- Como obter o produto atual WooCommerce
- Como alterar o modelo de e-mail no WooCommerce
- Como adicionar um plano de fundo personalizado para WooCommerce
- Como usar o WooCommerce para configurar a loja online
- Como fazer upload de imagem na página do produto no WooCommerce
- Como adicionar classificação por estrelas ao produto WooCommerce
- WooCommerce Criar página de produto único personalizado
- Como personalizar páginas de produtos WooCommerce com o Elementor Pro
- Como adicionar informações à página da loja WooCommerce
- Como adicionar o botão Visualizar carrinho no WooCommerce
- Como ocultar a galeria de produtos no WooCommerce
- Como adicionar taxonomia personalizada aos produtos WooCommerce
- Como adicionar uma nova coluna na página de pedidos do WooCommerce
- Como mover produtos WooCommerce para um novo site