Need WooCommerce Product Short Code That Uses Thumbnail

sharingsunshine
sharingsunshine used Ask the Experts™
on
this is a  follow-on to this question
https://www.experts-exchange.com/questions/29145248/Need-Custom-Short-Code-For-WooCommerce.html

Open in new window


The image is too large to be useful.  So, is there any way to programmatically create a short-code that does everything in the previous question but uses a thumbnail instead?

I found this
https://wordpress.stackexchange.com/questions/235313/add-the-post-thumbnail-url-to-a-shortcode-in-function-php

Open in new window

but I am not clear how to design what I need.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hi @sharingsunshine,

Can you clarify what you mean by the image is to large to be useful. When you use the [product id="xx"] shortcode it will use the product thumbnail. The size of that thumbnail is defined either by your theme or within the site Customizer.

Author

Commented:
Then I must have something not set correctly.  Look at https://www.theherbsplace.com/which_calcium_is_best_for_you__sp_92/ and scroll down to coral calcium and that is the same size as my product image for that product.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Nope. Everything's working as it should - the size of the image on that page is the size of the thumbnails throughout the rest of your site. If I go to Shop A-Z and choose a letter (A for example), then all the images on that page are the thumbnail sizes, and they match what you have on your Calcium page.
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Author

Commented:
then what are my options because as you can see if I put all the shortcodes there they will engulf the page with that large of images.

Author

Commented:
can I change the thumbnail size to what I want and then use a different image for the product page?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
OK. When you upload an image in WordPress, several different sizes are automatically generated.

By default, WordPress will generate upto 4 sizes (large / medium / medium_large / thumbnail). These sizes (except medium_large) can be set in the Settings -> Media screen.

As well as those WordPress images, WooCommerce will also generate upto 3 images ( woocommerce_thumbnail / woocommerce_single / woocommerce_gallery_thumbnail ). These sizes (except woocommerce_gallery_thumbnail ) are usually set in the Customizer.

There is also one other size and that's the original file you uploaded - unscaled ( full ).

It may be that your theme changes these or even adds more custom sizes.

When you call the [product] shortcode like above, it will use the woocommerce_thumbnail. In your case that's seems to be set to 247x296. I don't think there's a way to change that by using the [product] shortcode, but you can easily write your own shortcode to retrieve any of the available image sizes for a given product.

Here's a simple code snippet you can add to your functions.php file:

add_shortcode( 'cs_product_image', 'cs_product_image_callback');
function cs_product_image_callback($atts = []) {
    $atts = shortcode_atts( array(
        'id' => null,
    ), $atts, 'cs_product_image' );

    $product = new WC_product( $atts['id'] );
    $product_img = wp_get_attachment_image( $product->get_image_id(), 'woocommerce_gallery_thumbnail' );
    return $product_img;
}

Open in new window

You can then use the shortcode like so, passing in a valid product ID:

[cs_product_image id=1234]

In the wp_get_attachment_image() call, you can change the 'woocommerce_gallery_thumbnail' to any of the available sizes.

These are the standard sizes available (the dimensions will probably differ based on your own theme):

large (1024)
medium (600)
thumbnail (150)
medium_large (768)
full (uploaded size)

 woocommerce_thumbnail (300)
 woocommerce_single (600)
 woocommerce_gallery_thumbnail (100)

Author

Commented:
This is the perfect size.  Thanks

Author

Commented:
I need it to have an add to cart button and price too.  So I will post another question.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial