Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #650513

    Hi,

    I would like to enable the category image thumbnail so it displays on the individual category to the left of the text field. I did this one on Abundance theme.

    I tried with this code and it broke the page but had an undesirable effect on the page:

    /* --------------------------------------------------------------
    ## >= Display Category Images
    ----------------------------------------------------------------- */
    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>';
            }
        }
    }
    #651195

    Hey Vincent,

    Thank you for using Enfold.

    Please remove the modification then go to the Enfold > Shop Options. Enable the “Main Shop Page Banner” and then tick “Enable Banner for product category pages” option. You can now add featured image in the product categories.

    Best regards,
    Ismael

    #651419

    Hi Ismael,

    Thanks for your reply. Unfortunately, that is not what I meant.
    I don’t want the banner image on each category. I want to use the thumbnail image so that it places directly to the left of the content on the category pages.
    Here are two examples of websites that use this:
    Bathrooms site: http://bathrooms.plus/z/showers/ (Notice the category thumbnail displays on the page).
    Manscape site: (Abundance theme): http://www.manscape.co.uk/a/skincare/eye-care/ (The same, category thumbnail appears on page).

    Thanks
    Vincent

    #652372

    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;
    }
    #652443

    Hi,

    You don’t need to add the modification. Edit the product category, add the description and the featured image. Make sure that the Display type is set to “Default” then use this in the Quick CSS field:

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

    Best regards,
    Ismael

    #652627

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

    yhanks Vincent

    #653836

    Hi,

    I added the image inside your description field.
    Let us know if you are happy now.

    Best regards,
    Andy

    #653866

    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

    #654203

    Hi,

    it does work? if yes where is it? I can’t see it and I can only see the image from the description field.

    Best regards,
    Andy

    #654257

    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

    #655947

    Hi,

    Did you try our previous solution? https://kriesi.at/support/topic/enable-display-of-category-image-on-shop/#post-652443

    Best regards,
    Ismael

    #656256

    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 4 years, 2 months ago by  Vincent.
    #657837

    Hey!

    The category image is positioned to the left and the description beside it. Isn’t that what you want? Maybe a screenshot will help. We tried to access the site but we are can’t get in.

    Your access to this site has been limited
    Your access to this service has been temporarily limited. Please try again in a few minutes. (HTTP response code 503)
    Reason: Blocked by login security setting.

    Best regards,
    Ismael

    #657883

    Hi Ismael
    Please see notes in private area:

    #658901

    Hi,

    Thank you for the info. It is hidden because of this custom css code:

    .page-thumb {
        display: none;
    }

    You can remove that or just add the following code below:

    .tax-product_cat .page-thumb {
        display: block;
    }

    Check this archive page afterwards: http://mens.boutique/z/fragrance/

    Best regards,
    Ismael

    #658929

    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

    #660186

    Hi,

    The thumbnail size is set to the “entry_with_sidebar” which has a maximum dimension of 845x321px. Upload images within that size range or better yet, make sure to upload images with the same size and dimension.

    You can also adjust the thumbnail size with the following plugin then regenerate the thumbnails: https://wordpress.org/plugins/simple-image-sizes/

    Best regards,
    Ismaelo

    #660509

    Cheers Ismael, please consider this resolved.

    Thanks
    Vincent

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Enable Display of Category Image on Shop’ is closed to new replies.