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

Thanks for your reply
just made few css adjustnemt on child css and managet to display the thumbnails at the side of the big pic.
this is even better than the top.
also fixed the croping of thumbnales like it was sujestet in other topic.
all good.

The pink line is gone! :D

The problems still happening are:

1. I added the code to add thumbnails in search and it leaves the space for it, but no image.
2. Is there any way to add space after the categories before the title of the next post in the archives?

Thank you, Josue! Literally every time you have helped, it has worked brilliantly! Thank you so much!

Hi Ismael,

Yes, the site is 100% Enfold. I have now regenerated thumbnails (plugin: Regenerate Thumbnails) and it is still the same issue. Something else is surely wrong and speaking with Woocommerce people they advise to go to theme builders. I know categories can work for the same size as we see them in the demo here: http://kriesi.at/themes/enfold/shop/

Also, it seems off that I am having similar issues with the related thumbnails being too big and displaying incorrectly with a huge coloured background as in the same ticket here: #651631

Thanks
Vincent

That works great but when I add a custom field the thumbnail disappears in the feed.
Is there a way I can include the custom field and the thumbnail image in the RSS feed?

I tried like this but it only shows one or the other not both:

//add custom field – feed – to feed for portfolio
function avia_add_images_to_rss_feed($content)
{
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = ‘<p>’ . get_the_post_thumbnail( $post->ID, ‘medium’ ) . ‘</p>’ . get_the_excerpt();}

$contentmod = get_post_meta( $post->ID, ‘feed’, true );
if ( $contentmod ) { $content = $contentmod; }
return $content;
}

add_filter(‘the_excerpt_rss’, ‘avia_add_images_to_rss_feed’);
add_filter(‘the_content_feed’, ‘avia_add_images_to_rss_feed’);

Hi,

Thanks. But I tried two ways without success. The post does not accept the code correctly (because it is released in the wrong position)

(EXAMPLE CODE) Using (debug field for the Avia Layout Builder )

[av_section min_height='custom' min_height_px='100px' padding='no-padding' shadow='no-border-styling' bottom_border='no-border-styling' id='bback' color='main_color' custom_bg='#32a5d2' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='']
[av_codeblock wrapper_element='' wrapper_element_attributes='' custom_class='']
[av_sidebar widget_area='HAMBURGUER']
<div class="centrotitulo">[page_title]</div>
[/av_codeblock]
[/av_section]

[av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' custom_class='']

(EXAMPLE CODE) Using (view-source )

<div id='bback' class='avia-section main_color avia-section-no-padding avia-no-border-styling avia-bg-style-scroll  avia-builder-el-0  el_before_av_hr  avia-builder-el-first   av-minimum-height av-minimum-height-custom container_wrap fullsize' style = 'background-color: #32a5d2; background-color: #32a5d2; '  ><div class='container' style='height:100px'><main  role="main" itemprop="mainContentOfPage"  class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-18226'><div class='entry-content-wrapper clearfix'>
<section class="avia_codeblock_section avia_code_block_0"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_codeblock '  itemprop="text" > <div class='avia-builder-widget-area clearfix '><div id="text-64" class="widget clearfix widget_text">			<div class="textwidget"><div id="Divvoltar">
<span class="av_font_icon avia_animate_when_visible av-icon-style-  avia-icon-pos-left  avia_start_animation avia_start_delayed_animation" style="color:#ffffff; border-color:#ffffff;"><a href="javascript:history.go(-1)" class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="fontello"></a></span>
</div>

<div style="float: right; margin-top: 7px;" class="hamburguer-class">
<a href="#mymenu" id="hamburger">
   <span class="top-bar"></span>
   <span class="middle-bar"></span>
   <span class="bottom-bar"></span>
</a>
</div></div>
		</div></div>
<div class="centrotitulo">teste teste</div> </div></section>
</div></div></main><!-- close content main element --></div></div>

To function must be called immediately in all posts immediately after this code line:

<div id='main' data-scroll-offset='0'>
(EXAMPLE CODE)

BUT THE POSTS call this code sequence before:

<div id='main' data-scroll-offset='0'>

<div class='container_wrap container_wrap_first main_color sidebar_right'>

			<div class='container template-blog template-single-blog '>

				<main class='content units av-content-small alpha  av-blog-meta-date-disabled av-blog-meta-html-info-disabled'  role="main" itemscope="itemscope" itemtype="https://schema.org/Blog" >

                    <article class='post-entry post-entry-type-standard post-entry-18235 post-loop-1 post-parity-odd post-entry-last single-small with-slider post-18235 post type-post status-draft format-standard has-post-thumbnail hentry category-sem-categoria'  itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" ><div class='blog-meta'><a href='https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg' class='small-preview' title='TEST POST'><img width="180" height="180" src="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg" class="attachment-square size-square wp-post-image" alt="cytotec original" srcset="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg 180w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-80x80.jpg 80w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-36x36.jpg 36w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-120x120.jpg 120w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg 200w" sizes="(max-width: 180px) 100vw, 180px" /><span class="iconfont" aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></a></div><div class='entry-content-wrapper clearfix standard-content'><header class="entry-content-header"><span class="blog-categories minor-meta"><a href="https://abortonanuvem.com/pt-br/category/sem-categoria/" rel="tag">Sem categoria</a> </span><h1 class='post-title entry-title'  itemprop="headline" >	<a href='https://abortonanuvem.com/pt-br/?p=18235' rel='bookmark' title='Link permanente: TEST POST'>TEST POST			<span class='post-format-icon minor-meta'></span>	</a></h1><span class="av-vertical-delimiter"></span><div class="entry-content"  itemprop="text" >

(EXAMPLE CODE)

Any suggestion?

• This reply was modified 9 years, 10 months ago by CloudChoice.

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,

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