Add banner to category

August 7, 2025 · AI Conversations

User

add attached in wooocmmerce cateogory product page category title/description and image with above background

Assistant

To add the attached banner (with background, title/description, and image) to a **WooCommerce category product page**, follow these steps:

—

### ✅ 1. **Upload the Image**
Go to your WordPress admin panel:
– **Media > Add New** and upload the image.
– Copy the **URL** of the uploaded image.

—

### ✅ 2. **Add Custom Banner to WooCommerce Category Page**

Edit your theme’s `archive-product.php` or hook into the `woocommerce_before_main_content` action.

#### Add this code to your theme’s `functions.php` or a custom plugin:

add_action('woocommerce_before_main_content', 'custom_category_banner_block', 5);
function custom_category_banner_block() {
    if (is_product_category()) {
        $category = get_queried_object();
        $cat_name = $category->name;
        $cat_description = category_description($category->term_id);

        // Adjust this to your uploaded image URL
        $image_url = 'https://yourdomain.com/wp-content/uploads/2025/05/banner-image.png'; 
        ?>
        <style>
        .custom-cat-banner {
            background: linear-gradient(90deg, #e0f7f7 50%, #c6eae9 50%);
            padding: 50px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        .custom-cat-banner-text {
            flex: 1 1 400px;
        }
        .custom-cat-banner-text h1 {
            font-size: 32px;
            color: #004545;
            margin-bottom: 15px;
        }
        .custom-cat-banner-text p {
            font-size: 16px;
            color: #333;
        }
        .custom-cat-banner-img {
            flex: 1 1 300px;
        }
        .custom-cat-banner-img img {
            max-width: 100%;
            height: auto;
        }
        </style>

        <div class="custom-cat-banner">
            <div class="custom-cat-banner-text">
                <h1><?php echo esc_html($cat_name); ?></h1>
                <p>Updates, and insights in one place. <br>Keep reading to stay informed.</p>
            </div>
            <div class="custom-cat-banner-img">
                <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($cat_name); ?>">
            </div>
        </div>
        <?php
    }
}

—

### 🧪 Optional: Custom Per Category Image

If you want a **different image per category**, use:

$image_id = get_term_meta($category->term_id, 'thumbnail_id', true);
$image_url = wp_get_attachment_url($image_id);

Then set featured image in **Products > Categories > Edit Category > Thumbnail**.

—

Let me know if you need this as a reusable shortcode or want the title text to be multilingual (WPML-ready).

User

make it shortcode

Assistant

Here's how you can turn the WooCommerce category banner into a **shortcode** for use on category pages or anywhere else:

—

### ✅ 1. **Add This to `functions.php` or a Custom Plugin**

function custom_woocommerce_category_banner_shortcode() {
    if (!is_product_category()) return '';

    $category = get_queried_object();
    if (!$category || !isset($category->term_id)) return '';

    $cat_name = $category->name;

    // Replace this with your actual uploaded image URL
    $image_url = 'https://yourdomain.com/wp-content/uploads/2025/05/banner-image.png';

    ob_start(); ?>

    <style>
    .custom-cat-banner {
        background: linear-gradient(90deg, #e0f7f7 50%, #c6eae9 50%);
        padding: 50px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
    }
    .custom-cat-banner-text {
        flex: 1 1 400px;
    }
    .custom-cat-banner-text h1 {
        font-size: 32px;
        color: #004545;
        margin-bottom: 15px;
    }
    .custom-cat-banner-text p {
        font-size: 16px;
        color: #333;
    }
    .custom-cat-banner-img {
        flex: 1 1 300px;
    }
    .custom-cat-banner-img img {
        max-width: 100%;
        height: auto;
    }
    </style>

    <div class="custom-cat-banner">
        <div class="custom-cat-banner-text">
            <h1><?php echo esc_html($cat_name); ?></h1>
            <p>Updates, and insights in one place. <br>Keep reading to stay informed.</p>
        </div>
        <div class="custom-cat-banner-img">
            <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($cat_name); ?>">
        </div>
    </div>

    <?php
    return ob_get_clean();
}
add_shortcode('custom_category_banner', 'custom_woocommerce_category_banner_shortcode');

—

### ✅ 2. **Usage**
Paste this shortcode inside your **category description**, **custom page**, or template:

[custom_category_banner]

—

### 🧪 Optional Improvement – Image Per Category

To make the banner image dynamic per category:

$image_id = get_term_meta($category->term_id, 'thumbnail_id', true);
$image_url = wp_get_attachment_url($image_id);

Replace the static `$image_url` with this block to make it use the category thumbnail.

—

Let me know if you want to:
– Use ACF for custom banner title/description/image,
– Make it multilingual (WPML or Polylang),
– Or inject it automatically into every product category archive.

Add banner to category

Leave a Comment Cancel