Shop page header – background colour and category tabs alignment

Hi,
I’m trying to style my shop and category page headers to match the WoodMart demo at https://woodmart.xtemos.com/shop/

Specifically I want:

The product category tabs (Dogs / Cats in my case) to be centred in the banner, the same way the demo shows subcategories centred in the header area.

https://harvinderb1.sg-host.com/

Thanks

Hello,

Thanks for reaching out.

To assist accurately, could you please share a screenshot of your shop/category header showing the current category tabs, and a reference screenshot (from the demo) indicating how you want them centered? If possible, annotate the screenshot to highlight the desired alignment. You can attach the images here or share a link to them.

Once we see the exact layout, we’ll guide you on the right steps.

Kind regards,
XTemos Studio

Hi,

I have attached the images as references.

Here are the links again:

WoodMart demo at https://woodmart.xtemos.com/shop/

My site https://harvinderb1.sg-host.com/

I have two questions:

In the demo the category tabs are centred underneath the page title. On my site they are left-aligned. How do I centre them?

Also, on mobile my categories show as a “Categories” dropdown instead of displaying as tabs. I only have two categories (Dogs and Cats) so the dropdown feels like unnecessary extra taps. Can I display them as two visible tabs on mobile instead?

Please advise without custom CSS if possible.

Thanks

Harvinder

Attachments:

You must be logged in to view attached files.

Hi there,
Thanks for the details and the links.

Here’s how to achieve what you want without custom CSS:

1) Center only the page title (default header)
– Go to WordPress Dashboard -> WoodMart -> Theme Settings -> Page title.
– Set the title alignment to Center and adjust the page title design as needed.

2) Center the categories under the title and control their mobile behavior
The default shop/category header doesn’t provide separate alignment/control for the categories. For full control (centering and how they show on mobile), build a custom Product archive layout:
– Go to Dashboard -> Layouts -> Product archive -> Edit your current layout..
– In the layout’s content remove the Page title element
– In the layout content, add two elements:
– Archive title (this outputs the Shop/Category title) and center it.
– Product categories (to output your category links) and center it.
– Configure these two elements’ design/responsive settings to match your needs so the categories are visible the way you prefer on mobile.

This approach lets you replicate the demo-style centered header and present your two categories visibly on mobile without custom CSS.

Kind regards,
XTemos Studio

Hi,

Thanks for this.

I think I would rather use css on mobile instead.

Is that possible?

Thanks,

Harvinder

We don’t have a ready-made CSS for this, and we recommend avoiding CSS for that mobile change. The reliable solution is to adjust the Product archive layout so you can center the categories and control how they appear on mobile without custom code:
– Go to Dashboard -> Layouts -> Product archive -> Edit.
– Remove the Page title element.
– Add Archive title and Product categories elements, and set both to Center.
– Adjust the elements’ responsive settings so your categories remain visible on mobile.

This approach will give you the result you want without custom CSS.

The problem is, is that I don’t want the Page Title on every page.

That setting where I click to centre it makes it appear everywhere even on the homepage which I don’t want.

Hi there,
Thanks for the clarification.

If you build the page title via a Product archive layout, the change won’t be global. That layout applies only to the shop and product category/tag pages, so it won’t affect your homepage or regular pages.

Do this:
– Dashboard -> Layouts -> Product archive -> Edit.
– Remove the Page title element.
– Add Archive title and Product categories, and set both to Center. Adjust responsive options as needed.

If you previously enabled/centered the Page title globally in Theme Settings, revert that (so it doesn’t show on all pages). The Product archive layout will handle the shop and category headers independently.

Kind regards,
XTemos Studio

Thanks – I’ve managed to create it.

Two more things please..

How do I make the element full width?

How do I delete the white space above it so that it sits exactly underneath the menu?

Attachments:

You must be logged in to view attached files.

Hello,

To do this, you need to wrap these elements in a full-width section with a container, as shown in the screenshot https://gyazo.com/1ed88da5b25cf0e2e8ae2ff8d262cf86
Then, adjust its margin top to compensate for that white gap as shown on the screenshot https://gyazo.com/3b5a142dfad0c0698e41b645f15a28f4

Kind Regards

Thank you!

You are always welcome. Feel free to contact us if you have any further questions.

[Author]

Posts