I'm using this snippet to output the product gallery attachments on a custom wordpress template for a woocommerce site. I'm using a lightbox for the popup. But I struggling to get the attachment url, instead it keeps on using the featured image the pop-up.
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
$url = $thumb['0'];
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' . $url . '" rel="shadowbox" >' ."<img src=".$image_link = wp_get_attachment_url( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Any ideas on how to target the correct url path for the product gallery images?
Any help much appreciated!
I have changed 'thumbnail_size' to 'large' added global $post; and changed .wp_get_attachment_image_src( $attachment_id, 'large')..
The $post will need to be decalered globaly to access it's contents since this is outside "the loop".
EDIT 2 I've updated the code below so it should link to the image clicked. Removed $thumb and $url as it's not being used.
<?php
global $product;
global $post;
$attachment_ids = $product->get_gallery_attachment_ids();
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' .wp_get_attachment_image_src( $attachment_id, 'large'). '" rel="shadowbox" >' ."<img src=".wp_get_attachment_image_src( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Hope this will help you
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
//Get URL of Gallery Images - default wordpress image sizes
echo $Original_image_url = wp_get_attachment_url( $attachment_id );
echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
//Get URL of Gallery Images - WooCommerce specific image sizes
echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
//echo Image instead of URL
echo wp_get_attachment_image($attachment_id, 'full');
echo wp_get_attachment_image($attachment_id, 'medium');
echo wp_get_attachment_image($attachment_id, 'thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_catalog');
echo wp_get_attachment_image($attachment_id, 'shop_single');
}
Related
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 would like to change the dir path of my image. The current product-image.php woocommerce template is :
<?php
if( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
list( $magnifier_url, $magnifier_width, $magnifier_height ) = wp_get_attachment_image_src( get_post_thumbnail_id(), "shop_magnifier" );
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $magnifier_url, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt=" ' . esc_attr__( 'Placeholder', 'jico' ) . ' " />', $placeholder, $placeholder ), $post->ID );
}
?>
How can i customize the %s in img src="%s" ?
Could someone help me gain some direction with this?
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
echo $image[0]
I want to replace full size image with large image on woocommerce lighbox.
here is my code -
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" class="bigbox" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
I've tried to change $image_link to
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
with no luck.
The $image_link comes as array. to echo the image link, try,
<?php echo $image_link[0]; ?>
So your full code should be like this
WooCommerce has the filter 'woocommerce_single_product_image_html' , you don't repeat the code in your theme for this.
You would add the following in your functions.php or your functions plugin.
Note: this works in 2.6x and will not work with 2.7 since they changed the single image display a lot.
function yourprefix_woocommerce_single_product_image_html( $html, $post_id ) {
if ( ! class_exists( 'WooCommerce' ) ) return;
//bail if WooCommerce is not installed and active since we are using the WC_VERSION constant
if ( version_compare( WC_VERSION, '2.7', '<' ) ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); //this is where and use the [0] on this variable in the sprintf
$image = get_the_post_thumbnail( $post_id, 'shop_single', array( 'title' => $image_title ) );
$html = sprintf('%s', $image_link[0], $image_title, $image );
} //end version compare still return the html so we don't get an error
return $html;
}
add_filter( 'woocommerce_single_product_image_html', 'yourprefix_woocommerce_single_product_image_html', 10, 2 );
Note: wp_get_attachment_image_src() is not what is used in the default code, it's wp_get_attachment_image_url() which gets the image uploaded, not a sized image. If you want the generated image use $variable = wp_get_attachment_image_src( ... ); and then $variable[0] for the url, $variable[1] width, $variable[2] height. There are plenty of tuts on this, so I won't repeat
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">';
?>