Custimazation of Product Category Header

[Floow]

Hey Harry would it be possible to edit the template of the shop category pages a little bit?

Right now it is that there is always this Header picture and I was wondering if we could change it to only the title.

Attached are screenshots of one side how I imagine it.

It should be aligned on the left side and about similar font-size.

Do you think that would be possible?

This is the page I took  as inspiration: https://www.zalando.de/damen/

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Florian,

Please change code in claue-child > funtions.php and remove class “page-head”

in code http://prntscr.com/nspng5

and add below code to claue-child > style.css

.jas-container.pr h1.cw {color: #222;}

Kind regards

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

[Floow]

That was fast. I will check it out.

[Floow]

Hi Harry,

second inquiry for today 🙂

Do you think it would be possible to make the categories which are right now on my side below the header in just on row, which is something like a slider. If you access this website here on mobile you know what I mean.

https://www.zalando.de/damen/ – screenshot is attached as well.

And the other screenshot is from my website, how it should look after this.

Maybe this is quickly possible for you. That would be awesome. Thanks!

Attachments:

You must be logged in to view attached files.

[Floow]

And one question to what you said in your reply:

I do not have this code in my Child functions.php and it is not in my functions.php of normal site as well. Where is this code?

[Harry]

Hi Florian,

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

function jas_claue_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' );

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

			$output .= '<h1>' . single_cat_title( '', false ) . '</h1>';
			//$output .= do_shortcode( category_description() );
		}
		ob_start();
		$output .= ob_get_clean();
	$output .= '</div></div>';

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

2. Please add below code to claue-child > style.css

@media only screen and (max-width: 736px) {
.term-19 .shop-top-sidebar .woocommerce {
	min-width: 2850px;
}
.term-18 .shop-top-sidebar .woocommerce {
	min-width: 1850px;
}}

Kind regards

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

[Floow]

The first code broke the side.

For the second thing, the CSS code works nice for mobile. Thanks for that. Do you could make it work for desktop as well? 🙂

[Harry]

1. Sorry i wrong, please change code to

/* 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' );

	$output = '<div class="page-head pr tc"><div class="jas-container pr">';
		if ( is_search() ) {
			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} elseif ( is_shop() ) {
			$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>';
		} 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>';
			//$output .= do_shortcode( category_description() );	
		}
		ob_start();
		$output .= ob_get_clean();
	$output .= '</div></div>';

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

2. Please change code to

.shop-top-sidebar {
	overflow-x: scroll;
	overflow-y: hidden;
}
.term-19 .shop-top-sidebar .woocommerce {
	margin: 0;
	width: auto;
	min-width: 2980px;
}
.term-18 .shop-top-sidebar .woocommerce {
	min-width: 1950px;
}
@media only screen and (max-width: 736px) {
.term-19 .shop-top-sidebar .woocommerce {
	min-width: 2850px;
}
.term-18 .shop-top-sidebar .woocommerce {
	min-width: 1850px;
}}

Kind regards

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

[Floow]

Thank you Harry.

The code crashed the site again. Maybe you have one more idea 🙂

[Harry]

Hi,

It have another way is go to Theme Option > WooCommerce > General Settings > Remove Page Title Background and go to Product Categories > Edit separate category and remove thumbnail.

Kind regards

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

[Floow]

I applied it now on the staging site, but with this method it still displays a grey bar. And if I go to theme settings and disable page title in total then I wouldn’t have H1 Tag on the picture.

It would be awesome if it would look like I said in the first message of this topic.

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add below code to claue > theme option > general layout > custom CSS

.page-head {
	padding: 10px 0;
	color: #222;
	background: none;
	text-align: left;
}
.page-head::before {
	background: none !important;
}
.page-head h1 {color: #222;}

Kind regards

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

[Floow]

.jas-wc .page-head, .jas-wc-single .page-head {
padding: 10px 0;
color: #222;
background: none;
text-align: left;
}
.jas-wc .page-head::before {
background: none !important;
}
.jas-wc .page-head h1 {color: #222;}

.jas-wc .page-head {
background-image:none;
}

 

This is the code I applied now in total. Your code changed all headers and not only Woocommerce category 🙂

 

As you see I also made “background-image:none;”   in there. Does the background image still get loaded now in the background even though it doesn’t get displayed?

[Harry]

Hi Florian,

Yes, your code apply for WooCommerce category and single product page.The background still load. It only hide by code. So i recommend remove background in category > thumbnail.

Kind regards

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

[Author]

Posts