I'm using WooCommerce and i want to show the product-category banner in product page.
for the product-category i used this code:
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if (is_product_category()){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
and for the product page i use a similar code with some changes,but it doesn't work,can some one point me to my mistake?
add_action( 'woocommerce_archive_description', 'woocommerce_product_image', 2 );
function woocommerce_product_image() {
if (is_product()){
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$cat = $terms->term_id;
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
found a solution on my own,hope it will help you:
add_action( 'woocommerce_before_single_product', 'woocommerce_product_image', 2 );
function woocommerce_product_image(){
$product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );
if ( $product_cats && ! is_wp_error ( $product_cats ) ){
$cat = array_shift( $product_cats );
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
$category_link = get_category_link($cat);
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
You can add category banner to product page use this code -
add_action('woocommerce_before_single_product', 'woocommerce_add_category_banner', 2);
function woocommerce_add_category_banner()
{
global $product;
if (isset($product) && is_product())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image)
{
echo '<img src="' . esc_url($image) . '" alt="" />';
}
}
}
Related
I am trying to add multiple product categories -to display category thumbnail has product badge in catalog page
add_action ('woocommerce_before_shop_loop_item_title','alt_category_badge', 99);
add_action ('woocommerce_product_thumbnails','alt_category_badge', 100);
function alt_category_badge() {
global $product;
if ( is_product()){
global $post;
$brands_id = get_term_by('slug', 'sunglasses', 'product_cat');
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
if($term->parent === $brands_id->term_id) {
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
if ( $image )
echo '<div class="brand-icon-logo sunglasses" ><img height="100%" width="35%" src="'.$image.'" alt="'.$category_name.' sunglasses online in dubai"></div>';
}
}
}
}
/**
* Display product category thumbnail.
*
*/
add_action('woocommerce_before_shop_loop_item_title', 'display_product_category_thumbnail', 20);
function display_product_category_thumbnail()
{
global $product;
$productFirstCategory = reset(get_the_terms($product->get_id(), 'product_cat'));
$small_thumb_size = 'woocommerce_thumbnail';
$dimensions = wc_get_image_size($small_thumb_size);
if ($thumbnail_id = get_term_meta($productFirstCategory->term_id, 'thumbnail_id', true)) {
$image = wp_get_attachment_image_src($thumbnail_id, $small_thumb_size);
if (is_array($image)) {
$image = reset($image);
}
$image_srcset = function_exists('wp_get_attachment_image_srcset') ? wp_get_attachment_image_srcset($thumbnail_id, $small_thumb_size) : false;
$image_sizes = function_exists('wp_get_attachment_image_sizes') ? wp_get_attachment_image_sizes($thumbnail_id, $small_thumb_size) : false;
} else {
$image = wc_placeholder_img_src();
$image_srcset = false;
$image_sizes = false;
}
if ( $image )
echo '<div class="brand-icon-logo sunglasses" ><img height="100%" width="35%" src="'.$image.'" alt="'.$category_name.' sunglasses online in dubai"></div>';
}
for specific categorys
/**
* Display product category thumbnail.
*
*/
add_action('woocommerce_before_shop_loop_item_title', 'display_product_category_thumbnail', 20);
function display_product_category_thumbnail()
{
global $product;
if ( has_term( array( 'catagory1','catagory2'), 'product_cat', $product->get_id() ) ){
$productFirstCategory = reset(get_the_terms($product->get_id(), 'product_cat'));
$small_thumb_size = 'woocommerce_thumbnail';
$dimensions = wc_get_image_size($small_thumb_size);
if ($thumbnail_id = get_term_meta($productFirstCategory->term_id, 'thumbnail_id', true)) {
$image = wp_get_attachment_image_src($thumbnail_id, $small_thumb_size);
if (is_array($image)) {
$image = reset($image);
}
$image_srcset = function_exists('wp_get_attachment_image_srcset') ? wp_get_attachment_image_srcset($thumbnail_id, $small_thumb_size) : false;
$image_sizes = function_exists('wp_get_attachment_image_sizes') ? wp_get_attachment_image_sizes($thumbnail_id, $small_thumb_size) : false;
} else {
$image = wc_placeholder_img_src();
$image_srcset = false;
$image_sizes = false;
}
if ( $image )
echo '<div class="brand-icon-logo sunglasses" ><img height="100%" width="35%" src="'.$image.'" alt="'.$category_name.' sunglasses online in dubai"></div>';
}
}
I have a function that returns the product Category Thumbnail on the Archive pages for WooCommerce. This is working great.
What I would like to do, is be able to return the Parent Category Thumbnail when viewing Child Categories.
Here is the code I've currently got:
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
}
}
}
Can anybody help modify the query so that it shows the parent category image.
Ideally even better still would be to show the child thumbnail if there is one, and if there isn't, then drop back to the parent one and show that.
To avoid an empty image on the top level category use the following:
function woocommerce_category_image() {
if ( is_product_category() ){
$term = get_queried_object(); // get the WP_Term Object
$term_id = $term->parent > 0 ? $term->parent : $term->term_id; // Avoid an empty image on the top level category
$image_src = wp_get_attachment_url( get_term_meta( $term_id, 'thumbnail_id', true ) ); // Get image Url
if ( ! empty($image_src) ) {
echo '<img src="' . $image_src . '" alt="' . $term->name . '" />';
}
}
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
Update (related to your comment)
Here if the queried product category has not an image set for it, the parent product category image will be displayed instead.
function woocommerce_category_image() {
if ( is_product_category() ){
$term = get_queried_object(); // get the WP_Term Object
$image_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
if( empty( $image_id ) && $term->parent > 0 ) {
$image_id = get_term_meta( $term->parent, 'thumbnail_id', true );
}
$image_src = wp_get_attachment_url( $image_id ); // Get the image Url
if ( ! empty($image_src) ) {
echo '<img src="' . $image_src . '" alt="' . $term->name . '" />';
}
}
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
Just change $cat->term_id by $cat->parent to get the parent thumbnail id.
Final code :
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_term_meta( $cat->parent, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
}
}
Hope this helps
My goal here is to show only child categories under category ID 93 (vendors) with a thumbnail and URL so people can click on the vendor logo and see other products in that category. I have everything mostly working, but I'm not sure how to limit my request to show only one child from my parent. This is admittedly very amateur - I am not a backend developer nor do I really understand how to write PHP.
<?php
echo $wp_query;
$terms_post = get_the_terms($product->ID, 'product_cat');
foreach ($terms_post as $term_cat) {
$term_cat_id = $term_cat->term_id;
$category_url = get_term_link( $term_cat_id, 'product_cat', true );
$thumbnail_id = get_woocommerce_term_meta($term_cat_id, 'thumbnail_id', true );
$image_url = wp_get_attachment_url( $thumbnail_id );
echo '<img src="' . $image_url . '" alt="" width="50" height="50">';
}
?>
To show only 1 child from the parent, just use array_slice().
foreach(array_slice($terms_post, 0, 1) as $term_cat ) {
$term_cat_id = $term_cat->term_id;
$category_url = get_term_link( $term_cat_id, 'product_cat', true );
$thumbnail_id = get_woocommerce_term_meta($term_cat_id, 'thumbnail_id', true );
$image_url = wp_get_attachment_url( $thumbnail_id );
echo '<img src="' . $image_url . '" alt="" width="50" height="50">';
}
Do let me know if it works.
EDITED:
Use the below code to get child categories using a parent category slug.
<?php
global $post;
$category_id = get_term_by('slug', 'PARENT-CAT-SLUG', 'product_cat');
$terms = get_the_terms($post->ID, 'product_cat');
foreach ($terms as $term) {
if($term->parent === $category_id->term_id) { ?>
<span class="product-sub-cats"><?php echo $term->name; ?></span>
<?php break;
}
}
?>
Replace "PARENT-CAT-SLUG" with the slug of your Parent Category.
I'm looking to print out the alt text for each thumbnail image on this page http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/
However the first image alt text seems to be used for ALL thumbnail images even though the alt text are different. Any help is much appreciated.
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
?>
<div id="product-images" class="thumbnails"><?php
$small_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-thumbnail');
$middle_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product');
$large_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-zoom');
$img_id = get_post_thumbnail_id(get_the_id());
$alt_text = get_post_meta($img_id, '_wp_attachment_image_alt', true);
echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
<img src="' . $small_img[0] . '" alt="' . $alt_text . '">
</a>';
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
foreach ( $attachment_ids as $attachment_id ) {
$classes = array( 'zoom' );
if ( $loop == 0 || $loop % $columns == 0 )
$classes[] = 'first';
if ( ( $loop + 1 ) % $columns == 0 )
$classes[] = 'last';
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
// $image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
// $image_class = esc_attr( implode( ' ', $classes ) );
// $image_title = esc_attr( get_the_title( $attachment_id ) );
$small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
$middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
$large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );
// echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
<img src="' . $small_img[0] . '" alt="' . $alt_text . '">
</a>';
$loop++;
}
?></div>
<div class="carousel-prev product-prev"></div>
<div class="carousel-next product-next"></div>
<?php
}
You set your $alt_text value when you handle the post thumbnail, outside the foreach loop.
In your foreach loop, when you are going through the attachments, you have forgotten to update the value.
Try something like this in the foreach loop:
$small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
$middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
$large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
I use this code in PHP:
$idcat = 147;
$thumbnail_id = get_woocommerce_term_meta( $idcat, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<img src="'.$image.'" alt="" width="762" height="365" />';
Where 147 is the current ID manually set, but i need to current id in other categories
Any suggest?
To display the category image for the currently displayed category in archive-product.php, use the current category term_id when is_product_category() is true:
// verify that this is a product category page
if ( is_product_category() ){
global $wp_query;
// get the query object
$cat = $wp_query->get_queried_object();
// get the thumbnail id using the queried category term_id
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
// print the IMG HTML
echo "<img src='{$image}' alt='' width='762' height='365' />";
}
get_woocommerce_term_meta is depricated since Woo 3.6.0.
so change
$thumbnail_id = get_woocommerce_term_meta($value->term_id, 'thumbnail_id', true );
into: ($value->term_id should be woo category id)
get_term_meta($value->term_id, 'thumbnail_id', true)
see docs for details:
https://docs.woocommerce.com/wc-apidocs/function-get_woocommerce_term_meta.html
From the WooCommerce page:
// WooCommerce – display category image on category archive
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" />';
}
}
}
To prevent full size category images slowing page down, you can use smaller images with wp_get_attachment_image_src():
<?php
$thumbnail_id = get_term_meta( $term_id, 'thumbnail_id', true );
// get the medium-sized image url
$image = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
// Output in img tag
echo '<img src="' . $image[0] . '" alt="" />';
// Or as a background for a div
echo '<div class="image" style="background-image: url("' . $image[0] .'")"></div>';
?>
EDIT: Fixed variable name and missing quote
You may also used foreach loop for display category image and etc from parent category given by parent id.
for example, i am giving 74 id of parent category, then i will display the image from child category and its slug also.
**<?php
$catTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC', 'child_of'=>'74'));
foreach($catTerms as $catTerm) : ?>
<?php $thumbnail_id = get_woocommerce_term_meta( $catTerm->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id ); ?>
<li><img src="<?php echo $image; ?>" width="152" height="245"/><span><?php echo $catTerm->name; ?></span></li>
<?php endforeach; ?>**
This solution with few code. I think is better.
<?php echo wp_get_attachment_image( get_term_meta( get_queried_object_id(), 'thumbnail_id', 1 ), 'thumbnail' ); ?>
Add code in /wp-content/plugins/woocommerce/templates/ loop path
<?php
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo "<img src='{$image}' alt='' />";
}
?>
<?php
$terms = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
) ); // Get Terms
foreach ($terms as $key => $value)
{
$metaterms = get_term_meta($value->term_id);
$thumbnail_id = get_woocommerce_term_meta($value->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<img src="'.$image.'" alt="" />';
} // Get Images from woocommerce term meta
?>
The original answer helped but is out of date.
From https://docs.woocommerce.com/document/woocommerce-display-category-image-on-category-archive/
/**
* Display category image on category archive
*/
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
}
}
}
I added a class echo '<img src="' . $image . '" alt="' . $cat->name . '" class="catImage" />'; and then styled it with
.catImage{
float: left;
max-height: 100px;
padding-right: 10px;
}
I did it this way:
function loop_product_category_image(){
global $wp_query;
$terms = get_the_terms( $wp_query->ID, 'product_cat' );
$thumbnail_id = get_term_meta( $terms[0]->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo "<img src='{$image}' alt='category image' width='162' height='165' />";
}
You can hook than for example:
in product loop:
add_action('woocommerce_before_shop_loop_item', 'loop_product_category_image', 7);
or in product:
add_action('woocommerce_before_main_content', 'cylkow_loop_product_category_image', 7);
or wherever you want.
You can use also conditional tags
https://woocommerce.com/document/conditional-tags/
Use this code this may help you.i have passed the cat id 17.pass woocommerce cat id and thats it
<?php
global $woocommerce;
global $wp_query;
$cat_id=17;
$table_name = $wpdb->prefix . "woocommerce_termmeta";
$query="SELECT meta_value FROM {$table_name} WHERE `meta_key`='thumbnail_id' and woocommerce_term_id ={$cat_id} LIMIT 0 , 30";
$result = $wpdb->get_results($query);
foreach($result as $result1){
$img_id= $result1->meta_value;
}
echo '<img src="'.wp_get_attachment_url( $img_id ).'" alt="category image">';
?>