Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Documentation Shoptimizer Shop and Categories Create a full width category banner

Create a full width category banner

You can now create a full width category banner in Shoptimizer, with a background image if you wish. The result looks like this. Before beginning, make sure that you’re running the latest version of the theme by updating first.

Full width category banner

Step 1

Install the Advanced Custom Fields plugin.

Step 2

Download this file. You can right-click and Save As or open it in a new tab and Save Page.

Step 3

Go to: Custom Fields > Tools > Import Field Groups and choose the file you’ve just downloaded.

Step 4

Shoptimizer full width category banner The new category banner field within Products > Categories – when editing a category

Now, when you edit a product category you should see an additional image upload option at the bottom called WooCommerce Category Banner. You can add an image to this if you would like a background image to appear.

Step 5

Add some text to the category description field if you like. A standard <ul> list will render as buttons. This is a great opportunities to link to other sub categories or even products.

Here is an example:

Note: To see a nice editor in this space you should install and enable the Yoast SEO plugin.

Step 6

Finally, enable this category layout. Go to Appearance > Customize > Layout > WooCommerce – and under ‘Product Categories’ ensure that Below header is chosen.


Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!