如何在 Woocommerce 的链接产品中添加更多自定义字段

Posted

技术标签:

【中文标题】如何在 Woocommerce 的链接产品中添加更多自定义字段【英文标题】:How to add more custom field in Linked Product of Woocommerce 【发布时间】:2017-12-25 06:12:43 【问题描述】:

感谢 *** 的所有开发人员。

我想在 Woocommerce 的链接产品部分添加更多字段。这些字段应类似于 Upsell/Crosssell。

到目前为止我的代码:-

add_action( 'woocommerce_product_options_linked_product_data', 'woocom_general_product_data_custom_field' );

 woocommerce_wp_text_input( 
    array( 
      'id' => '_upsizing_products', 
      'label' => __( 'Upsizing Products', 'woocommerce' ), 
      'placeholder' => 'Upsizing Products',
      'desc_tip' => 'true',
      'description' => __( 'Select Products Here', 'woocommerce' ) 
    )
  );

在上面的代码中我需要组合框,例如当你在输入框中输入 3 个字符时,它会显示一个可以选择的匹配产品列表。类似于追加销售/交叉销售。

请任何人帮我实现这个自定义字段。提前致谢。

编辑:有人吗?

【问题讨论】:

你想要它像自动完成字段吗? 是的@TamilvananN 你试过像wordpress.org/plugins/woocommerce-autocomplete-order这样的插件 ***.com/q/35686707/4453058 嗨@TamilvananN,这不是我要找的... 【参考方案1】:

上面的代码中缺少一些内容。

    您在第一行使用的钩子不存在。右边的钩子叫woocommerce_product_options_related 您设计自定义字段的代码不在任何函数中。 您正在创建标准文本字段。如果您想要“选择产品”下拉菜单,您应该使用另一种方法。 这应该在您在钩子中使用的那个函数中。 您缺少实际保存自定义字段中数据的挂钩和函数

1。找到正确的钩子/动作

要找到要使用的正确钩子,只需在 WoocCommerce 插件中搜索 "woocommerce_product_options_",就会出现大约 6 个 php 文件。其中一个文件称为html-product-data-linked-products.php”。此文件包含该特定 WooCommerce 部分中的所有现有选项。它还包含用于显示这些选项的挂钩。

打开文件并检查。钩子在页面底部

完整路径: /wp-content/plugins/woocommerce/includes/admin/metaboxes/views/


2。创建下拉菜单

要创建包含产品搜索的下拉选择,您需要与上述代码完全不同的代码。

闲暇时间,您可以在上述文件中复制粘贴现有选项之一,然后根据需要对其进行修改。

所有这些都应该放在一个名为:woocom_linked_products_data_custom_field() 的函数中。

2.1.修改ID/名称

您需要在代码中修改的第一件事当然是字段的唯一 ID/名称。 这被放置在label-tag (for)select-tag (id and name)中。

在您的示例中,ID/名称应为upsizing_products,标签文本为Upsizing Products

<label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
<select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">

注意:不要忘记在名称标签的末尾加上[],否则您的数据将不会被存储。

2.2.显示已选择的产品

接下来是在 WooCommerce 部分及其下拉菜单中显示并突出显示已选择的产品。

为此,请将$product_ids-变量和整行替换为:

$product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

相反,产品 ID 是从数据库中的自定义字段中检索的,而不是现有选项之一(例如 cross_sell_ids)

注意:_upsizing_products_ids 是数据库中的元键名称。与此键相关的元值包含您的所有字段数据。这用于存储和检索自定义字段。

2.3.在 WooCommerce 部分中显示该字段

最后,该功能应该被正确挂钩,以便它可以显示在Linked Products部分:

add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

3。保存和存储数据

现在您的自定义字段显示在右侧部分中。接下来就是将数据保存到数据库中。

在一个新函数中,使用$_POST 从字段中检索数据,并使用update_post_meta 将数据存储在包含post-ID、唯一字段ID/名称的数据库中(meta- key) 和它自己的数据 (meta-value).

function woocom_linked_products_data_custom_field_save( $post_id )
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );

add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );

这是完整的代码。将其放入您的主题 functions.php 或插件文件中:

// Display the custom fields in the "Linked Products" section
add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

// Save to custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );


// Function to generate the custom fields
function woocom_linked_products_data_custom_field() 
    global $woocommerce, $post;
?>
<p class="form-field">
    <label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
    <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
        <?php
            $product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

            foreach ( $product_ids as $product_id ) 
                $product = wc_get_product( $product_id );
                if ( is_object( $product ) ) 
                    echo '<option value="' . esc_attr( $product_id ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $product->get_formatted_name() ) . '</option>';
                
            
        ?>
    </select> <?php echo wc_help_tip( __( 'Select Products Here.', 'woocommerce' ) ); ?>
</p>

<?php


// Function the save the custom fields
function woocom_linked_products_data_custom_field_save( $post_id )
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );

要显示存储的数据,请使用_upsizing_products_ids:

echo get_post_meta( $post->ID, 'my-field-slug', true );

查看本指南Mastering WooCommerce Products Custom Fields,了解有关 WooCommerce 自定义字段的更多信息。

【讨论】:

完美!啊啊啊啊!谢谢! 我已将该字段更改为一个选择(不是多选)...您知道如何允许该字段为空/取消选择吗?在这里查看问题***.com/q/53172288/1984868 @Sarah 我已按照所有说明进行操作,并且在前端得到了类似“Array”的输出。我只想在存档中显示带有图像和价格的循环产品之类的东西...... @Sarah 如何在产品页面上显示这个选定的产品。?

以上是关于如何在 Woocommerce 的链接产品中添加更多自定义字段的主要内容,如果未能解决你的问题,请参考以下文章

将Woocommerce单一产品页面上的添加到购物车按钮替换为产品类别

自定义特定 WooCommerce 产品类别上的“添加到购物车”按钮

将分类术语添加到 WooCommerce 产品永久链接

在 WooCommerce 特定 ID 产品页面上将自定义内容添加到多个产品中

将添加到购物车按钮替换为链接到 WooCommerce 3 中商店页面上的产品页面的更多内容

在 Woocommerce 中添加新产品时自动添加所有产品属性