Por defecto ACF no ofrece la forma de incluir sus campos dentro de una de las pestañas del metabox «Datos del producto» de un producto de WooCommerce. Pero con un poco de JavaScript és posible conseguirlo.
Crear una nueva pestaña en el panel de datos del producto
// Registrar nueva pestaña de datos del producto
add_filter( 'woocommerce_product_data_tabs', 'tms_product_data_tabs' );
function tms_product_data_tabs( $tabs ) {
$tabs['tms-product-data'] = array(
'label' => 'Nombre de la pestaña',
'target' => 'tms-product-data',
);
return $tabs;
}
// Crear contenido de la pestaña de datos del producto
add_action( 'woocommerce_product_data_panels', 'tms_add_custom_product_data_fields' );
function tms_add_custom_product_data_fields() {
echo '<div id="tms-product-data" class="panel woocommerce_options_panel"></div>';
}
Agregar CSS y JS al administrador del producto
// Agregar scripts
add_action( 'admin_enqueue_scripts', 'tms_admin_enqueue_scripts', 10, 1 );
function tms_admin_enqueue_scripts( $hook ) {
global $post;
if ( $hook == 'post-new.php' || $hook == 'post.php' ) :
if ( 'product' === $post->post_type ) :
wp_enqueue_style(
'admin-product-styles',
get_template_directory_uri() . '/css/admin-product.css'
);
wp_enqueue_script(
'admin-product-script',
get_template_directory_uri() . '/js/admin-product.js',
array( 'jquery' )
);
endif;
endif;
}
Recuerda usar get_stylesheet_directory_uri
en lugar de get_template_directory_uri
si estas usando un tema hijo.
Poner los campos ACF dentro del metabox del producto
Aquí viene la magia, con appendTo()
de jQuery cortamos el metabox que crea ACF y lo pegamos dentro del panel que nosotros hemos creado.
;
$ = jQuery.noConflict();
$( document ).ready( function() {
$( '#acf-group_NUMEROdelGRUPO' ).appendTo( "#tms-product-data" );
} );
Ajustar los estilos mediante CSS
Ahora mediante el CSS podemos acabar de ajustar los estilos para que quede mejor integrado.
/* Tab icon */
#woocommerce-product-data ul.wc-tabs li.tms-product-data_options a::before {
content: "\f451";
}
/* Tab content: Caja */
#tms-product-data .acf-fields.-border {
border: none;
}
#tms-product-data .inside.acf-fields {
margin: 0 !important;
}
#tms-product-data .acf-label {
margin-bottom: 0;
height: 1.4em;
}
/* Tab content: Texto */
#tms-product-data .acf-label label {
font-size: 12px;
line-height: 22px;
}
#tms-product-data .acf-input .acf-label label {
font-weight: 400;
}
/* Tab content: Layout contenido */
#tms-product-data .acf-input .acf-label {
float: left;
width: 150px;
}
#tms-product-data .acf-input .acf-input {
float: left;
width: 50%;
}
#tms-product-data .acf-field .acf-field {
padding-left: 0;
}
#tms-product-data .acf-field + .acf-field {
border: none;
}
/* Mostrar siempre el contenido del metabox ACF "Products" */
#acf-group_NUMEROdelGRUPO {
display: block !important;
}