如何在 Woocommerce 的自定义产品类型中添加变体选项卡?
How to add Variations tab in custom product type in Woocommerce?
- 我已经为 "Gift Cards" 安装了一个插件,基本上是添加一个
产品类型 "Gift card"。
- 我需要增强它的功能。
- 还有其他选项卡可用于此,但选项卡 "Variations" 是
没有。
- 如何添加此选项卡以便我的自定义产品类型也可以
表现得像一个可变产品。
- 屏幕截图:http://prntscr.com/ekogwd
- 而且我必须严格使用我的自定义产品类型,这意味着我不能将其更改为可变产品类型。
- 是否有任何挂钩、操作或过滤器可以使用 woocommerce 将此选项卡手动添加到我的自定义产品类型 "Gift card"?
我假设您已经将礼品卡添加到产品类型选择器中。但是,我在这里添加它是为了完整性,因为您必须在第二个函数中使用相同的名称。
add_filter( 'product_type_selector', 'so_42835590_add_product_type' );
function so_42835590_add_product_type( $types ){
// Key should be exactly the same as in the class product_type parameter
$types[ 'gift-card' ] = __( 'Gift Card', 'your-plugin' );
return $types;
}
您可以通过过滤 woocommerce_product_data_tabs
添加自己的自定义标签,但您也可以将 类 添加到现有标签。 类 是 metabox javascript 用来决定在更改产品类型时显示什么和隐藏什么。
add_filter( 'woocommerce_product_data_tabs', 'so_42835590_product_data_tabs' );
function so_42835590_product_data_tabs( $tabs ) {
$product_type = 'gift-card'; // must match array key in previous snippet
// Add an additional class to an existing tab, ex: Variations.
$tabs[ 'variations' ][ 'class' ][] = 'show_if_' . $product_type;
return $tabs;
}
编辑 您确实需要添加一些 javascript 来控制现有属性中 "Enabled for variations" 选项卡的可见性,以及何时添加属性。这应该可以解决问题:
jQuery( function ( $ ) {
// Variable type options are valid for variable workshop.
$( '.show_if_variable:not(.hide_if_gift-card)' ).addClass( 'show_if_gift-card' );
// Trigger change
$( 'select#product-type' ).change();
// Show variable type options when new attribute is added.
$( document.body ).on( 'woocommerce_added_attribute', function(e) {
$( '#product_attributes .show_if_variable:not(.hide_if_gift-card)' ).addClass( 'show_if_gift-card' );
var $attributes = $( '#product_attributes' ).find( '.woocommerce_attribute' );
if ( 'gift-card' == $( 'select#product-type' ).val() ) {
$attributes.find( '.enable_variation' ).show();
}
});
});
- 我已经为 "Gift Cards" 安装了一个插件,基本上是添加一个
产品类型 "Gift card"。
- 我需要增强它的功能。
- 还有其他选项卡可用于此,但选项卡 "Variations" 是 没有。
- 如何添加此选项卡以便我的自定义产品类型也可以 表现得像一个可变产品。
- 屏幕截图:http://prntscr.com/ekogwd
- 而且我必须严格使用我的自定义产品类型,这意味着我不能将其更改为可变产品类型。
- 是否有任何挂钩、操作或过滤器可以使用 woocommerce 将此选项卡手动添加到我的自定义产品类型 "Gift card"?
我假设您已经将礼品卡添加到产品类型选择器中。但是,我在这里添加它是为了完整性,因为您必须在第二个函数中使用相同的名称。
add_filter( 'product_type_selector', 'so_42835590_add_product_type' );
function so_42835590_add_product_type( $types ){
// Key should be exactly the same as in the class product_type parameter
$types[ 'gift-card' ] = __( 'Gift Card', 'your-plugin' );
return $types;
}
您可以通过过滤 woocommerce_product_data_tabs
添加自己的自定义标签,但您也可以将 类 添加到现有标签。 类 是 metabox javascript 用来决定在更改产品类型时显示什么和隐藏什么。
add_filter( 'woocommerce_product_data_tabs', 'so_42835590_product_data_tabs' );
function so_42835590_product_data_tabs( $tabs ) {
$product_type = 'gift-card'; // must match array key in previous snippet
// Add an additional class to an existing tab, ex: Variations.
$tabs[ 'variations' ][ 'class' ][] = 'show_if_' . $product_type;
return $tabs;
}
编辑 您确实需要添加一些 javascript 来控制现有属性中 "Enabled for variations" 选项卡的可见性,以及何时添加属性。这应该可以解决问题:
jQuery( function ( $ ) {
// Variable type options are valid for variable workshop.
$( '.show_if_variable:not(.hide_if_gift-card)' ).addClass( 'show_if_gift-card' );
// Trigger change
$( 'select#product-type' ).change();
// Show variable type options when new attribute is added.
$( document.body ).on( 'woocommerce_added_attribute', function(e) {
$( '#product_attributes .show_if_variable:not(.hide_if_gift-card)' ).addClass( 'show_if_gift-card' );
var $attributes = $( '#product_attributes' ).find( '.woocommerce_attribute' );
if ( 'gift-card' == $( 'select#product-type' ).val() ) {
$attributes.find( '.enable_variation' ).show();
}
});
});