Modify Category Header

[Floow]

Hi Harry,

another thing.

I want basically that on the shop category-, tag-, as well on the attribute-archives that the grey bar should go away. Can we modify something in the archive-product.php (and some small CSS) to only have the title displayed in black?

When you access the shop page on mobile – you see how I actually want it. Now I have this background just not shown (hidden via CSS) but actually I just want to get rid of the code so that the background picture on the categories is not loading in the back anymore.

This standard grey bar (when no background picture is set) can easily be overwritten with CSS or would it be better to change the code there as well?

Thanks.

Attachments:

You must be logged in to view attached files.

[Floow]

You know the main thing is, I actually want to keep the category background picture in case I will insert categories via shortcode somewhere in the future, but the category pictures should not load on the product-category page. So basically the code have to be changed to “not load product-category picture in header”.

[Harry]

Hi Florian,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.archive.post-type-archive .page-head::before,
.archive tax-product_cat .page-head::before {
	background: none;
	padding: 10px 0;
}
.archive.post-type-archive .page-head h1,
.archive tax-product_cat .page-head h1 {
	color: #222;
}

Btw, your support expired. Could you please renew your support at https://themeforest.net/item/claue-clean-minimal-woocommerce-theme/18929281 that will help us continue develop new features and improve our theme.

Thank and regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

Thank you for the answer. This is totally CSS solution. Can you please double read my question one time. Thank you.

And I purchased new support a couple months ago and still have 2 months left. Please see screenshot

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Florian.

You mean you want remove background image on shop page but still keep in category page or complete remove all?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

I doesn’t want the background image to be loaded in the header of the shop, product-category, product-tag, product-attribute pages BUT want to keep the possibility to insert product categories via shortcode (because when I insert them via shortcode it will display a background picture and if there is none because previoulsy I deleted all then I can not do this). Hope this was not to complicated explained, if so please just look at the first part. “I doesn’t want the background image to be loaded in the header of the shop, product-category, product-tag, product-attribute pages”. Thanks!

[Harry]

Hi Florian,

Please add below code to claue-child > functions.php

/* move category description below products */
add_action( 'wp_head', 'remove_my_action' ); 
function remove_my_action(){
    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
}

function jas_claue_child_wc_page_head() {
	if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
	$title = cs_get_option( 'wc-page-title' );		
	if ( is_search() ) {
		$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
	} elseif ( is_product_category() ) {
		// Remove old position of category description
		remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
		$output = '<div class="page-head pr tc"><div class="jas-container pr">';
		$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
		$output .= do_shortcode( category_description() );
		$output .= '</div></div>';			
	} else {
		$output .= '';
	}
	ob_start();
	$output .= ob_get_clean();
	

	echo wp_kses_post( $output );
}
add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

 

I have the code already in my functions.php (https://www.fashionchingu.com/adeelmustafa/wp-admin/options-general.php?page=my-custom-functions)  and it does what it should “Change Category Text Position”, but this is not the thing I want in this thread. I am not sure what is unclear, please tell me.

Best,

Florian

[Harry]

Hi,

You code different with my code. Please change your code on line 65 – 95 to

//Change position of category text

function remove_shop_heading() {
    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
}
add_action('wp_head', 'remove_shop_heading');

function jas_claue_child_wc_page_head() {
	if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
	$title = cs_get_option( 'wc-page-title' );		
	if ( is_search() ) {
		$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
	} elseif ( is_product_category() ) {
		// Remove old position of category description
		remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
		$output = '<div class="page-head pr tc"><div class="jas-container pr">';
		$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
		$output .= do_shortcode( category_description() );
		$output .= '</div></div>';			
	} else {
		$output .= '';
	}
	ob_start();
	$output .= ob_get_clean();
	

	echo wp_kses_post( $output );
}
add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

applied the code – thank you for this.

It’s not so perfect yet.

1. The background picture is just gone on shop, and not on product-category,product-tag & product attribute. Despite that, on the shop picture there is also no title but the title (H1) is pretty essential.
2. On product-categories the background picture is still loaded.
3. When I have text now on the product category it looks like this https://www.fashionchingu.com/adeelmustafa/kpop-fashion/bts-clothes/

I hope you have one more idea. Thank you so much.

[Floow]

Normally category text is below the products. We did this previously together in this thread: http://support.janstudio.net/forums/topic/product-category-text-should-be-displayed-above-products/

[Harry]

Hi,

I think you want keep on product category. Please change code to

//Change position of category text

function remove_shop_heading() {
    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
}
add_action('wp_head', 'remove_shop_heading');

function jas_claue_child_wc_page_head() {
	if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
	$title = cs_get_option( 'wc-page-title' );		
	if ( is_search() ) {
		$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
	} else {
		// Remove old position of category description
		remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
		$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
		add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );		
	}
	ob_start();
	$output .= ob_get_clean();
	echo wp_kses_post( $output );
}
add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Great, that did it. Now only the Heading is completly white. Does it have a reason why you put class=”Cw” into the H1?

Thank you so much!

[Harry]

You can remove this class because we use class for our theme style with dark background.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Okay great I replaced it, everything fine.

Sorry for bothering one more time, but is it possible to trigger this function only on mobile devices?

Thank you & greetings,
Florian

[Harry]

Hi Florian,

Please change code to

if ( wp_is_mobile() ) {
	//Change position of category text

	function remove_shop_heading() {
	    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
	    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
	}
	add_action('wp_head', 'remove_shop_heading');

	function jas_claue_child_wc_page_head() {
		if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
		$title = cs_get_option( 'wc-page-title' );		
		if ( is_search() ) {
			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} else {
			// Remove old position of category description
			remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
			$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
			add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );		
		}
		ob_start();
		$output .= ob_get_clean();
		echo wp_kses_post( $output );
	}
	add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

Thank you!

Now the Category Text is on mobile above the products it has to be below the products 🙂

Okay and the last thing is, since on attributes & tags you can not set a background picture, can we apply the code as well on Desktop for Product-Attributes & -Tags?

You’re the man. Thank you!

[Harry]

Hi Florian,

1. I check on my local the text below products https://prnt.sc/pap583

2. You want remove background with tag and attribute on desktop?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

1. This is the code I applied now and on my end somehow category text is not below:

//”ON MOBILE” Change position of category text & Remove Grey Bar & Background Picture Of P-Category, P-Attributes, P-Tags

if ( wp_is_mobile() ) {

function remove_shop_heading() {
remove_action( ‘woocommerce_before_main_content’, ‘jas_claue_wc_page_head’, 15 );
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_rating’, 5 );
}
add_action(‘wp_head’, ‘remove_shop_heading’);

function jas_claue_child_wc_page_head() {
if ( ! cs_get_option( ‘wc-enable-page-title’ ) || ( class_exists( ‘WCV_Vendors’ ) && WCV_Vendors::is_vendor_page() ) ) return;
$title = cs_get_option( ‘wc-page-title’ );
if ( is_search() ) {
$output .= ‘
<h1 class=”mb__5 cw”>’ . sprintf(__( ‘Search Results for: %s’, ‘claue’ ), ” . get_search_query() . ” ) . ‘</h1>
‘;
} else {
// Remove old position of category description
remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );
$output .= ‘
<h1 class=”cw”>’ . single_cat_title( ”, false ) . ‘</h1>
‘;
add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 10 );
}
ob_start();
$output .= ob_get_clean();
echo wp_kses_post( $output );
}
add_action( ‘woocommerce_before_main_content’, ‘jas_claue_child_wc_page_head’, 15 );
}

2. Yes totally true 🙂

[Harry]

Hi,

Please change code to

if ( wp_is_mobile() ) {
	//Change position of category text
	function remove_shop_heading() {
	    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
	}
	add_action('wp_head', 'remove_shop_heading');

	function jas_claue_child_wc_page_head() {
		if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
		$title = cs_get_option( 'wc-page-title' );		
		if ( is_search() ) {
			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} else {
			// Remove old position of category description
			remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
			$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
			add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );		
		}
		ob_start();
		$output .= ob_get_clean();
		echo wp_kses_post( $output );
	}
	add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );
} else {
	//Change position of category text
	function remove_shop_heading() {
	    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
	}
	add_action('wp_head', 'remove_shop_heading');

	function jas_claue_child_wc_page_head() {
		if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;

		$title = cs_get_option( 'wc-page-title' );

		
			if ( is_search() ) {
				$output .= '<h1 class="mb__5 tc fs__24">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
			} elseif ( is_shop() ) {
				$output = '<div class="page-head pr tc"><div class="jas-container pr">';
					$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
					$output .= '<p class="mg__0">' . do_shortcode( cs_get_option( 'wc-page-desc' ) ) . '</p>';
				$output .= '</div></div>';
			} elseif ( is_product_category() ) {
				$output = '<div class="page-head pr tc"><div class="jas-container pr">';
					$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
					remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
					add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
				$output .= '</div></div>';
			} else {
				// Remove old position of category description
				remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
				$output .= '<h1 class="tc fs__24">' . single_cat_title( '', false ) . '</h1>';
				//$output .= do_shortcode( category_description() );
				add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
			}
			ob_start();
			$output .= ob_get_clean();
		

		echo wp_kses_post( $output );
	}
	add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

Thank you very much.

I don’t know why but it creates a fatal error.

Best,
Flo

[Harry]

I used the code on my local it still work well, your function file add more code, please try backup current functions.php and remove other code and only this code and check again.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

I deleted all files from my functions.php in child theme as well as from my plugin My Custom Functions.

If it works on your site could you please send me code from there, maybe an error or something got pasted in your previous message.

Thank you!

[Harry]

Hi,

my code in my functions.php

if ( wp_is_mobile() ) {
	//Change position of category text
	function remove_shop_heading() {
	    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
	}
	add_action('wp_head', 'remove_shop_heading');

	function jas_claue_child_wc_page_head() {
		if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
		$title = cs_get_option( 'wc-page-title' );		
		if ( is_search() ) {
			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} else {
			// Remove old position of category description
			remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
			$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
			add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );		
		}
		ob_start();
		$output .= ob_get_clean();
		echo wp_kses_post( $output );
	}
	add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );
} else {
	//Change position of category text
	function remove_shop_heading() {
	    remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
	}
	add_action('wp_head', 'remove_shop_heading');

	function jas_claue_child_wc_page_head() {
		if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;

		$title = cs_get_option( 'wc-page-title' );

		
			if ( is_search() ) {
				$output .= '<h1 class="mb__5 tc fs__24">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
			} elseif ( is_shop() ) {
				$output = '<div class="page-head pr tc"><div class="jas-container pr">';
					$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
					$output .= '<p class="mg__0">' . do_shortcode( cs_get_option( 'wc-page-desc' ) ) . '</p>';
				$output .= '</div></div>';
			} elseif ( is_product_category() ) {
				$output = '<div class="page-head pr tc"><div class="jas-container pr">';
					$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
					remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
					add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
				$output .= '</div></div>';
			} else {
				// Remove old position of category description
				remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
				$output .= '<h1 class="tc fs__24">' . single_cat_title( '', false ) . '</h1>';
				//$output .= do_shortcode( category_description() );
				add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
			}
			ob_start();
			$output .= ob_get_clean();
		

		echo wp_kses_post( $output );
	}
	add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );
}

I see you added so much code in file functions.php

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Floow]

Hi Harry,

So it still shows fatal error.

The thing is when I apply mobile code only it works.

And also when I apply our first code (not mobile) it works as well.

So is there any way that we can insert the two codes separately? Maybe this will solve it.

Thanks,
FLorian

[Harry]

I see you added code to My Custom Function i remove and add to claue-child > functions.php in ACE ide and it work.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts