Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 5, 2016 at 3:43 am #559715
    AD

    Hey,

    Thanks in advance for any help on this.

    I found a thread on this with code for functions.php already but would like to change the following…
    1) The image being 100% width (responsive) and centered.
    2) No parallax effect.

    Thanks!
    ____________________________

    
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(' + 'https://paultmurphy.files.wordpress.com/2010/08/cropped-boston-skyline-banner-1000.jpg' + ')');
	$('#av_product_description').css('height', '180px');
})(jQuery);
</script>
<?php
}
    January 5, 2016 at 10:43 am #559809
    Rikard

    Hey w3newbie,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    January 5, 2016 at 5:12 pm #560025
    AD

    Hey Rikard,

    I appreciate the response and support, you guys are awesome :) I have already figured it out though so this can be marked solved.

    In case anyone needs to know how to create a header banner image (that links) on WooCommerce/Enfold product pages try this in functions.php (using a plugin called “Custom Functions”):

    add_action('ava_after_main_container', 'add_banner_before_breadcrumb'); 
function add_banner_before_breadcrumb() {
	if ( is_product() )
	{
		echo '<h1 style="text-align: center;"><a href="http://www.yourwebsite.com" target="_blank">
<img border="0" alt="Banner Name" src="http://www.yourwebsite.com/wp-content/uploads/shop-banner-image.jpg" style="float: left; z-index: 99999; width: 100%;"></h1>';
	}
}
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Custom Banner Image on Enfold WooCommerce Product Pages’ is closed to new replies.