产品设置中的“自定义”复选框，选中后会显示一个自定义字段 [英] Custom checkbox in product settings that displays a custom field when checked
问题描述
我目前正在使用WooCommerce在WordPress电子商务网站上工作。
我在产品编辑页面的常规设置中创建了一个自定义复选框。
我还有一个代码段，在单个产品页面中显示自定义文本字段。
现在，我希望在选中此自定义复选框中的某个产品时（在其设置中），以在单个产品页面中显示此自定义文本字段。
我拥有的编码到目前为止：
要在WooCommerce产品信息中心内创建复选框，请在 functions.php中输入以下代码文件：
<？php
//显示字段
add_action （ woocommerce_product_options_general_product_data， woocommerce_product_custom_fields）；
//保存字段
add_action（‘woocommerce_process_product_meta’，‘woocommerce_product_custom_fields_save’）；
函数woocommerce_product_custom_fields（）{
全球$ woocommerce，$ post;
echo’< div class = product_custom_field>’;
//自定义产品复选框字段
woocommerce_wp_checkbox（
array（
'id'=>'_custom_product_checkbox_field'，
'placeholder'=>'自定义产品复选框Field'，
'label'=> __（'Custom Product Checkbox Field'，'woocommerce'），
'desc_tip'=>'true'
）
） ;
echo‘< / div>’；
}
//保存值
函数woocommerce_product_custom_fields_save（$ post_id）{
//自定义产品文本字段
$ woocommerce_custom_product_checkbox_field = $ _POST ['_ custom_product_checkbox_field'];
if（！empty（$ woocommerce_custom_product_checkbox_field））
update_post_meta（$ post_id， _ custom_product_checkbox_field，esc_attr（$ woocommerce_custom_product_checkbox_field））;
}
？>
我在 functions.php 文件（用于输出相关的自定义文本框）如下：
function add_engrave_text_field（）{
if（is_single（'product-url-a'））{
echo'输入您选择的字母：< span id = character_count>< / span>
< div><表class = variations cellspacing = 0>
< tbody>
< tr>
< td class = value>< label class = product-custom-text-label for = custom_text>自定义文字< / label>< / td>
< td class = value>
< label><输入type = text class = product-counter name = engrave_text占位符=输入您的自定义字母... maxlength = 3 />< /标签>
< / td>
< / tr>
< / tbody>
< / table>< / div>’;
}
}
add_action（‘woocommerce_before_add_to_cart_button’，‘add_engrave_text_field’，0）；
下一步是什么，因此只有在复选框选中时才输出自定义文本框编码被选中？
我意识到我可以将自定义文本框的代码放入 content-single-product 中，理想情况下，我不想这样做，因为它是一大堆编码的一部分，可以计算出自定义字母等的价格。
其他问题：
该网站由5个产品类别组成。只有这些类别之一中的产品才允许自定义刻字。目前，我必须手动将上述编码应用于每个单独的产品，因为我必须将单独的块插入 if（is_single（'product-slug-a'））有没有办法我可以更改 product-slug-a，这样我只需要在 functions.php 文件中输入一次代码就可以了。
已更新：
我再次回顾了您的代码，简化了工作，删除了不必要的代码。我添加了必要的代码，以使只有在选中复选框设置选项后，此雕刻字段才能显示在单个产品页面上。
对于最后一个问题，请在末尾（对于没有复选框设置的产品类别）进行检查。
这是代码：
//显示字段
add_action（'woocommerce_product_options_general_product_data'，'product_custom_fields_add'）;
函数product_custom_fields_add（）{
全球$ post;
echo’< div class = product_custom_field>;
//自定义产品复选框字段
woocommerce_wp_checkbox（array（
'id'=>'_engrave_text_option'，
'desc'=> __（'set自定义的Engrave文本字段''，'woocommerce'），
'label'=> __（'Display自定义的Engrave文本字段'，'woocommerce'），
'desc_tip'=>'true'
））；
echo‘< / div>’；
}
//保存字段
add_action（‘woocommerce_process_product_meta’，‘product_custom_fields_save’）；
function product_custom_fields_save（$ post_id）{
//自定义产品文本字段
$ engrave_text_option = isset（$ _POST [’_ engrave_text_option’]）吗？ ‘是’：‘否’；
update_post_meta（$ post_id，‘_engrave_text_option’，esc_attr（$ engrave_text_option））;
}
add_action（'woocommerce_before_add_to_cart_button'，'add_engrave_text_field'，0）;
函数add_engrave_text_field（）{
全球$ post;
//如果是单个产品页面并启用了雕刻文字选项，我们将显示字段
if（is_product（）&& get_post_meta（$ post-> '_engrave_text_option'，true）=='是'）{
？>
< div>
< label class = product-custom-text-label for = engrave_text><？php _e（'雕刻选项：'，'woocommerce'）; < br>
< input style = min-width：220px type = text class = product-counter name = engrave_text placeholder =<？php _e（'输入您的自定义字母... '，'woocommerce'）;？> maxlength = 3 />
< / label>
< / div>< br>
<？php
}
}
代码会出现在您活动的子主题（或主题）的function.php文件或任何插件文件中。
经过测试并可以工作。
复选框输出并保存：
使其对产品类别或产品标签有效（无设置复选框）：
add_action（'woocommerce_before_add_to_cart_button'，'add_engrave_text_field'，0）;
函数add_engrave_text_field（）{
全球$ post;
//在此处设置术语ID，内容或名称（或值数组）
$ categories = array（'clothing'，'music'）;
$ taxonomy =‘product_cat’; //（对于产品标签，请使用 product_tag代替）
//如果是单个产品页面并启用了雕刻文字选项，则我们将在
字段中显示if（is_product（）& ;& has_term（$ categories，'product_cat'，$ post-> ID））{
？>
< div>
< label class = product-custom-text-label for = engrave_text><？php _e（'雕刻选项：'，'woocommerce'）; < br>
< input style = min-width：220px type = text class = product-counter name = engrave_text placeholder =<？php _e（'输入您的自定义字母... '，'woocommerce'）;？> maxlength = 3 />
< / label>
< / div>< br>
<？php
}
}
代码会出现在您活动的子主题（或主题）的function.php文件或任何插件文件中。
经过测试并可以工作。
I am currently working on a WordPress eCommerce website, using WooCommerce.
I have created a custom Checkbox within the Product edit pages general settings.
I have also a code snippet that is displaying a custom text field in single product pages.
Now I would like when this custom Checkbox is checked for a product (in it's settings), to display this custom text field in single product pages.
The Coding I have so far:
To create the Checkbox, within the WooCommerce Product Dashboard, I have entered the following code into the functions.php file:
<?php
// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields(){
global $woocommerce, $post;
echo '<div class="product_custom_field">';
// Custom Product Checkbox Field
woocommerce_wp_checkbox(
array(
'id' => '_custom_product_checkbox_field',
'placeholder' => 'Custom Product Checkbox Field',
'label' => __('Custom Product Checkbox Field', 'woocommerce'),
'desc_tip' => 'true'
)
);
echo '</div>';
}
// Saving Values
function woocommerce_product_custom_fields_save($post_id){
// Custom Product Text Field
$woocommerce_custom_product_checkbox_field = $_POST['_custom_product_checkbox_field'];
if (!empty($woocommerce_custom_product_checkbox_field ))
update_post_meta($post_id, '_custom_product_checkbox_field', esc_attr($woocommerce_custom_product_checkbox_field ));
}
?>
The coding I have placed, in the functions.php file, as to Output the relevant Custom Text Box, is as follows:
function add_engrave_text_field() {
if (is_single('product-url-a')) {
echo 'Enter your chosen letters: <span id="character_count"></span>
<div><table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="value"><label class="product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<label><input type="text" class="product-counter" name="engrave_text" placeholder="Enter Your Custom Letters ..." maxlength="3" /></label>
</td>
</tr>
</tbody>
</table></div>';
}
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 );
What would be my next step, so that the Custom Text Box coding will only be Outputted when the Checkbox is selected?
I realise that I could put the code for the Custom Text Box into the content-single-product, however I would ideally not want to do this as it is part of a large group of coding which works out the pricing of the Custom Lettering etc.
Additional Question:
The website is made up of 5 Product Categories. Only Products in one of these Categories allow for Custom Lettering. At present, I am having to manually apply the above coding to each individual product, as I am having to insert the individual slugs into if (is_single('product-slug-a')) Is there a way I could change 'product-slug-a' so that I only have to enter the code once into the functions.php file and it is called for every Product within just one of the Product Categories?
Updated:
I have revisited a bit your code, simplifying things, removing unnecessary code. I have added the necessary code to make this "Engraving field" to be displayed on single product pages only when the checkbox setting option has been checked.
For your last question check at the end (for a product category without checkbox settings).
Here is the code:
// Display Fields
add_action('woocommerce_product_options_general_product_data', 'product_custom_fields_add');
function product_custom_fields_add(){
global $post;
echo '<div class="product_custom_field">';
// Custom Product Checkbox Field
woocommerce_wp_checkbox( array(
'id' => '_engrave_text_option',
'desc' => __('set custom Engrave text field', 'woocommerce'),
'label' => __('Display custom Engrave text field', 'woocommerce'),
'desc_tip' => 'true'
));
echo '</div>';
}
// Save Fields
add_action('woocommerce_process_product_meta', 'product_custom_fields_save');
function product_custom_fields_save($post_id){
// Custom Product Text Field
$engrave_text_option = isset( $_POST['_engrave_text_option'] ) ? 'yes' : 'no';
update_post_meta($post_id, '_engrave_text_option', esc_attr( $engrave_text_option ));
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 );
function add_engrave_text_field() {
global $post;
// If is single product page and have the "engrave text option" enabled we display the field
if ( is_product() && get_post_meta( $post->ID, '_engrave_text_option', true ) == 'yes' ) {
?>
<div>
<label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
<input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" maxlength="3" />
</label>
</div><br>
<?php
}
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Tested and works.
Checkbox output and save: Adding programatically data option tab to admin product pages Metabox
You will get something like this when the checkbox option has been selected in the product settings:
Make it work for a product category or a product tag (without settings checkbox):
add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field', 0 );
function add_engrave_text_field() {
global $post;
// HERE set the term Ids, slug or name (or an array of values)
$categories = array( 'clothing', 'music' );
$taxonomy = 'product_cat'; // (For product tags use 'product_tag' instead)
// If is single product page and have the "engrave text option" enabled we display the field
if ( is_product() && has_term( $categories, 'product_cat', $post->ID ) ) {
?>
<div>
<label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
<input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" maxlength="3" />
</label>
</div><br>
<?php
}
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Tested and works.
这篇关于产品设置中的“自定义”复选框，选中后会显示一个自定义字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
