Custom headers on product categories pages

Hi!

You can put something like this on functions.php:

function ava_product_category_banner() {
	if(has_term('artifact', 'product_cat')) {
		echo "<div class='product_category_banner container_wrap'>ARTIFACT IMAGE HERE</div>";
	} 
	else if(has_term('treasure', 'product_cat')) {
		echo "<div class='product_category_banner container_wrap'>TREASURE IMAGE HERE</div>";
	}
}

Add the link to the image then change the product category. Below, add this:

add_action('wp_footer', 'ava_product_category', 5);
function ava_product_category(){
?>
<script>
(function($){
    $(window).load(function() {
		$('.product_category_banner').css('opacity', 1);
		$('.product_category_banner').prependTo('.container_wrap.template-shop');
    });
})(jQuery);
</script>
<?php
}

Go to Enfold > General Styling > Quick CSS field, add this:

.product_category_banner {
opacity: 0;;
height: 100px;
border-bottom: 1px solid gray;
background: red;
}

You’ll have a fullwidth container on top of the product category page. All you need to do is to adjust the styling and add the images.

Regards,
Ismael

Hi!

Instead of the term name, please use the term id.

function ava_product_category_banner() {
	if(has_term('26', 'product_cat')) {
		echo "<div class='product_category_banner container_wrap'><img src="http://aquaquestonline.com/wp-content/uploads/2014/04/kayakbetter.jpg"></div>";
	} 
	else if(has_term('46', 'product_cat')) {
		echo "<div class='product_category_banner container_wrap'><img src="http://aquaquestonline.com/wp-content/uploads/2014/04/kayakbetter.jpg"></div>";
	}
}

Adjust the ids above.

Regards,
Ismael

Hey!

Try the following instead please:

function ava_product_category_banner() {
	if(has_term('26', 'product_cat')) {
		echo '<div class="product_category_banner container_wrap"><img src="http://aquaquestonline.com/wp-content/uploads/2014/04/kayakbetter.jpg"></div>';
	} 
	else if(has_term('46', 'product_cat')) {
		echo '<div class="product_category_banner container_wrap"><img src="http://aquaquestonline.com/wp-content/uploads/2014/04/kayakbetter.jpg"></div>';
	}
}

Best regards,
Rikard

Hey!

You can try this:

add_action('ava_after_main_container', 'add_banner_before_breadcrumb'); 
function add_banner_before_breadcrumb() {
	if ( is_product() )
	{
		echo '<div id="av_product_description" class="avia-section main_color avia-section-default avia-no-shadow avia-full-stretch av-parallax-section avia-bg-style-parallax av-minimum-height av-minimum-height-75 container_wrap fullsize" style="color:#ffffff;" data-section-bg-repeat="stretch">
			  <div class="av-parallax avia-full-stretch"></div>
		</div>';
	}
}

add_action('wp_footer', 'ava_custom_script_parallax');
function ava_custom_script_parallax(){
?>
<script>
(function($){
  	$('#av_product_description .av-parallax').css('background-image', 'url(' + 'http://sst.seite-freigeben.de/wp-content/uploads/stripe_Poducts11.jpg' + ')');
	$('#av_product_description').css('height', '500px');
})(jQuery);
</script>
<?php
}

Set the height of the #av_product_description manually.

Regards,
Ismael

Hi @envato1901,

Please open a new thread and post admin login details in private so that we can have a closer look. Also try to explain your problem a bit closer so that we get an understanding of what you are looking to achieve.

Regards,
Rikard