I'm trying to use ACF to add a custom attribute to the "Additional Information" tab for the products in WooCommerce. I want the admin to be able to upload a PDF that then should be set and linked in the table found in the "Additional Information" tab.
I've found the default template for the attributes in the plugin directory for WooCommerce, more precisely woocommerce/templates/single-product/product-attributes.php. This is how the template looks. I can easily just put the the_field("pdf") there to display the custom field, but the problem I'm running into is that the Additional Information tab will only show if attributes has been added through WooCommerce.
Is there some way to add additional conditional tags for when to display the Additional Information tab? If I somehow could add if (get_field("pdf")) to that code, I think this would be solved.
Updated: In Woocommerce if any dimensions, weight or product attributes (set to be displayed on product) exist, "Additional Information" tab will be displayed…
So if the tab is hidden and you have added on single-product/product-attributes.php template a custom field get_field("pdf") to be displayed that has a value, you can force "Additional Information" tab to appear using:
add_filter( 'woocommerce_product_tabs', 'woo_customize_tabs', 100, 1 );
function woo_customize_tabs( $tabs ) {
if( ! isset($tabs['additional_information']) && null !== get_field("pdf") ){
$tabs['reviews']['priority'] = 30;
$reviews = $tabs['reviews'];
unset($tabs['reviews']);
$tabs['additional_information'] = array(
'title' => __( 'Additional information', 'woocommerce' ),
'priority' => '20',
'callback' => 'woocommerce_product_additional_information_tab',
);
$tabs['reviews'] = $reviews;
}
return $tabs;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Related
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
I need to move the Product Meta content from under the "Add to Cart" button to the "Additional Information" Tab, I want it to display similar to the attribute as the client wants to move this information to Additional Information Tab.
For eg - http://yellowbee.online/product/yellow-bee-aqua-bug-led-clogs/
I need to move the "SKU", "Categories" and "Tags" to the tab which says "Additional Information"
Website is made using xStore Theme on Wordpress & Woocommerce, I have tried reading a lot on how to achieve this but all attempts have failed.
I have tried adding the following code to the functions.php in the child theme. No Luck.
function additional_product_tabs_metabox()
{
add_meta_box(
'add_product_metabox_additional_tabs',
__( 'Additional product Tabs', 'woocommerce' ),
'additional_product_tabs_metabox_content',
'product',
'normal',
'high'
);
}
I am hoping that someone has a solution on the right code to to get this hook and then to display it in the additional information tab.
This can be done with the following:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_product_additional_information', 'woocommerce_template_single_meta', 10 );
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
This will work if the related hooks are not yet customized by the theme or a plugin.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
$tabs['delivery_information'] = array(
'title' => __( 'Additional information', 'woocommerce' ),
'priority' => 16,
'callback' => 'product_additional_info_tab'
);
return $tabs;
}
function product_additional_info_tab() {
$info = get_post_meta(get_the_ID(),
'additional_product_tabs_metabox_content', true);
echo $info;
}
Two things I am trying to do on the product pages of this website: https://lovesometea.com/product/green-coconut/
1) Delete "additional information" tab
2) Add Attribute "Size" above the product description
To delete the "additional information" tab, I have been following this: https://idevie.com/tutorials/how-to-make-woocommerce-product-attributes-more-prominent
So this is what I did:
1) Added a custom plug-in and activated it - http://code.tutsplus.com/tutorials/making-woocommerce-product-attributes-more-prominent--cms-25438
2) Tried removing "additional information" by editing the tabs.php in /wp-content/plugins/woocommerce/templates/single-product/tabs
/**
* Removes the "Additional Information" tab that displays the product attributes.
*
* #param array $tabs WooCommerce tabs to display.
*
* #return array WooCommerce tabs to display, minus "Additional Information".
*/
function tutsplus_remove_product_attributes_tab( $tabs ) {
unset( $tabs['additional_information'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100 );
This is where I'm stuck. I even tried deleting the additional-information.php file all together (in the same tabs folder) and additional information still displays!
I tried putting the above code in three different areas of the tabs.php file but no effect on the tab on the product page.
Any other suggestions? Perhaps there is a different/better method with the latest woocommerce version?
This worked for me for removing the tabs:
Adding this in functions.php:
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
return $tabs;
}
To return the attributes to display under description, I couldn't figure it out so I just added the sizes in the description
Maybe you need to change the priority from 100 to 98 as in woocommerce documentation , put the code in functions.php file
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['additional_information'] ); // Remove the additional information tab
return $tabs;
}
I pasted this code in function.php, but it didn't rename the product page tab as it supposed to (http://www.noushasasart.com/product/harsh-bark/)
function woo_remove_product_tabs($tabs) {
unset($tabs['reviews']); // Remove the reviews tab
$tabs['description']['title'] = __('Additional Information'); // Rename the
description tab
return $tabs;
}
how can I solve this?
You have forgotten the filter hook:
add_filter( 'woocommerce_product_tabs', 'woo_customize_tabs', 100, 1 );
function woo_customize_tabs( $tabs ) {
unset($tabs['reviews']); // Remove the reviews tab
$tabs['description']['title'] = __( 'More Information' ); // Rename the description tab
return $tabs;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
All code is tested on Woocommerce 3+ and works.
Update (related to your comment) | Rename product description heading (inside the tab):
To rename description heading use woocommerce_product_description_heading filter hook this way:
add_filter( 'woocommerce_product_description_heading', 'rename_product_description_heading', 10, 1 );
function rename_product_description_heading( $heading ) {
return __( 'Additional Information', 'woocommerce' );
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
All code is tested on Woocommerce 3+ and works.
Official related documentation: Editing product data tabs
In wordpress woocommerce under single product page, i want to change the default tab headings:
Change "Description" to Features and
Change "Additional Information" to "Specifications"
Under which PHP file should i make these changes, for it to take effect ?
Here is how you would rename the tabs (just add to your theme functions.php file) - This is valid for older versions of WooCommerce per their documentation:
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( 'Features' ); // Rename the description tab
$tabs['additional_information']['title'] = __( 'Specifications' ); // Rename the additional information tab
return $tabs;
}