WooCommerce product image overwriting my featured image - Wordpress - php

Question

I'm using the Dazzling theme with the WooCommerce Plugin and on the WooCommerce pages that have products on them, the product image is also showing up as my featured image. I have a featured image set, but the product image seems be overwriting it.
The Feature image I have set is for all the shop pages is home_off.jpg. The cart and checkout pages look fine and are loading the proper feature image (no product images on those pages) So I guess the product image on the catalogue pages is using same/similar post_thumbnail code?
the code snippet I'm using to load my featured image as the background of a div is
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
'single-post-thumbnail' ); ?>
<div id="featureImg" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<?php endif; ?>
You can see it best on this page http://dev.tdfinternational.net/index.php/product/finding-your-place-the-tdf-map-book/
But cart, checkout, etc, are looking good!
http://dev.tdfinternational.net/index.php/cart/
Any idea how to keep this from happening?

Answer 1

Ok, so what I recommend is that you create separate metabox for your posts and pages that will have the ability to use different image as your breadcrumbs image.
Create metabox
In your functions.php or wherever you put your metaboxes, put this code (should be working):
add_action( 'add_meta_boxes', 'my_add_custom_box' );
function my_add_custom_box($postType) {
$types = array('page', 'post');
if(in_array($postType, $types)){
add_meta_box(
'breadcrumbs-image-metabox-options',
esc_html__('Breadcrumbs', 'yourtheme' ),
'breadcrumbs_image_meta_box',
$postType,
'side',
'low'
);
}
}
if (!function_exists('breadcrumbs_image_meta_box') ) {
function breadcrumbs_image_meta_box($post) {
$custom = get_post_custom( $post->ID );
$breadcrumbs_image = (isset($custom["breadcrumbs_image"][0])) ? $custom["breadcrumbs_image"][0] : '';
wp_nonce_field( 'breadcrumbs_meta_box', 'breadcrumbs_meta_box_nonce' );
?>
<style type="text/css">
.hidden{display: none;}
.postbox .separator{padding-top: 0;margin-top: 20px;}
</style>
<p class="separator">
<input id="breadcrumbs_image_input" type="hidden" name="breadcrumbs_image" value="<?php echo esc_html($breadcrumbs_image); ?>"/>
<a title="<?php esc_html_e('Set Breadcrumbs Image', 'mytheme'); ?>" href="#" id="add-post-breadcrumbs_image">
<?php
if(!empty($custom["breadcrumbs_image"][0]) ){
echo '<img width="254" src="'.esc_url($breadcrumbs_image).'" />';
} else{
esc_html_e('Set Breadcrumbs Image', 'mytheme');
} ?></a>
<?php
if (empty($custom["breadcrumbs_image"][0])) {
echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'" href="#" id="remove-post-breadcrumbs_image" class="hidden">'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'</a>';
} else{
echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'" href="#" id="remove-post-breadcrumbs_image" >'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'</a>';
}
?>
</p>
<?php
}
}
add_action( 'save_post', 'save_breadcrumbs_image_meta_box' );
if ( ! function_exists( 'save_breadcrumbs_image_meta_box' ) ){
function save_breadcrumbs_image_meta_box( $post_id ){
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
if( !current_user_can( 'edit_pages' ) ) {
return;
}
if( !isset( $_POST['breadcrumbs_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['breadcrumbs_meta_box_nonce'], 'breadcrumbs_meta_box' ) ) {
return;
}
$breadcrumbs_image = (isset($_POST["breadcrumbs_image"]) && $_POST["breadcrumbs_image"]!='') ? $_POST["breadcrumbs_image"] : '';
update_post_meta($post_id, "breadcrumbs_image", $breadcrumbs_image);
}
}
add_action('admin_enqueue_scripts', 'backend_scripts');
if ( ! function_exists( 'backend_scripts' ) ){
function backend_scripts() {
wp_enqueue_script( 'breadcrumbs_image_upload', get_template_directory_uri().'/js/admin.js' );
}
}
The first part creates a breadcrumbs metabox in your pages and posts. For woocommerce product you should probably add product to the $types array.
Then you create a metabox and save function for it. Now, since you want to have the functionality of a Featured image, you'll need some jquery to make it all work. That's why you need to enqueue a separate script that will appear only in your backend (that's why you're hooking to admin_enqueue_scripts).
And in your admin.js that you've put in your js theme folder, just put this:
jQuery(document).ready(function($) {
"use strict";
//Breadcrumbs Image
$(document).on('click', '#add-post-breadcrumbs_image', upload_breadcrumbs_image_button);
function upload_breadcrumbs_image_button(e) {
e.preventDefault();
var $input_field = $(this).prev();
var $image = $('#add-post-breadcrumbs_image');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add Breadcrumbs Image',
button: {
text: 'Add Breadcrumbs Image'
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.url);
$image.html('');
$image.html('<img width="254" src="'+attachment.url+'" />');
$('#remove-post-breadcrumbs_image').removeClass('hidden');
});
custom_uploader.open();
}
$(document).on('click', '#remove-post-breadcrumbs_image', remove_breadcrumbs_image_button);
function remove_breadcrumbs_image_button(e){
e.preventDefault();
var $input_field = $('#breadcrumbs_image_input');
var $image = $('#add-post-breadcrumbs_image');
$input_field.val('');
var title = $image.attr('title');
$image.html(title);
$('#remove-post-breadcrumbs_image').addClass('hidden');
}
});
I've tested it in Twenty Fifteen and it's working:
And you can then use it by simply
$custom = get_post_custom(get_the_ID());
$custom['breadcrumbs_image'][0];
Hope this helps :)