Add Product Category Title & Description to Product Category Pages

Support
#1

I want to add the title and description to my Product Category pages like I did for my blog like in my other support topic: https://theme.co/apex/forum/t/display-category-title-and-description-on-category-page/47834

Can you tell me how I edit this code for my Product pages?

#2

Hi There,

You have to add a condition to your custom code, please update the previous code to this:

function add_category_titles(){  ?>
  <?php if ( is_category() || x_is_portfolio_category() || is_product_category() ) : ?>

  <?php
  
   $meta     = x_get_taxonomy_meta();
 
   $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : __( 'Category Archive', '__x__' );
   $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all posts that have been categorized as ", '__x__' ) . '<strong>&ldquo;' . single_cat_title( '', false ) . '&rdquo;</strong>';

  ?>

    <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo $title ?></span></h1>
    <p class="p-landmark-sub"><span><?php echo $subtitle ?></span></p>
     <p class="p-landmark-desc"><span><?php echo category_description(); ?></span></p>
  </header>
  <?php endif;
}
add_action('x_after_view_global__slider-below', 'add_category_titles');

For more information about the is_product_category() condition, please take a look at this:

Hope it helps :slight_smile:

#3

I don’t want to change my blog post category pages at all. I want to change my product category pages to a title and subtitle just as I did for the blog pages. Thanks for sending that link but where do I put those conditional tags?

#4

Hello Donna,

The code is still the same. They change in the code is the condition which is already added in the code above.

is_category() || x_is_portfolio_category() || is_product_category()

Once you have updated the code, please go to Products > Categories and make sure to edit each of your category. Insert your category archive title and the category description.

Hope this helps.

#5

Thanks for clarifying. However, I want different fonts on my Product pages than are on my blog pages. How do I accomplish that?

#6

Hey Donna,

If you want a different font for the product category pages, then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce .h-landmark {
  font-family: Arial, serif;
  font size: 24px;
} 

.woocommerce .p-landmark-sub {
  font-family: Arial, serif;
  font size: 18px;
} 

.woocommerce .p-landmark-desc {
  font-family: Arial, serif;
  font size: 16px;
}

This css code is just an example. Feel free to change the actual font family and the font size that will fit your design.

#7

Great, thank you so much!

#8

You are most welcome!

#9

Actually that didn’t work. Any other options?

#10

Hello Donna,

Would you mind providing us the url of your product category so that we can give you a more detailed and effective resolution?

Thank you in advance.

#11

Here is one of my product category pages. Thanks! https://www.nydatingcoach.com/service-category/phone-or-skype-coaching/

#12

Hello Donna,

Thanks for updating the thread.

Please update the code shared previously with following:

.woocommerce .h-landmark {
  font-family: Arial, serif !important;
  font size: 24px !important;
} 

.woocommerce .p-landmark-sub {
  font-family: Arial, serif !important;
  font size: 18px !important;
} 

.woocommerce .p-landmark-desc {
  font-family: Arial, serif !important;
  font size: 16px !important;
}

To learn more about !important CSS property, please take a look at following resource.

Thanks.

#13

Thanks that worked for the font but not for the sizing.

#14

Hi,

Sorry about that. There should be a dash in font size.

Please change the code provided with this one.

.woocommerce .h-landmark {
  font-family: Arial, serif !important;
  font-size: 24px !important;
} 

.woocommerce .p-landmark-sub {
  font-family: Arial, serif !important;
  font-size: 18px !important;
} 

.woocommerce .p-landmark-desc {
  font-family: Arial, serif !important;
  font-size: 16px !important;
}

Thanks

#15

Thank you that worked!

#16

You’re welcome.

1 Like
#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.