woocommerce category description displayed in title header

Hi,

Thank you for the update.

Hello, in the main.template-shop as a paragraph is possible?

What do you mean by “main.template-shop as a paragraph”? Please explain it further or provide a screenshot.

The shop title is actually there but it is hidden using css. To display it back use this css code.

.template-shop .page-title {
    display: block;
    position: absolute;
    top: 50px;
}

header.woocommerce-products-header + .template-shop {
    margin-top: 50px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for following up.

Did you actually try the css code? That should display back the hidden shop title container as shown in the screenshot below.

// https://imgur.com/nAO9GCl

Best regards,
Ismael

Hi,

It is not full width as the product category

What do you mean? Are you trying to implement a banner style title container in the shop page same as in the category or archive pages? If that is the case, then go to the Enfold > Shop Options panel, then enable the Main Shop Page Banner option.

Thank you for your patience.

Best regards,
Ismael

Hi,

The description should display automatically when the Enfold Child Category Styling is set to Default. Please try to edit one of the product categories and look for the styling just below the Thumbnail option.

Best regards,
Ismael

Hi,

Can we access the site? We would like to check how the product categories are setup and inspect the theme options. Please post the login details in the private field.

Best regards,
Ismael

Hi,

What you see in the screenshot below is the value of the Shop Description field, and it can be edited in the Enfold > Shop Options panel.

Screenshot: https://imgur.com/a/FvuyqMO

If you want to see the title there, just edit the Shop Description and place the actual title of the shop page.

For the archive pages, if you want to include the category title there, try to modify the enfold/config-woocommerce/config.php file, look for the avia_woocommerce_parallax_banner function and around line 1180, look for this code.

if($description) $output .= "".$description."";

Replace it with:

$output .= "<h1>".get_the_archive_title()."</h1>";
if($description) $output .= "<p>".$description."</p>";

Best regards,
Ismael

Hi,

– To remove the “Category:” prefix, use this in the functions.php file.

add_filter("get_the_archive_title_prefix", "__return_empty_string");

– If you want to move the description back to its original place, remove this line from the avia_woocommerce_parallax_banner function.

if($description) $output .= "".$description."

";

Add this code in the functions.php file.

add_action("after_setup_theme", function() {
    add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    add_action( 'woocommerce_product_archive_description', 'woocommerce_product_archive_description', 10 );
}, 20);

After that, use this css code to remove the default page thumbnail.

.tax-product_cat .page-thumb {
    display: none !important;
}

– You cannot override a config file in the child theme directory.

Best regards,
Ismael

Hi,

It is possible to override the avia_woocommerce_shop_banner and avia_woocommerce_big_cat_banner functions by copying them in your child theme’s functions.php file before doing your modifications such as removing the description and adding the title as we described above. You should also rename the functions to something else, you can add a suffix or prefix to the current function name so that it does not conflict with the original functions.

And make sure to remove the action hook where the functions are currently attached to.

Example:

remove_action( 'ava_after_main_container', 'avia_<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>_big_cat_banner', 11 );
remove_action( 'ava_after_main_container', 'avia_<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>_shop_banner', 11 );

Full example can found in these threads.

// https://kriesi.at/support/topic/product-category-pages-full-width-page-banner-and-description/#post-560335
// https://kriesi.at/support/topic/product-category-pages-full-width-page-banner-and-description-updated/#post-877483

This creates a full width element pushing down both the template-shop

You should be able to adjust it with css. Or try to replace the woocommerce_archive_description and woocommerce_product_archive_description hook with woocommerce_before_shop_loop.

Best regards,
Ismael

Hi,

We added this snippet in the functions.php file to replace the description with the actual product archive title.

add_action( 'init', 'avia_woocommerce_full_width_category_images', 50 );
function avia_woocommerce_full_width_category_images()
{
   	remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
	remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
	add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_child_theme', 11);
	//add_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner_child_theme', 11);

	function avia_woocommerce_shop_banner_child_theme()
	{
		global $avia_config;

		if(is_shop() || (is_product_category() && avia_get_option('shop_banner_global') == "shop_banner_global") && !isset($avia_config['woo-banner']))
		{
			$options = avia_get_option();

			if( isset( $options['shop_banner'] )  && ( $options['shop_banner'] == 'av-active-shop-banner' ) )
			{
				$bg 		= $options['shop_banner_image'];
				$overlay 	= $options['shop_banner_overlay_color'];
				$opacity 	= $options['shop_banner_overlay_opacity'];
				$description= wpautop($options['shop_banner_message']);
				$font 		= $options['shop_banner_message_color'];

				echo avia_woocommerce_parallax_banner($bg, $overlay, $opacity, $description, $font);
			}
		}
	}

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

		if(is_numeric($bg))
		{
			$bg = wp_get_attachment_image_src($bg, 'full');
			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" 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-parallax  avia-full-stretch" data-avia-parallax-ratio="0.3">';
		$output .='
<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
		$output .='</div>
';
		$output .='</div>
';

		$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">';
		$output .= "
<h1>".get_the_archive_title()."</h1>
";
		if(false) $output .= "
<h1>".$description."</h1>
";
		$output .='</main></div>
</div>
</div>
';

		return $output;
	}

	function avia_woocommerce_big_cat_banner_child_theme()
	{
		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_child_theme($attachment_id, $overlay, $opacity, $description, $font);
						$avia_config['woo-banner'] = true;
					}
				}
			}
		}
	}
}

Best regards,
Ismael

Hi,

Glad it is working. We will forward the issue to our channel, see if we can do any changes in the next patch. We will close the thread for now. Please feel free to open another if you need anything else.

Have a nice day.

Best regards,
Ismael

Hi,

The hook works fine on our end. Please try this again.

// ADD PRODUCT CATEGORY DESCRIPTION IN RIGHT PLACE
add_action("after_setup_theme", function() {
	add_action( "woocommerce_before_shop_loop", "woocommerce_taxonomy_archive_description", 10 );
	add_action( "woocommerce_before_shop_loop", "woocommerce_before_shop_loop", 10 );
}, 20);

Open a new thread if this continues to be an issue and post the site details again in the private field. We will close this one for now because the thread becoming a bit too long.

Thank you for your patience.

Best regards,
Ismael