Add image header to woo commerce category pages

Support
#1

Hi,

In a previous post i had asked for help in adding content to the woocomemrce category pages.

this worked well in that application but i am looking for some help in making the content full width as an image header.

This post from Feb of 2018 said you were adding that request to a future iteration. https://theme.co/apex/forum/t/woocommerce-product-category-image-header/22846

Has that happened yet?

Thanks,

Brent

#2

Hi Brent,

Thank you for writing in, this would be become possible when the header builder can assigned a custom header to the archive pages.

For now you can use the same code provided by Ruenel on that other thread. But change this line:

add_action('woocommerce_archive_description', 'add_custom_content');

To this:

add_action('x_after_masthead_end', 'add_custom_content');

So the content will be put directly below the masthead and become fullwidth.

Actually if its the category image that you want to render, you can use this custom code provided here.

Also, change this line:

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );

To this:

add_action( 'x_after_masthead_end', 'woocommerce_category_image', 2 );

Hope it helps,
Cheers!

#3

That worked great

thanks very much

Any ideas what extra code i can add so the title is displayed as H2 and centered horizontally and vertically?

Brent

#4

Hello Brent,

To display an h2 title and being centered on the page when displayed, you can make use of this example code:

function add_custom_content(){ ?>
  <?php if ( x_is_product_category() ) : ?>
  
    <div class="custom-content pam" style="text-align: center;">
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor.</h2>
      <p><?php echo do_shortcode('[button shortcode]'); ?></p>
    </div>

  <?php endif; ?>

<?php }
add_action('x_after_masthead_end', 'add_custom_content');

Feel free to edit it with your own custom content.

#5

Hi RueNel,

hank for that.

I should have been more clear in my last message.

The Custom content should be the CategoryTitle that the image is for.

Also is there a way to constraint the proportions of the image to 1500 x 650?

thanks

Brent

#6

Hi @Brent-St,

To do that, update the function add_custom_content to:

function add_custom_content(){ ?>
  <?php if ( x_is_product_category() ) : ?>
  
    <div class="custom-content pam" style="text-align: center;">
      <h2><?php echo single_cat_title(); ?></h2>
    </div>

  <?php endif; ?>

<?php }

To do that update the function woocommerce_category_image, give the image a div wrapper, try this code to.

function woocommerce_category_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();
        $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = wp_get_attachment_url( $thumbnail_id );
        if ( $image ) {
            echo '<div class="category_image_wrapper"><img src="' . $image . '" alt="' . $cat->name . '" /></div>';
        }
    }
}

After that you need to add this custom css for the wrapper

.category_image_wrapper {
    position: relative;
    height: 560px;
    overflow: hidden;
}

.category_image_wrapper img {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}

Hope it helps

#7

Hi,

That works great. Thanks again for the help.

There is one more thing.

i am looking for the category title be be centered over the image

thanks

Brent

#8

Hi @Brent-St,

To achieve that, update the function woocommerce_category_image to:

function woocommerce_category_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();
        $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = wp_get_attachment_url( $thumbnail_id );
        if ( $image ) {
            echo '<div class="category_image_wrapper"><img src="' . $image . '" alt="' . $cat->name . '" /><div class="category_name_wrapper"><h2>' . $cat->name . '</h2></div></div>';
        }
    }
}

After that, add this css.

.category_name_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category_name_wrapper h2 {
    margin-top: 0;
    color: #fff;
}

Hope it helps.

#9

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