catgory Assistance needed to increase Category Page Headpage featured image size

[kstudio]

Hello WoodMart Support,

I am working on my website, and I want to increase the height of the Category Page header (page title) banner. My goal is to make the header image much taller, similar to the full-width look seen on sites like ref i attach

I have tried changing the “Page title size” to “Large” in the theme settings, but I would like even more height. Could you please provide the custom CSS needed to:

Increase the vertical padding or set a specific height for the .page-title section on desktop.

Ensure the height also looks good on mobile devices.

• This topic was modified 5 months ago by kstudio.

Attachments:

You must be logged in to view attached files.

Hello,

The height of the “Page title” can be changed directly via Theme settings -> Page title -> turn on the “large” value for the “Page title size” option. https://ibb.co/CKBXX0k

But if you want more height, Try to add the following custom css code in Theme Settings > Custom CSS:

.wd-page-title {
    --wd-title-sp: 180px !important; 
} 

Best Regards,

is that possiable i can add slider in that area like in that example

becuase it was good in desktop but mobile banner size not good is that is that possiable change mobile image
or i can create custom page can i add these filters option with sidebar like in that page was created with widgets

Attachments:

You must be logged in to view attached files.

Hello,

01. Regarding adding a slider in the category pages, try to use the Theme’s Layout Builder. You can create Custom Layouts for WooCommerce pages like Shop, Category, Single Product page, Cart, and Checkouts, and for portfolio pages. You can use that to create your own custom layouts for category pages and in the layout, use the slider widget and choose the slider that you want to show in this category: https://ibb.co/4RKBqf5R

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

02. Regarding the page title image for the category, there is no option to use a separate image for mobile.

If you want to add widgets in the sidebar in the categories pages, navigate to Theme Settings > Product Archive > Sidebar > choose the sidebar position, Then, Navigate to Appearance > Widgets > add the widgets in the shop page widget area.

For more detailed guidance, please check out our documentation here:
https://xtemos.com/docs-topic/widgets-and-sidebars/

Best Regards,

Hey

Thanks alot it works i need one small help how can i add different category diffrent style like
i have have category like : hoodies, tshirt, jacket
i need every category diffrent header but in layout conditions it going on all pages how to set that thing
thanks

Hello,

You can do that by means of Theme Presets. Find our documentation tutorial about this here: https://xtemos.com/docs-topic/theme-settings-presets/

You need to create different headers and then set them in the Theme Settings > General > Header for every preset using Term ID – apply settings for special terms like tags or categories.
https://postimg.cc/grxPWGcS

Best Regards,

hi
i will explain again i think i will not explain well what i need
i have created custom layout for Products archive layout
now thing is going its banner coming to all shop archive category same i want to change that how to control that

thanks

Attachments:

You must be logged in to view attached files.

Hello,

If you want to set a different image for each product category page, follow these steps:

Navigate to Products > Categories > Edit the category > Upload an image in the “Image for the category page title” field: https://ibb.co/1tVNZmhs

This page title will work if you are using a page title widget in the custom layout.

Best Regards,

that not what i saying this is code which works for me to set banner height and same height every viewpoint of screen
/* Universal Fluid Banner – Fixed for 2225×794 Proportion */
.wd-page-title {
–wd-title-sp: 0px !important;
height: auto !important;
min-height: auto !important;

/* 1. MATH FIX: (794 / 2225 * 100) = 35.6%
This ensures the container is the EXACT same shape as your photo */
padding-top: 35.6% !important;

/* 2. POSITION FIX: Moves the image UP so there is less headspace */
background-position: center top !important;
background-size: cover !important;
background-repeat: no-repeat !important;

/* 3. Layout */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Mobile Adjustment to keep the models prominent */

@media (max-width: 200px) {
.wd-page-title {
padding-top: 60% !important; /* Makes it taller on mobile */
background-position: center 20% !important; /* Fine-tunes the “headspace” for small screens */
}
}

Hello,

Now I understand — you’re not asking how to set a different image, you’re controlling the banner height and aspect ratio so it stays consistent across all screen sizes using CSS.

If you notice anything else or need further assistance, feel free to reach out anytime.

Best Regards,

Sure thanks alot have great day

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts