I have a wordpress/woocommerce website designed by Elementor and I need to view some of my products in a carousel.

My thumbnails are generated currectly and my theme is supporting thumb-sizes by default. When I check my website and its showing "full" size image with html width & height attributes resized to my thumb sizes.

<img alt="" data-src="https://mywebsite.tld/wp-content/uploads/2020/04/1-1.jpg" class="attachment-thumb size-thumb wp-post-image wp-post-image lazyloaded" src="https://mywebsite.tld/wp-content/uploads/2020/04/1-1.jpg" width="192" height="192"> 

As far as I know the src should be something like this:

<img src="https://mywebsite.tld/wp-content/uploads/2020/04/1-1-192x192.jpg"> 

I dont know how to achieve this but I have done so many searches and lots of debugging and still nothing.

1. Removed All Plugins
2. Add New Sizes by using Array (192, 192) method and new size names.
3. Changed to another themes supporting Elementor.
4. Regenerating Thumbnails
5. Re-upload some Images

and more …

the interesting part is that when I change the thumb size inside functions.php, the html width and height attributes change to my preferred size! but the image is still loaded from the main source!

Any suggestion will be appreciated.

UPDATE:

I was searching and found a similar situation and their answer was that the aspect ratio of images is not changing so the final output doesn’t do anything. so I have changed my sizes a bit to change the aspect ratio and using 192x190px and still no luck…

this is a function for loading images in my theme’s functions.php:

function p_img() {     if ( has_post_thumbnail()) {              the_post_thumbnail('woocommerce_thumbnail');      } else {      echo '<img src="'.esc_url( get_template_directory_uri() ).'/images/tumb.png" alt="'.the_title_attribute('echo=0').'" class="post-tumb"/>';     } } 

This is the part of my carousel widget that shows up the images using owl carousel:

<div class="item">                 <div class="woocommerce shadow-box <?php echo $di_data['prod_hover']; ?> mini-product<?php echo $stock_class; ?><?php echo $coming_class; ?>">                     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="product-link">                         <?php p_img() ?>                         <?php if($in_stock && $product->is_on_sale()) { ?>                         <?php echo dina_dis_price(get_the_ID()); ?>                         <?php } ?>                         <span class="product-title">                             <?php the_title(); ?>                         </span>                         <span class="product-price">                         <?php if($in_stock) { ?>                             <span class="price-con">                             <?php echo $product->get_price_html(); ?>                             </span>                         <?php } else { ?>                             <span class="price-con">                             <?php _e( 'Out of stock', 'dina-kala' ); ?>                             </span>                         <?php } ?>                         </span>                     </a>                     <?php dina_add_to_cart($product); ?>                 </div>             </div> 

This is the inspect of Customize Section in my theme:

<img alt="" data-src="https://mywebsite.tld/wp-content/uploads/2020/02/YB-Product-905-2-192x190.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image wp-post-image ls-is-cached lazyloaded" src="https://mywebsite.tld/wp-content/uploads/2020/02/YB-Product-905-2-192x190.jpg" width="192" height="190"> 

this is my live website:

<img alt="" data-src="https://mywebsite.tld/wp-content/uploads/2020/04/T-Shit-C-shirt-2.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image wp-post-image lazyloaded" src="https://mywebsite.tld/wp-content/uploads/2020/04/T-Shit-C-shirt-2.jpg" width="192" height="190">