Display additional product information (e.g. image caption) when hovering product image - css

I'm using using the WooCommerce plugin for WordPress to display my products. The thing is, when you are viewing the product category (archive), you can see the product name, image and price, but that doesn't really say all that much about exactly what the product is.
What I would like is for some more information to become available when you hover the product images. Something a bit like this.
Would it be possible to retrieve some of the information about the image, that I can enter in the WordPress media libray: title, caption alt text or description?
You can check the webshop here.
EDIT:
I found that editing the content-product.php file in the WooCommerce plugin folder, if I put this:
?>
random text
<?php
somewhere inside the php tags in the <li> section of that file, I could get 'random text' to show either above or below the product image on the product archive page. So, if I could replace that with a function that would retreive for instance the product image caption or some custom field that I can fill out for each product, that would go a long way towards solving the issue.
So, if anyone knows of a function that does this, please share it here.

hello sir just use this plugin
https://wordpress.org/plugins/woocommerce-custom-product-data-fields/
for retrieving any costume fields do like this
Retrieving multiselect value
global $wc_cpdf;
$multiselect = $wc_cpdf->get_value($post->ID, '_mymultiselect');
foreach ($multiselect as $value) {
echo $value;
}
Retrieving image value
global $wc_cpdf;
$image_id = $wc_cpdf->get_value($post->ID, '_myimage');
$size = 'thumbnail';
$image_attachment = wp_get_attachment_image($image_id, $size);
echo $image_attachment;
}

I recently did this with a website for a client. I changed the hover text for each product from "Add to Cart" to the product short description. Here is my code:
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
//get the product object
global $product;
$id = $product->get_id();
$descript = $product->get_short_description();
//take out html from description
$descript1 = strip_tags($descript);
//shorten description length to fit the product image box
if (strlen($descript1) > 100){
$descript1 = substr($descript1, 0, 99) . '...';
}
return __( $descript1, 'woocommerce' );
}

Related

How to get acf custom text fields from my WooCommerce product tag terms?

I am unable to get the acf text field to display in the woocommerce "Product Tag" admin dashboard.
I have tried the following code, along with many other different variations of looping through the products, retrieving their tags and returning the acf text field but no values are appearing in the columns.
The goal is to customize the Product Tag Admin Dashboard to display the acf text field term. I was able to achieve getting these text field terms in a different portion of code when I created a customize side bar that sections tags by categories that are different from the product categories. I tried that same code for the columns but that isn't working either.
add_filter( 'manage_edit-product_tag_columns', 'tag_category_column_admin', 9999 );
function tag_category_column_admin( $columns ){
$columns['tag_category'] = 'Tag Category';
return $columns;
}
add_action('manage_product_tag_custom_column', 'tag_category_column_admin_content', 10, 2);
function tag_category_column_admin_content($column,$product_id){
$product_tag_terms = wp_get_post_terms($product_id, 'product_tag');
foreach($product_tag_terms as $term){
$category_id = get_field('tag_category' , $term, true);
return $category_id;
}
if($column == 'tag_category'){
echo $category_id;
}
}
I have looked everywhere and cannot seem to find a solution to my problem. Please help!

ACF field in function.php

Following the request of an SEO agency, I'm trying to recover the content of a field (that I created via ACF in the product categories of WooCommerce) in a function of the functions.php file. I've tried a few tricks found on the net, but nothing works, I can't recover the content.
It's to replace the product category title by another one (the one of the new ACF field) and that this title is only displayed on the category archives of the site (not in the menus and other widgets where the default title is displayed.
Here is the code I did. I get the ID back fine if I display it, I make progress but nothing for $value
<?php
$query_id = get_queried_object_id();
function titre_seo_cat_prod() {
// recupere la valuur d'un post specifique
$value = get_field( 'titre_seo_categorie_de_produit', $query_id );
return $value;
}
?>

How to get a Product Variation Custom Field to work along other plugins?

I get this code (see below) to create a Product Variation Custom Field. It works just fine. Now I need to use the WP All Import Pro plugin to import Products from a csv file. This plugin allow to create the importation task by mapping the information in the csv to the fields of Product and Product Variation.
Problem: thing is that the new created Product Variation Custom Field is not visible for the WP All Import plugin. I mean, this new field is not listed when I do the mapping of the data be imported.
My assumption is that this code fails to create some data in the database to make this field available for other module.
How can I get this to work properly
I also attached a capture of the WP All Import page where the field should be visible.
/*******************************
add custom fields to product variations
*********************************/
// regular variable products
add_action( 'woocommerce_product_after_variable_attributes', 'add_to_variations_metabox', 10, 3 );
add_action( 'woocommerce_save_product_variation', 'save_product_variation', 20, 2 );
/*
* Add new inputs to each variation
*
* #param string $loop
* #param array $variation_data
* #return print HTML
*/
function add_to_variations_metabox( $loop, $variation_data, $variation ){
$custom = get_post_meta( $variation->ID, '_custom', true ); ?>
<div class="variable_custom_field">
<p class="form-row form-row-first">
<label><?php echo __( 'MY CUSTOM FIELD:', 'plugin_textdomain' ); ?></label>
<input type="text" size="5" name="variation_custom_data[<?php echo $loop; ?>]" value="<?php echo esc_attr( $custom ); ?>" />
</p>
</div>
<?php
}
/*
* Save extra meta info for variable products
*
* #param int $variation_id
* #param int $i
* return void
*/
function save_product_variation( $variation_id, $i ){
// save custom data
if ( isset( $_POST['variation_custom_data'][$i] ) ) {
// sanitize data in way that makes sense for your data type
$custom_data = ( trim( $_POST['variation_custom_data'][$i] ) === '' ) ? '' : sanitize_title( $_POST['variation_custom_data'][$i] );
update_post_meta( $variation_id, '_custom', $custom_data );
}
}
WP ALL IMPORT has this section coded into their files. They have not provide any hook or filter to add fields to this section.
The most important thing here is that WP ALL IMPORT has thought is like this :
As all the Meta for a particular variation is added finally to the post meta table. Which will be retrieved as by get_post_meta. Just like the custom fields. So in order to attach meta to the variation, you can just another Custom Fields with the Name as the name which the actual meta is stored with and with the value you want the variation to be. Just check the image attached. Refer - http://www.wpallimport.com/documentation/custom-fields/theme-plugin-fields/
I know this question was asked almost a year ago but I have been trying to figure out this exact issue out for quite some time now. But in the end I managed to find a workaround that at least will allow you to get that data into the variation instead of the main parent product:
1) In the WpAllImport Wordpress Addon you will be able to see a "variations" tab as shown in your screenshot. Click on this.
2) On this page you will once again not be able to see any custom fields you have made for variations HOWEVER there is a product attributes section.
3) If you add your variation as an attribute and uncheck "Show in variations" and "Taxonomy" and "Is Visible" then you can store your data in an attribute.
4) After the import you should be able to see you data in the attribute, if you know some programming you can even write a script to then loop through all variations and copy this data over to a custom field.
I know it's not much, but for my purposes I was at least able to save the data in the variation which I then used late in a product export plugin.
Hope that helps!
Though this question was initially asked 2 years ago. I found a solution in 2020. I hope this will help anyone who's still looking for a solution.
Please go to All Products and at the top where it says Add New Product you should see two more buttons "Import" and "Export". Click on Export and you will see an option of checkbox "Yes, export all custom meta" Please check this potion and all your custom fields even in variations will be exported.
Thanks

Add custom product field on quick edit option on the product listing of a woocommerce site

How can I add custom product field/s on quick edit screen on the product listing of a woocommerce store?
I am not really sure if this is the best way to do it, but it works great for me
Basically my general goal is to add custom fields for a product, I managed to do it (Adding custom fields to the single product pages) with the help of these useful tuts.
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/
http://www.remicorson.com/woocommerce-custom-fields-for-variations/
I recommend checking those links first before proceeding.
Now, what I wanted to do is to add those custom fields to the quick add option on the product listing.
That's where the resource get scarce.
Basically this is how I did it.
Add your custom field (the html forms) to the quick edit options.
I hooked into the 'woocommerce_product_quick_edit_end' action to accomplish this.
This hook is found on woocommerce->includes->admin->views->html-quick-edit-product.php on line 195
Save your custom field.
I hooked into the 'woocommerce_product_quick_edit_save' action to accomplish this.
This hook is found on woocommerce->includes->admin->class-wc-admin-post-types.php inside the 'quick_edit_save' function on line 929
The previous 2 steps does the trick, it does persist the values, however after updating the custom field via the quick edit option, the data is persisted on the backend, but is not populated to the custom field on the UI. That's why we need the 3rd step.
Add the custom field meta data inside the product listing column, then use js to extract the metadata out then populate it to the custom field
I hooked into the 'manage_product_posts_custom_column' action to add a custom HTML tags (div or whatever) to hold my custom field metadata
Then I used javascript to extract the data out from the meta data and populate it into the custom fields
Step 3 is just a copy of how WooCommerce does this process.
For referrence, take a look at function 'render_product_columns' of woocommerce->includes->admin->class-wc-admin-post-types.php
Also take a look at quick-edit.js located at woocommerce->assets->js->admin
Example Code:
Note that the code below is used for illustration and guide purposes, my actual code is quite long and complex.
Step 1:
add_action( 'woocommerce_product_quick_edit_end', function(){
/*
Notes:
Take a look at the name of the text field, '_custom_field_demo', that is the name of the custom field, basically its just a post meta
The value of the text field is blank, it is intentional
*/
?>
<div class="custom_field_demo">
<label class="alignleft">
<div class="title"><?php _e('Custom Field Demo', 'woocommerce' ); ?></div>
<input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e( 'Custom Field Demo', 'woocommerce' ); ?>" value="">
</label>
</div>
<?php
} );
Step 2:
add_action('woocommerce_product_quick_edit_save', function($product){
/*
Notes:
$_REQUEST['_custom_field_demo'] -> the custom field we added above
Only save custom fields on quick edit option on appropriate product types (simple, etc..)
Custom fields are just post meta
*/
if ( $product->is_type('simple') || $product->is_type('external') ) {
$post_id = $product->id;
if ( isset( $_REQUEST['_custom_field_demo'] ) ) {
$customFieldDemo = trim(esc_attr( $_REQUEST['_custom_field_demo'] ));
// Do sanitation and Validation here
update_post_meta( $post_id, '_custom_field_demo', wc_clean( $customFieldDemo ) );
}
}
}, 10, 1);
Step 3:
add_action( 'manage_product_posts_custom_column', function($column,$post_id){
/*
Notes:
The 99 is just my OCD in action, I just want to make sure this callback gets executed after WooCommerce's
*/
switch ( $column ) {
case 'name' :
?>
<div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>">
<div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true); ?></div>
</div>
<?php
break;
default :
break;
}
}, 99, 2);
The JS part
jQuery(function(){
jQuery('#the-list').on('click', '.editinline', function(){
/**
* Extract metadata and put it as the value for the custom field form
*/
inlineEditPost.revert();
var post_id = jQuery(this).closest('tr').attr('id');
post_id = post_id.replace("post-", "");
var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),
$wc_inline_data = jQuery('#woocommerce_inline_' + post_id );
jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());
/**
* Only show custom field for appropriate types of products (simple)
*/
var product_type = $wc_inline_data.find('.product_type').text();
if (product_type=='simple' || product_type=='external') {
jQuery('.custom_field_demo', '.inline-edit-row').show();
} else {
jQuery('.custom_field_demo', '.inline-edit-row').hide();
}
});
});
Make sure to enqueue the script
Hope this helps anyone, again, I am not sure if this is the best way to do it, but upon examining WooCommerce source, it seems WooCommerce
doesn't provide a convenient hook to accomplish this task with ease (at least not yet)
If you have a better approach than this please share.

How to Add Attribute Terms Image in WooCommerce?

In WooCommerce, I have created an attribute "Brand", and added some terms, like "Brand One", "Brand Two" etc..
I want to add an image for each term.
Right now there is no option to add image in attribute terms.
Please tell me how to add image in attribute terms.
An admin link is like this:
.../wp-admin/edit-tags.php?taxonomy=pa_brand&post_type=product'
WooCommerce stores product attributes outside of the usual taxonomy table, so you'll need to go with something more WC-specific. Try the Variation Swatches and Photos extension.
UPDATE: You can use the Taxonomy Images plugin but you have to make a minor alteration. By default the plugin only displays taxonomies that are set to display in the admin area (i.e. the show_ui value is set to true). WooCommerce hides the product attribute taxonomies by default, so the plugin will not display them in the settings screen. You can change this behaviour by commenting out/deleting lines 402-402 of taxonomy-images.php:
if ( ! isset( $taxonomy->show_ui ) || empty( $taxonomy->show_ui ) )
continue
Removing these lines will allow he plugin to display all taxonomies, regardless of whether they are hidden or not.
Props to #helgatheviking for suggesting that plugin in the first place
With the "Variation Swatches" plugin (see the answer by #Dre), everything works smoothly, and getting the image is as easy as this:
$swatch_term = new WC_Swatch_Term( 'swatches_id', $term_id, $taxonomy, false,
'swatches_image_size' );
$html = '<img src="' . $swatch_term->thumbnail_src . '" alt=""/>';
The "Taxonomy Images" has not been updated since WP 3.6.1...
Technically a WooCommerce "attribute" is just a WordPress Custom Taxonomy. Therefore I would try something like the Taxonomy Images plugin.
"Variation Swatches and Photos extension" plugin is premium and no body would like to purchase that to serve such a purpose as getting an icon image for a brand.
The "Taxonomy Images" has not been updated since WP 3.6.1...
What I came up with is Category and Taxonomy Image and that does the job.
Here's how you can get the image URL:
if (function_exists('get_wp_term_image'))
{
$meta_image = get_wp_term_image($term_id);
//It will give category/term image url
}
echo $meta_image; // category/term image url
I've fixed this issue. Actually i was not passing the right value in taxonomy. I was using variation swatches plugin so was not know which value to pass for taxonomy. below is the working code. I was trying to fetch "brands" attributes list with images.
$attribute_taxonomies = wc_get_attribute_taxonomies();
$taxonomy_terms = array();
if ($attribute_taxonomies) :
foreach ($attribute_taxonomies as $tax) :
if (taxonomy_exists(wc_attribute_taxonomy_name($tax->attribute_name))) :
if($tax->attribute_name=="brands"){
$taxonomy_terms[$tax->attribute_name] = get_terms(wc_attribute_taxonomy_name($tax->attribute_name), 'number=6&orderby=name&hide_empty=1');
}
endif;
endforeach;
endif;
foreach ($taxonomy_terms as $item) :
foreach($item as $child):
//print_r($child);
$thumbnail_id = get_woocommerce_term_meta( $child->term_id, 'product_pa_brands', true );
$textureImg = wp_get_attachment_image_src( $thumbnail_id );
//we are getting image in $textureImg[0]
}
endforeach;
endforeach;

Resources