Dimension/size of Shop banner?

Hi!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

Regards,
Yigit

Hey!

Add this in the functions.php file to disable the parallax effect:

add_action('init', 'ava_product_parallax_init', 50);
function ava_product_parallax_init() {
    remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
    add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_mod', 11 );
}

function avia_woocommerce_big_cat_banner_mod()
{
	if(is_product_category())
	{
		global $wp_query, $avia_config;

		if(isset($wp_query->query_vars['taxonomy']))
		{
			$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
			if(!empty($term->term_id))
			{
				$description 	= term_description() ;
				$style 			= get_woocommerce_term_meta($term->term_id, 'av_cat_styling');
				$attachment_id 	= get_woocommerce_term_meta($term->term_id, 'thumbnail_id');

				$overlay 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay');
				$font 		= get_woocommerce_term_meta($term->term_id, 'av-banner-font');
				$opacity 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay-opacity');

				if(!empty($style))
				{
					remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
					echo avia_woocommerce_parallax_banner_mod($attachment_id, $overlay, $opacity, $description, $font);
					$avia_config['woo-banner'] = true;
				}
			}
		}
	}
}

function avia_woocommerce_parallax_banner_mod($bg, $overlay, $opacity, $description, $font)
{

	if(is_numeric($bg))
	{
		$bg = wp_get_attachment_image_src($bg, 'extra_large');
		if(is_array($bg) && $bg[0] != "") $bg = $bg[0];
	}

	if($font) $font = "style='color:{$font};'";
	if($bg) $bg = "background-image: url(".$bg.");";

	$output = "";

	$output .='<div id="av_product_description" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" '.$font.'>';

	$output .='<div class="av-section-color-overlay-wrap">';
	if(!empty($overlay))
	{
		$output .='<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: '.$overlay.'; "></div>';
	}

	$output .='<div class="container">';
	$output .='<main class="template-page content av-content-full alpha units">';
	if($description) $output .= "<h1>".$description."</h1>";
	$output .='</main></div></div></div>';

	return $output;
}

Best regards,
Ismael

Hey!

The background image is there but there’s an unwanted class attribute in the banner container:

<div id="av_product_description" style="background-image: url(https://vican.wpengine.com/wp-content/uploads/2016/03/Vican_kategori_bord-1500x266.jpg);main_color (hosted on WPengine) background-attachment: scroll;background-position: center center;background-repeat: no-repeat;" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section  (Purchase code hidden if logged out)  avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch"><div class=" (Purchase code hidden if logged out) "><div class="container"><main class="template-page content av-content-full alpha units"><h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</h1></main></div></div></div>

This is the class attribute:

(Purchase code hidden if logged out)

Add this in the Quick CSS field:

#av_product_description {
    visibility: visible !important;
}

Regards,
Ismael

Hi!

Note that the background size property is set to “cover” which means that it will cover the whole container but it may cut off parts of the images to keep its aspect ratio. We can set the background size to 100% or contain but it will distort the image or leave white space in the parent container. Which one do you prefer?

NOTE: We removed the parallax effect which is one of your requests.

Regards,
Ismael

Hi!

@bodymindlinks We have replied to your thread here – https://kriesi.at/support/topic/remove-selection-element-on-service-page/#post-854347. Let us continue there :)

Cheers!
Yigit