How to load Hero Image

[purekarting]

Hi Swift Gurus,

I was curious if you would be able to provide code I could put in my functions.php file and template override file which would load the WooCommerce Hero Image into the page as a normal image?

I tried this in functions.php

add_action( 'woocommerce_archive_description', 'woocommerce_category_hero_image', 2 );
function woocommerce_category_hero_image() {
    if ( is_product_category() ){
	    global $wp_query;
	    $cat = $wp_query->get_queried_object();
		$hero_image = get_woocommerce_term_meta( $cat->term_id, 'hero_id', true  );
            	if ( $hero_id != "" && $hero_id != 0 ) {
            		$hero_image_url = wp_get_attachment_url($hero_id, 'full');
            	}
	}
	return $hero_image;
}

and this in an overridden archive-product.php
<?php echo '<img src="' . $hero_image . '" alt="" />'; ?>

But all I get in the built html is
<img src="" alt="">

[David Martin – Support]

Hi,

I don’t think that is the correct code for this. Where do you want the image to be placed in the single product view?

Unfortunately a customisation like this is beyond our scope of support, I can likely point you in the right direction though.

Thanks,
David.

[purekarting]

Hi David,

Thanks a million for any help provided. I’m trying to load the image on a category archive, but as a normal image, not a CSS background fill like it does when the store is set to display as Hero.

Cliff

[David Martin – Support]

Hi Cliff,

Could you supply your login details and the URL of a category page you wish to add this to?

If you can create a screenshot to annotate your end goal that would help also.

Thanks,
David.

[purekarting]

Hi David,

Goals:

1. DONE – Override certain categories via filter in functions.php
   1. DONE – Apply body_class so that overridden categories use half/half hero-content-split layout
2. Insert Hero Image as responsive image (w/inner zoom same as on single product pages) filling the left split frame, with 20px padding on all around when viewed on >tablet portrait
   1. When <tablet-landscape the hero image should move above woo-main content like it normally does in half/half mode, but should be 100% width 300px high, overflow hidden, and open up in a lightbox when clicked.
3. MAYBE – Hide global banner on these special categories so as to not take up the vertical page space and be less distracting to the user.

I am using this code in my atelier-child/functions.php file to filter the chosen categories for which to apply the overridden design:

/* Apply half-content-split based on the product category.
================================================== */
add_filter( 'body_class','halfhalf_body_class' );
function halfhalf_body_class( $classes ) {

if ( is_product_category( array( 'axle', 'axle-support', 'bs7', 'bs5', 'bs6', 'bsm', 'bss', 'sa2', 'sa3', 'battery', 'micro', 'm4', 'm5', 'm6', 'bumpers', 'carbon-fiber', 'cooling-system', 'engine-mount-otk', 'exhaust-system', 'floor-tray', 'fuel-system', 'gear', 'hubs', 'pedals', 'seat', 'shift-lever', 'sprocket-carrier', 'steering-system', 'stub-axle', 'torsion-bar', 'wheels' ) ) ) {
$classes[] = 'hero-content-split';
}

return $classes;

}

See attached annotated/modified screenshot for notes.

Any and all help greatly greatly appreciated.  I’m just getting started with WordPress/Woocommerce so I just need pointers on where to start/read/copyfrom.

Attachments:

You must be logged in to view attached files.

[purekarting]

This reply has been marked as private.

[David Martin – Support]

Hi,

A job like this will require you to get the help of a WP Developer.

To provide you with help, I have modified your function to actually return the category image. Add this to your child theme or theme functions.php file.

	function woocommerce_category_hero_image() {
	    if ( is_product_category() ){
		    global $wp_query;
		    $cat = $wp_query->get_queried_object();
			$hero_id = get_woocommerce_term_meta( $cat->term_id, 'hero_id', true  );
	            	if ( $hero_id != "" && $hero_id != 0 ) {
	            		$hero_image_url = wp_get_attachment_url($hero_id, 'full');
	            	} else {
	            		$hero_image_url = '';
	            	}
		}
		echo $hero_image_url;
	}

You can then call the image in your HTML like so:

<img src="<?php woocommerce_category_hero_image(); ?>" alt="" />

This is basic, but should give you enough to either try yourself or pass on to a developer. I have tested the above and the output works, you will need to add this to your modified template file.

Thanks,
David.

[purekarting]

Thanks a million for the help David.  I’ve got the Hero Category Image loading now.

Is there an img class, or div surround that I can use in my HTML to get the image which will apply and activate the same ZOOM feature that is utilized on the single product pages?

[David Martin – Support]

Hey, no problem.

You can use CSS3 scale with the below (add your classes/settings):

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    max-width: 100%;
}

img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Thanks.