Skip to content
Advertisement

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.

Advertisement

Answer

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

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement