Enable Display of Category Image on Shop

Hi,

I have part of the solution which is to add the following to the functions.php. However, it needs to be resized with the following CSS. The only problem with this is it pushes the thumbnail to the extreme left into the sidebar. I have now removed the code and asking for support here.
Thanks
Vincent

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 '<div class="product-category-image"><img src="' . $image . '" alt="" /></div>';
        }
    }
}

CSS for thumbnail to left:

.product-category-image {
  max-width: 200px;
  float: left;
  margin-right: 1em;
}

Hi Ismael that did not work either and made no difference. See category below:

yhanks Vincent

Hi Andy,

I was already of that solution, however, it’s not optimum. Now we are adding as second layer of images, why not just draw through the actual category thumbnail? It should work on Woocommerce as it does on Abundance theme.

The code I sued in my response to Ismael works to place it on the page but breaks on positioning.

Thanks
Vincent

Hi,
I am not going to add that code back to the site as it keeps breaking it and slowing down this project.
All I want is the thumbnail that is added in the category to display on the page. This is not unusual and is normal practice.

It works on abundance here: http://www.manscape.co.uk/a/skincare/

This works on the Woo commerce platform in which I provided code above, however, for some reason it breaking Enfold. Is there any other person on this forum from Enfold that knows how to enable this?

Thanks

Vincent

Hi Ismael,

I hope you don’t mind me asking, but why do you keep insisting that I use the code you supplied, it is already in there and it’s not working. I set the categories to default. For example: http://mens.boutique/z/fragrance/ and then I used this code:

/* ————————————————————
## >= Enable Archive Image Shop
—————————————————————-*/
.tax-product_cat .page-thumb {
float: left;
width: 30%;
}

.tax-product_cat .term-description {
float: left;
width: 68%;
clear: none;
margin-left: 2%;
}

It still does not work. The image does not pull through.

Thanks
Vincent

• This reply was modified 8 years, 5 months ago by Vincent.

Hi Ismael
Please see notes in private area:

Hi Ismael,

I see what you mean. The code .page-thumb {
display: none;
}
was there to prevent featured images showing on posts and pages from the featured image field.

I have now added your code to the custom CSS http://mens.boutique/z/fragrance/ which displays the thumbnail. There is a stark difference between:

http://mens.boutique/z/fragrance/
and
http://mens.boutique/z/skincare/scrub/

Whereas on some pages it is resizing correctly on other pages it chops off. Is there a specific size for this or is there a error in its resizing? I am using this whole piece here including your code:

/* ------------------------------------------------------------
## >= Enable Archive Image Shop
----------------------------------------------------------------*/
.tax-product_cat .page-thumb {
    display: block;
}

.tax-product_cat .page-thumb {
    float: left;
    width: 30%;
}

.tax-product_cat .term-description {
    float: left;
    width: 68%;
    clear: none;
    margin-left: 2%;
}

Thanks for your help, it looks much better now, I appreciate it.

Vincent

Cheers Ismael, please consider this resolved.

Thanks
Vincent