当前位置: 首页 > 知识库问答 >
问题:

处理WooCommerce选择的变化自定义字段条件显示

夹谷飞龙
2023-03-14

我有一个代码,需要根据以下条件插入一个值:**////这里是“我的代码”//**

在这里,我通过我的活动主题覆盖了single product/add to cart/variation.phpWoocommerce模板文件:

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
///////// HERE MY CODE /////////
</div>
 
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

The condition should check the value of the variable `{{{ data.variation.custom_field}}}` and if this data is greater than 10 then the code should print "Yes". 

**Something like**: 

    if( $data.variation.custom_field > 10 ){ 
        echo "yes";
    }

But it's not working. I guess, this should be done using Javascript instead of php but I don't know how grab the variable value.

共有2个答案

云骏奇
2023-03-14

基于https://codex.wordpress.org/Javascript_Reference/wp.template和类似的模板引擎,如https://github.com/blueimp/JavaScript-Templates#evaluation,您需要构建一个带有评估的模板。

在您的情况下,应该是这样的:

<div class="woocommerce-variation-custom_field">
  <#  if (data.variation.custom_field > 10) { #>
    yes
  <# } #>
</div>

此外,在这里https://lkwdwrd.com/wp-template-js-templates-wp您可以找到一个if语句本身的示例。

盖夕
2023-03-14

没有必要为此使用额外的javascript(或jQuery)代码。

如果自定义字段值大于10(否则为零),下面将处理显示“是”的产品变体自定义字段。

您需要用以下方法之一替换使用woocommerce_available_variation钩子的退出钩子函数

主要有2种方式:

1). 最简单的方法,无需覆盖variation.php模板:

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Defined custom field conditional display
    $displayed_value = $data['custom_field'] > 10 ? 'YES' : '';

    // Frontend variation: Display value below formatted price
    $data['price_html'] .= '</div>' . $displayed_value . '
    <div class="woocommerce-variation-custom_field_html">';

    return $data;
}

代码进入活动子主题(或活动主题)的functions.php文件。测试和工作。

2)。另一种简单的方法(覆盖variation.php模板):

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');

    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? "YES" : "";

    return $data;
}

代码进入活动子主题(或活动主题)的functions.php文件。

然后在您的自定义模板单个产品/add to cart/variation.php中,您将替换:

{{{ data.variation.custom_field}}}

与:

{{{ data.variation.custom_field_html }}}

它将很好地工作,没有任何额外的要求。

下面是一个完整的社区代码示例,基于第二种方式:

1). 管理变量:显示自定义字段并保存其值

// Admin: Add a custom field in product variations options pricing
add_action( 'woocommerce_variation_options_pricing', 'add_admin_variation_custom_field', 10, 3 );
function add_admin_variation_custom_field( $loop, $variation_data, $variation ){

   woocommerce_wp_text_input( array(
        'id'          => 'custom_field['.$loop.']',
        'label'       => __('Custom Field', 'woocommerce' ),
        'placeholder' => __('Enter Custom Field value here', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __('This field is for … (explanation / description).', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, 'custom_field', true )
    ) );
}

// Admin: Save custom field value from product variations options pricing
add_action( 'woocommerce_save_product_variation', 'save_admin_variation_custom_field', 10, 2 );
function save_admin_variation_custom_field( $variation_id, $i ){
    if( isset($_POST['custom_field'][$i]) ){
        update_post_meta( $variation_id, 'custom_field', sanitize_text_field($_POST['custom_field'][$i]) );
    }
}

代码进入活动子主题(或活动主题)的functions.php文件。

2). 前端变量:基于选定变量和自定义字段值的条件显示

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? __("YES", "woocommerce") : "";
    
    return $data;
}

代码进入活动子主题(或活动主题)的functions.php文件。

3). 模板覆盖:single-product/add-to-cart/variation.php文件到活动主题:

<?php
/**
 * Single variation display
 *
 * This is a javascript-based template for single variations (see https://codex.wordpress.org/Javascript_Reference/wp.template).
 * The values will be dynamically replaced after selecting attributes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.5.0
 */

defined( 'ABSPATH' ) || exit;

?>
<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
    <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>
    <div class="woocommerce-variation-custom_field">{{{ data.variation.custom_field_html}}}</div>
    <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>
</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
    <p><?php esc_html_e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
</script>

测试和工作。

相关: WooCommerce:到处添加/显示产品或变化自定义字段

 类似资料:
  • 目前正在使用WordPress 5.1.1和WooCommerce 3.5.7。我的WooCommerce商店有大约500种产品,由简单和多变的产品组成。 每个产品自然都有一个SKU,但每个产品也有一个称为“商品代码”的唯一ID代码。我向特定行业销售特定产品。 我已经在我的functions.php文件中添加了简单和可变产品的自定义字段的代码,目前效果很好。 我的问题是,我试图让“商品代码”出现在

  • 我为woocommerce产品“coffee_type”创建了自定义分类法。我为此分类法创建了一个ACF图像字段“coffee\u type\u image”。 我想在产品页面上显示带有链接的图像,而不是分类法的名称。我在这里读了大多数关于在分类法上显示acf图像的文章,但每一篇都是关于使用归档分类法页面而不是产品页面。我正在编辑single-product.php(确切地content-sing

  • 我成功地在后端的产品变化中的WooCommerce中创建了一个ACF自定义字段。该字段在每个变化中正确显示。 但是在编辑变体中的此字段或其他字段后,我无法再保存整个变体选项卡。加载/保存指示器圆圈继续无限旋转。并且定制字段未显示在前端的单个产品变体中。 我所做的是将以下代码添加到我的: 任何帮助都将不胜感激。

  • 您好,我有一个关于woocommerce中自定义结账字段的问题。我在结帐表单中创建了一个自定义字段,一切都很顺利。该字段包含客户卡号。我还设法将字段值(第一次输入时)保存在wp usermeta中,这样它就不会只与订单一起出现,而是与客户详细信息一起保存。 现在我想做以下几点。一旦注册客户返回商店,进入结帐表单,新字段(如果不是empyt)将自动显示,而不是每次都要求客户插入他们的卡号。 我添加到

  • 添加附加自定义域时,我做错了什么? 我的代码:

  • 我在wordpress网站上安装了签出字段编辑器。我创建了自定义字段。但是,使用以下代码,PCCustomer字段将同时出现在发送给我和客户的“新订单”电子邮件中。相反,我希望它完全属于我。我试着编辑代码,但仍然不起作用。