Woocommerce Grouped Product Images - php

I'm trying to include a product thumbail alongside the name and price of grouped products. Currently, one parent product includes 20 or so child (grouped) products, and as default the page only displays the quantity chooser, product name, price and add to cart button at the bottom of the list. All of the products are listed in a big table one under the other, and I want to include an individual product image for each seperate product.
Currently, by editing the /single-product/add-to-cart/grouped.php product file, i've managed to get it to display a small image but only of the main parent product by adding the following in a DIV after the product title php:
<div class="images">
<?php if ( has_post_thumbnail( $post_id ) ) { ?>
<a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post_id ) ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id( $post_id ) ); ?>"><?php echo get_the_post_thumbnail( $post_id, apply_filters( 'grouped_product_large_thumbnail_size', 'shop_thumbnail' ), array(
'title' => get_the_title( get_post_thumbnail_id( $post_id ) ),
) ); ?></a>
<?php } ?>
</div>
I know this code is only copied from the bundled product image, but it's the closest i've got. You can see the example of what I mean here:
http://hallmark.digitalstorm.co.uk/product/luxor-custom-built-arrangement/
Any help would be really appreciated, as i know i must be really close.

Here is the code you are looking for:
add_action( 'woocommerce_grouped_product_list_before_price', 'woocommerce_grouped_product_thumbnail' );
function woocommerce_grouped_product_thumbnail( $product ) {
$image_size = array( 20, 20 ); // array( width, height ) image size in pixel
$attachment_id = get_post_meta( $product->id, '_thumbnail_id', true );
?>
<td class="label">
<?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?>
</td>
<?php
}
Hope this will be useful.

Fantastic code by #Ratnakar - Store Apps
For those who try to add the product link to the image
I added a "link" wrap to the image so it will result Image + Link to product
$link = get_the_permalink($product->id);
and
<a href="<?php echo $link; ?>" > <?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?> </a>
Final:
add_action( 'woocommerce_grouped_product_list_before_price', 'woocommerce_grouped_product_thumbnail' );
function woocommerce_grouped_product_thumbnail( $product ) {
$image_size = array( 100, 100 ); // array( width, height ) image size in pixel
$attachment_id = get_post_meta( $product->id, '_thumbnail_id', true );
$link = get_the_permalink($product->id);
?>
<td class="label">
<a href="<?php echo $link; ?>" > <?php echo wp_get_attachment_image( $attachment_id, $image_size ); ?> </a>
</td>
<?php
}

For Woocommerce 2.6 and above (update $product to use data stores):
add_action( 'woocommerce_grouped_product_list_before_price','woocommerce_grouped_product_thumbnail');
function woocommerce_grouped_product_thumbnail( $product ) {
$image_size = array( 100, 100 ); // array( width, height ) image size in pixel
$attachment_id = get_post_meta( $product->get_id(), '_thumbnail_id', true );
$link = get_the_permalink($product->get_id());
?>
<td class="label">
<a href="<?php echo $link; ?>" > <?php echo
wp_get_attachment_image($attachment_id, $image_size ); ?> </a>
</td>
<?php
}

Related

Display a second WooCommerce image from product gallery on the loop

i'm using this code to display woocommerce thumb:
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>
<img src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
But looking solution how to display second image from product gallery. How to modify this code?
Updated: The following will display a second image from product gallery (first image):
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php
// Get gallery images IDs
if( $gallery_image_ids = get_post_meta( $loop->post->ID, '_product_image_gallery', true ) ) :
// Convert a coma separated string of Ids to an array of Ids
$gallery_image_ids = explode(',', $gallery_image_ids);
// Display the first image (optional)
?><img src="<?php echo wp_get_attachment_image_url( reset($gallery_image_ids), 'single-post-thumbnail'); ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php
// Display the 2nd image (if it exists)
if( isset( $gallery_image_ids[1] ) ) :
?><img src="<?php echo wp_get_attachment_image_url( $gallery_image_ids[1], 'single-post-thumbnail'); ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php endif; ?>
<?php endif; ?>
Related : How to show all images in WooCommerce product description

How to change category thumbnail size in WooCommerce

With the following code I managed to display my featured categories title, description and thumbnail. When I uploaded the thumbnail, it was 500 * 500 in its dimensions. But when I visit the page I see the thumbnail being cropped as 150 * 150.
<?php
$args_t = array(
'taxonomy' => 'product_cat',
'include' => array( 16, 15, 17 ),
'orderby' => 'meta_value',
);
$thirds_categories = get_categories( $args_t );
foreach ( $thirds_categories as $cat ) {
if( $cat->category == 0 ) {
$cat_class = mb_strtolower($cat->name);
$image = wp_get_attachment_url( $thumbnail_id );
$cat_thumb_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
$term_link = get_term_link( $cat, 'product_cat' );?>
<div class="categories_box">
<a href="<?php echo $term_link; ?>">
<img src="<?php echo $cat_thumb_url; ?>" alt="<?php echo $cat->name; ?>" />
<h4> <?php echo $cat->name; ?> </h4>
<p><?php echo $cat->description; ?> </p>
<button>View Products</button>
</a>
</div>
<?php }
} wp_reset_query();
?>
How can I change the size of my categorythumbnails?
It is my first time doing a WooCommerce site.
You should use wp_get_attachment_image_src(); for getting different sizes of image. This will return you an array with URL, width, height and cropping mode of this image.
Have a try
$args_t = array(
'taxonomy' => 'product_cat',
'include' => array( 16, 15, 17 ),
'orderby' => 'meta_value',
);
$thirds_categories = get_categories( $args_t );
foreach ( $thirds_categories as $cat ) {
if( $cat->category == 0 ) {
$cat_class = mb_strtolower($cat->name);
$image = wp_get_attachment_url( $thumbnail_id );
$cat_thumb_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
$term_link = get_term_link( $cat, 'product_cat' );
$thmb = wp_get_attachment_image_src($cat_thumb_id, 'medium');
?>
<div class="categories_box">
<a href="<?php echo $term_link; ?>">
<img src="<?php echo $thmb[0]; ?>" alt="<?php echo $cat->name; ?>" />
<h4> <?php echo $cat->name; ?> </h4>
<p><?php echo $cat->description; ?> </p>
<button>View Products</button>
</a>
</div>
<?php }
} wp_reset_query();
Let me know if you need any more assistance. Thanks
just go to your wp-admin wordpress admin section and login, then select menu from sidebar as below
woocommerce -> settings -> products (tab) -> Display Option
check have 'Product images' title where you can set image size. so when u add/upload any new product image woocommerce auto crop image at your specify heitht and width
// You can pass "thumbnail", "medium", "large" and "full"
$cat_thumb_url = wp_get_attachment_image_src( $attachment->ID, 'full' );
echo $cat_thumb_url[0];

How to display the feature image of each post in WordPress?

I have used the following code to try and display the featured image for each post, but nothing is showing:
<div class="thumbnail-img">
<?php
$lastBlog = new WP_Query('type=post&posts_per_page=2&offset=1');
if ($lastBlog->has_post_thumbnail()) {
while($lastBlog->has_post_thumbnail()) {
$lastBlog->the_post_thumbnail();
} ?>
<?php get_template_part('content-image', get_the_post_thumbnail());
}
?>
</div>
<br>
<?php
if( $lastBlog->have_posts()):
while($lastBlog->have_posts()): $lastBlog->the_post(); ?>
<?php get_template_part('content-title', get_post_format()); ?>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
I want the featured image on top of each post title. How do I resolve this?
<?php
$lastBlog = new WP_Query('type=post&posts_per_page=2&offset=1');
if( $lastBlog->have_posts()):
while($lastBlog->have_posts()): $lastBlog->the_post(); ?>
<div class="title"><?php echo get_the_title(); ?></div>
<br />
<div class="thumbnail-img"><?php echo the_post_thumbnail();?></div>
<br />
<?php
endwhile;
endif;
wp_reset_postdata();
?>
try this one should works fine
I cant really be specific about your template structure (template-part content-title??) but using a generic example the following will display the featured image where available;
functions.php
if ( ! function_exists( 'mytheme_setup' ) ) :
function mytheme_setup() {
/*
* Enable support for Post Thumbnails on posts and pages.
*
* See: https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 825, 510, true );
}
endif;
add_action( 'after_setup_theme', 'mytheme_setup' );
your content template page (content.php, template-page, etc..)
// WP_Query arguments
$args = array (
'nopaging' => false,
'posts_per_page' => '2',
'offset' => '1',
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<article>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<?php endif; ?>
<div class="post-title">
<?php echo '<h2>' . get_the_title() . '</h2>'; ?>
</div>
</article>
<?php
}
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
echo "NADA";
}
if you want image url then use this
$thumb_image=wp_get_attachment_url( get_post_thumbnail_id() );
and you want get direct image then here the different different image
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
//With WooCommerce
the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard cropped)
the_post_thumbnail( 'shop_catalog' ); // Shop catalog (300 x 300 hard cropped)
the_post_thumbnail( 'shop_single' ); // Shop single (600 x 600 hard cropped)

Wordpress - How to make thumbnail a link to post?

I have some problem. I use Wordpress theme - Intergalatic. But in homepage, the large background of post do not take us to the post. The background must be clickable and move us to the post. How to do it?
This is code of thumbnail.
<?php if ( has_post_thumbnail() ) {
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'intergalactic-large' ); ?>
<div class="entry-background" style="background-image:url(<?php echo esc_url( $thumbnail[0] ); ?>)"></div>
<?php } ?>
Assuming you're in the loop, and by the looks of it you are, then you'll need to change div to anchor
<?php if ( has_post_thumbnail() ) {
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'intergalactic-large' ); ?>
<?php } ?>
And probably change the anchor to display:inline-background; and possibly add the height of the image to the styling like:
<?php if ( has_post_thumbnail() ) {
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'intergalactic-large' ); ?>
<?php } ?>

Get post thumbnails in Wordpress

This is the code to get the image for post thumbnail, but the image is not found on the page.
Please suggest some ideas.
<?php
add_theme_support( 'post-thumbnails' );
the_post_thumbnail();
set_post_thumbnail_size( 50, 50);
echo get_post(get_post_thumbnail_id())->post_excerpt; ?>
Try this one to get image path and then after pass that path to image scr.
<?php
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id,'large', true); ?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo $image_url[0]; ?>" />
</a>
<?php
}
?>
Try to used
get_the_post_thumbnail( $post_id, 'thumbnail' );
If you want to get thumbnail with custom width and height then used below code
get_the_post_thumbnail( $post_id, array( 100, 100) );
In array first element for width and second for height.
try to pass post id in function
$post_id = get_the_ID();
get_the_post_thumbnail( $post_id, 'thumbnail' );
Try this bro
First Method:
<?php
$imgId = get_post_thumbnail_id($post->ID);
$imgUrl = wp_get_attachment_image_src($imgId,'your image size', true);
?>
<img src="<?php echo $imgUrl[0]; ?>" />
Second Method:
$post_id = get_the_ID();
get_the_post_thumbnail( $post_id, 'your image size' );
Hope you find your solution

Categories