Home Forums Themes Support Claue Custimazation of Product Category Header

Viewing 13 reply threads
  • Author
    Posts
    • #31369

      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.
    • #31372

      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

    • #31373

      That was fast. I will check it out.

    • #31374

      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.
    • #31377

      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?

    • #31378

      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

    • #31382

      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? 🙂

    • #31383

      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

    • #31424

      Thank you Harry.

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

    • #31427

      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

    • #31484

      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.
    • #31488

      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

    • #31511

      .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?

    • #31512

      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

Viewing 13 reply threads

You must be logged in to reply to this topic.