Display custom field blow product title Woocommerce product single pages - php

I would like to add a text field in the back-end Woocommerce product page and displaying/echo the text on the front-end below the Product title.
Now I have the 'custom field box' to write a text in the back-end (see screenshot), but I don't know how I can showing the text on the front-end. Can someone help me with this code?
I followed this page, but it is only for archive pages...
Add a custom field value below product title in WooCommerce archives pages
Thank you in advance!
jerry
Functions.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 Text Field
woocommerce_wp_text_input(
array(
'id' => '_custom_product_text_field',
'placeholder' => 'Custom Product Text Field',
'label' => __('Custom Product Text Field', 'woocommerce'),
'desc_tip' => 'true'
)
);
}
function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Text Field
$woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
if (!empty($woocommerce_custom_product_text_field))
update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
}

Your solution is the right hook, when you use add_action() you need to choose the right hook to insert your code in the right location.
Probebly the location you want is "woocommerce_before_add_to_cart_form";
add_action('woocommerce_before_add_to_cart_form', 'woocommerce_product_custom_fields');
I'm not sure about the exact location but you can just change "woocommerce_before_add_to_cart_form" and place the right hook you want.
This is a great article that shows the location and the required hook for every location. Let me know what you get!

Add the following to display that product custom field in single product pages below product title:
add_action( 'woocommerce_single_product_summary', 'custom_field_display_below_title', 7 );
Code goes in functions.php file of your active child theme (or active theme). It should work.
Then it will call the function, that you are already using, to display the custom field on product archive pages:
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), '_custom_product_text_field', true );
// Display
if( ! empty($custom_field) ){
echo '<p class="my-custom-field">'.$custom_field.'</p>';
}
}
Related: WooCommerce action hooks and overriding templates

Related

Access and Edit WooCommerce Product meta data in Admin Product Edit

Im trying to export and import my WooCommerce product across platforms. I use the standard WooCommerce product export and the Produkt Feed Pro for my Feeds. The exported Products have meta-data like:
Meta: _woosea_brand Meta: _woosea_mpn Meta: _woosea_upc Meta: _woosea_ean Meta: _woosea_gtin Meta: _woosea_color Meta: _woosea_size Meta: _woosea_gender
Now I want to add, save and edit this meta data in edit product backend. So if I go to the product edit backend I can manually enter and save the value of this field for example: _woosea_gender = "unisex, male, female". and save the meta data. So in the next export I get the adjusted meta data.
I looked into some some plugins(but they seem outdated): https://wordpress.org/plugins/wc-fields-factory/
This post is also coming close to what I want to do I tired to adjust it to my needs but it did nit worked.
Updating product post meta data in admin meta box field
editing: _woosea_age_group(I need to add this values: (newborn, infant, toddler, kids, adult)
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_deal_general_fields_save' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
$feature_product=get_post_meta(get_the_ID(), '_woosea_age_group', true );
if($feature_product=='yes'){
echo '<div class="options_group">';
// Custom fields will be created here...
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => '_woosea_age_group',
'label' => __( 'Age Group', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter the Deal Product Text value here. (will be shown on home page)', 'woocommerce' )
)
);
echo '</div>';
}
}
Any advice on how to correctly set WooCommerce product meta data is more then welcome.
Best Regards.

How to display custom field of a variation product in product page based on the attributes selected?

I have set a custom field for each variation product in woocommerce. I want to display the custom field in place of the product title or other areas of the page. So want to display custom field of the variation child product if variation selected otherwise display custom field of the parent product.
The custom field should change based on attribute selected.
Currently i am able to display the custom field of parent product but child product custom field not changing based on variation selected.
How can I set the custom field?
I tried setting the custom field in the product page template using the visual composer. But does not work in case of child product.
I found the below code which can be used in function.php and seems it could meet my needs with some modification
add_action( 'woocommerce_variation_options_pricing', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
)
);
}
// 2. Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'save_custom_field_variations', 10, 2 );
function save_custom_field_variations( $variation_id, $i ) {
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id,'custom_field', esc_attr( $custom_field ) );
}
// 3. Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'add_custom_field_variation_data' );
function add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
return $variations;
}
Added below code to variation.php
<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}}}
</div>
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>
1) The custom field shows next to price on selecting the variation. But i am unable to show the field in other areas of product page. I did add the custom field via shortcode but it does not display on selecting the variation.
2) i am also looking to use in the link which contains shortcode with custom field (eg http://www.websitename.com/[product_meta name=custom_field]. The custom field for parent product shows fine but for variation product it does not show or update on variation selection.
Referred from
https://businessbloomer.com/woocommerce-add-custom-field-product-variation/?unapproved=224924&moderation-hash=de32083fe8b29ba15adaf268926fdd83#comment-224924
https://wordpress.stackexchange.com/questions/276941/woocommerce-add-extra-field-to-variation-product?rq=1
Why not use the variation price? It is possible to set price per variation.
See this image in this section of this WooCommerce documentation article
Maybe you have a special use case where you need to use the custom field. In that case i suggest you check this class and get the proper hook to use.

How to add a custom field text below the product title in wordpress WooCommerce [duplicate]

This question already has answers here:
Set product custom field and display value in cart, checkout and view order
(2 answers)
Closed 4 years ago.
In WooCommerce I would like to add custom text to my products display, that will be grabbed from a custom field in product's edit page.
This is how it looks now:
You can see the products with their title below:
Website link
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), '_custom_product_text_field', true );
// Display
if( ! empty($custom_field) ){
echo '<p class="my-custom-field">'.$custom_field.'</p>';
}
}
You need to add the full code to your theme's 'functions.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 Text Field
woocommerce_wp_text_input(
array(
'id' => '_custom_product_text_field',
'placeholder' => 'Custom Product Text Field',
'label' => __('Custom Product Text Field', 'woocommerce'),
'desc_tip' => 'true'
)
);
echo '</div>';
}
function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Text Field
$woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
if (!empty($woocommerce_custom_product_text_field))
update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// Custom Product Number Field
$woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
if (!empty($woocommerce_custom_product_number_field))
update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// Custom Product Textarea Field
$woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
if (!empty($woocommerce_custom_procut_textarea))
update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));
}
Your custom field ID is _custom_product_text_field here and you can display the data like <?php echo get_post_meta($post->ID, '_custom_product_text_field', true); ?> inside product template's loop (probably override 'woocommerce/single-product.php').
If WordPress returns error while updating 'functions.php', try uploading via FTP or use some File Manager plugins.

Add a custom field value below product title in WooCommerce archives pages

In WooCommerce I would like to add custom text to my products display, that will be grabbed from a custom field in product's edit page.
This is how it looks now:
You can see the products with their title below:
I would like to add a text below every product, marked with blue pen:
I have managed to find some custom php code to add custom field in product's page like this:
.
This is my code:
// 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 Text Field
woocommerce_wp_text_input(
array(
'id' => '_custom_product_text_field',
'placeholder' => 'Custom Product Text Field',
'label' => __('Custom Product Text Field', 'woocommerce'),
'desc_tip' => 'true'
)
);
}
function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Text Field
$woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
if (!empty($woocommerce_custom_product_text_field))
update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
}
But I don't know how to connect the custom field to the product's display,
so the custom field's text will be shown below the product's title.
How to display the custom field below product title
Updated:
Try this custom hooked function, that will display your custom field value below product title:
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), '_custom_product_text_field', true );
// Display
if( ! empty($custom_field) ){
echo '<p class="my-custom-field">'.$custom_field.'</p>';
}
}
Code goes in function.php file of your active child theme (or active theme).
It should work.
For anyone trying to implement this, the closing div is missing from function woocommerce_product_custom_fields(). Add echo ''; before the closing curly bracket otherwise all of the other product data tabs in the product settings will be empty.
If you are trying to use this code the closing div needs to be:
echo '</div>';
otherwise echo '<div class="product_custom_field">'; remains open.

Woocommerce Products Custom Field

I have added custom fields to my woocommerce products and have been able to enter and fill the custom field data on products. I am trying now to use the data from that custom field in a button I am adding on the woocommerce single product page.
The custom field is a URL for the product sample. I am then trying to add a "View Product Sample" button on the woocommerce single product page that navigates to the url entered int he custom field. Here is the code I have:
// Display Fields
add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );
// Save Fields
add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
// Text Field
woocommerce_wp_text_input(
array(
‘id’ => ‘product_sample’,
‘label’ => __( ‘Sample Product Link’, ‘woocommerce’ ),
‘placeholder’ => ‘http://’,
‘desc_tip’ => ‘true’,
‘description’ => __( ‘Enter the sample product link here.’, ‘woocommerce’ )
)
);
}
function woo_add_custom_general_fields_save( $post_id ){
// Textfield
$woocommerce_text_field = $_POST[‘product_sample’];
if( !empty( $woocommerce_text_field ) )
update_post_meta( $post_id, ‘product_sample’, esc_html( $woocommerce_text_field ) );
}
add_action(‘woocommerce_after_add_to_cart_button’,’cmk_additional_button’);
function cmk_additional_button() {
echo '<a href="CONTENT OF CUSTOM FIELD - URL" target="_blank" button
type="submit" class="button sample">View Product Sample</a>';
}
I need help determining how to get my custom field meta data into the link for the button that is echoed at the end of the code.
Thanks for any help anyone can give.
You Can use ACF plugin for it and call the shortcode on single product page
Reference Url:http://blog.adlivetech.com/get-custom-fields-woocomerce/
You need to use get_post_meta() function this way:
add_action( 'woocommerce_after_add_to_cart_button', 'cmk_additional_button' );
function cmk_additional_button() {
global $post;
$url = get_post_meta( $post->ID, 'product_sample', true );
echo 'View Product Sample';
}
Code goes in functions.php file of your active child theme (or theme) or also in any plugin file.
This should work.
In the code of your question you are using ’ and you should replace them by ' instead, to avoid php errors.

Categories