如何在woocommerce商店的產品列表的快速編輯屏幕上添加自定義產品字段/ s?在woocommerce網站的產品列表上的快速編輯選項上添加自定義產品字段
回答
我真的不知道這是否是做的最好的辦法,但對我來說
基本上我的總體目標是添加自定義字段的產品,我設法做到這一點(添加自定義的偉大工程字段到單個產品頁面)在這些有用的內容的幫助下。
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/ http://www.remicorson.com/woocommerce-custom-fields-for-variations/
我建議在繼續之前先檢查這些鏈接。
現在,我想要做的就是將這些自定義字段添加到產品列表上的快速添加選項。
這就是資源稀缺的地方。
基本上這是我做到的。
將您的自定義字段(html表單)添加到快速編輯選項。 我迷上了'woocommerce_product_quick_edit_end'行動來完成這一點。 該鉤子上發現woocommerce->包括 - >管理 - >則須─> HTML的快速編輯product.php上線195
保存您的自定義字段。 我迷上了'woocommerce_product_quick_edit_save'行動來完成這一點。 該鉤子上發現woocommerce->包括 - >管理 - >類-WC-管理員-後types.php功能上線929
先前的'quick_edit_save' 內有2個步驟可以實現,但它會保留值,但是通過快速編輯選項更新自定義字段後,數據將保留在後端,但不會填充到UI上的自定義字段。這就是爲什麼我們需要第三步。
- 添加產品內部的自定義字段的元數據列表柱,然後用JS出提取元數據然後將其填充到自定義字段
我鉤入「manage_product_posts_custom_column」行動,添加自定義HTML標籤(股利或其他)來保存我的自定義字段元數據
然後我用JavaScript來從元數據進行提取數據,並將其填充到自定義字段
第3步只是WooCommerce如何執行此過程的副本。
對於referrence,看看功能'render_product_columns' 的 woocommerce->包括 - >管理 - >類-WC-管理-後的類型。PHP
也可在位於快速edit.js看一看woocommerce->資產 - > js->管理員
例如代碼: 注意,下面的代碼是用於說明和指導目的,我的實際代碼很長很複雜。
步驟1:
add_action('woocommerce_product_quick_edit_end', function(){
/*
Notes:
Take a look at the name of the text field, '_custom_field_demo', that is the name of the custom field, basically its just a post meta
The value of the text field is blank, it is intentional
*/
?>
<div class="custom_field_demo">
<label class="alignleft">
<div class="title"><?php _e('Custom Field Demo', 'woocommerce'); ?></div>
<input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e('Custom Field Demo', 'woocommerce'); ?>" value="">
</label>
</div>
<?php
});
步驟2:
add_action('woocommerce_product_quick_edit_save', function($product){
/*
Notes:
$_REQUEST['_custom_field_demo'] -> the custom field we added above
Only save custom fields on quick edit option on appropriate product types (simple, etc..)
Custom fields are just post meta
*/
if ($product->is_type('simple') || $product->is_type('external')) {
$post_id = $product->id;
if (isset($_REQUEST['_custom_field_demo'])) {
$customFieldDemo = trim(esc_attr($_REQUEST['_custom_field_demo']));
// Do sanitation and Validation here
update_post_meta($post_id, '_custom_field_demo', wc_clean($customFieldDemo));
}
}
}, 10, 1);
步驟3:
add_action('manage_product_posts_custom_column', function($column,$post_id){
/*
Notes:
The 99 is just my OCD in action, I just want to make sure this callback gets executed after WooCommerce's
*/
switch ($column) {
case 'name' :
?>
<div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>">
<div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true); ?></div>
</div>
<?php
break;
default :
break;
}
}, 99, 2);
JS部分
jQuery(function(){
jQuery('#the-list').on('click', '.editinline', function(){
/**
* Extract metadata and put it as the value for the custom field form
*/
inlineEditPost.revert();
var post_id = jQuery(this).closest('tr').attr('id');
post_id = post_id.replace("post-", "");
var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),
$wc_inline_data = jQuery('#woocommerce_inline_' + post_id);
jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());
/**
* Only show custom field for appropriate types of products (simple)
*/
var product_type = $wc_inline_data.find('.product_type').text();
if (product_type=='simple' || product_type=='external') {
jQuery('.custom_field_demo', '.inline-edit-row').show();
} else {
jQuery('.custom_field_demo', '.inline-edit-row').hide();
}
});
});
確保排隊腳本
希望這可以幫助任何人,再次,我不確定這是否是最好的方式來做到這一點,但在檢查WooCommerce源代碼時,似乎WooCommerce 沒有提供方便的掛鉤輕鬆完成此任務(至少尚未)
如果您有比這更好的方法,請分享。
- 1. Woocommerce產品的自定義字段網址選項縮略圖
- 2. 添加組產品選項到我的自定義產品
- 3. Woocommerce - 自定義變量產品選項
- 4. WooCommerce產品成本自定義字段
- 5. 在產品列表中顯示自定義產品選項
- 6. Woocommerce單一產品選項卡中的自定義字段
- 7. 在admin中添加自定義選項卡woocommerce產品
- 8. Woocommerce爲產品添加自定義輸入字段
- 9. Woocommerce產品表格字段
- 10. 編輯產品掛鉤Woocommerce
- 11. Woocommerce產品上市
- 12. 在WooCommerce中將產品自定義字段添加到管理產品批量修改表單中
- 13. 編輯Woocommerce管理產品頁面中的自定義產品選項卡內容
- 14. 如何在WooCommerce產品頁面上添加一個字段?
- 15. Magento的產品頁 - 相關產品,如自定義選項卡
- 16. 編程添加多個產品具有自定義選項
- 17. 在WooCommerce的產品頁面上添加以下產品的簡短描述
- 18. Magento自定義字段定義產品
- 19. 在單一產品頁面上增加相關產品(woocommerce)
- 20. 在產品頁上的新標籤中添加自定義HTML - WooCommerce
- 21. 在Odoo中的產品報價表中調用產品自定義字段
- 22. 將「相關產品」添加到WooCommerce的自定義選項卡中
- 23. 將自定義列添加到WooCommerce後端的管理產品列表中
- 24. 產品說明中的Woocommerce自定義字段
- 25. Woocommerce:如何在自定義產品類型中添加Variations選項卡?
- 26. 在WooCommerce的「謝謝」頁面上添加產品特定消息。
- 27. WooCommerce - 自動添加獎勵產品
- 28. 如何在BigCommerce中導入產品以及自定義選項/產品選項
- 29. Magento簡單的產品自定義選項添加數量
- 30. Woocommerce產品列表間距
非常感謝分享解決方案,第3步是我很難想象的。 – xdim222 2015-02-19 16:34:09