Add image category in front

Hi @alexj783,

I am sorry for the delay in response.

The product category image on header area will be added in future update of the theme.

Currently, you may want to display it with this code snippet.

add_action( 'botiga_header', function(){
  
    if( is_product_category() ) {
      global $wp_query;
      $cat = $wp_query->get_queried_object();
      $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
      $image = wp_get_attachment_url( $thumbnail_id );
      if ( $image ) {
        echo '<div class="header-image"><img src="' . esc_attr($image) . '" alt="' . esc_attr($cat->name) . '" /></div>';
      }    
        
    }
  
},999  );

Add it to your child theme’s functions. Or, you can add it directly from your site’s dashboard without child theme with the help of Code Snippets plugin.

Hope that helps.

Regards,
Kharis

Hi @alexj783,

Seems likely direct inspection is required, so I can get your context correctly. Please provide the link to your product category where the image is enabled.

Regards,
Kharis

Hi @alexj783,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.header-image {
  overflow: hidden;
  max-height: 300px;
}

.header-image img {
  display: block;
  height: 300px;
  object-fit: cover;
}

Hope that helps.

Regards,
Kharis

But for the category name?

Try adding this snippet to your child theme’s functions or Code Snippets plugin.

add_action( 'wp_footer', function () { ?>
<script>

  ;(function($) {
    
    if( $('.tax-product_cat .woocommerce-page-header').length ) {
      
      $('.tax-product_cat .woocommerce-page-header').remove().clone().insertAfter('.header-image img');
      
    }  

  })(jQuery);	
	
</script>
<?php }, 999999 );

Then add this CSS code to Additional CSS.

.tax-product_cat .header-image {
  height: 300px;
  position: relative;
}

.tax-product_cat .header-image img {
  position: absolute; 
}

.tax-product_cat .header-image .woocommerce-page-header {
  margin-bottom: 0;
  position: absolute;
  width: 100%;
  background-color: transparent;
}

Hope that helps.

Regards,
Kharis

Hi @alexj783,

Thank you for getting back.

Try adding this CSS code:

.tax-product_cat .header-image-new img {
  width: 100%;
  height: 100%;
}

.tax-product_cat .header-image-new .woocommerce-page-header {
  padding-top: 0;
  padding-bottom: 0;
  top: 50%;
  transform: translateY(-50%);
}

Hope that helps.

Regards,
Kharis

You’re welcome @alexj783!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis