josaphi

Pretty old forum but I had the same issue as @realglinton and @friskokitty. I found that troublesome “Products” title in the woocommerce.php file on line 22: `* Post Types
**/
do_action( ‘woocommerce_register_post_type’ );

register_post_type( “product”,
array(
‘labels’ => array(
‘name’ => __( ‘YOURSTORENAMEHERE’, ‘woocommerce’ ),`

Hope this helps.

No problemo…I spent 10 hours yesterday searching and searching and had to piece people’s solutions together to create my own. Such a stressful process…but good luck!

Hi mtucker, it seems as though you and I are/were looking to do the same thing with this hover effect. After reading this post I kinda found a way to do it. I’m not super great at coding/java/etc, so I’m not sure if this is the cleanest way to do it…but I got it to work. I hope I explain this correctly to you, also note that I took mine a step forward to include the short description excerpt:

1. In cretzzzu3000 post above he gave a line of code:
<a itemprop="image" <em>onmouseover="<?php the_title(); ?><?php echo $product->get_price_html(); ?>"</em> href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>"><?php echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?></a>

He stated to put this in a file called: single-product\product-image.php. That is not the file for what we want. Instead open file: /templates/content-product.php.

2. Now what I realized is that the line of code was a bit much and we only need a part of that code: <?php the_title(); ?><?php echo $product->get_price_html(); ?>

3. So I created new div tags (note the excerpt div) and took that and placed it in the file in the place where I felt the image was being called, which is <?php do_action( 'woocommerce_before_shop_loop_item' ); ?> and I added :

<div id="product_title">
	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?><?php the_title(); ?><br><?php echo $product->get_price_html(); ?

><div id="excerpt"><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></div></div>

4. I removed/deleted the original title and price tag that shows up at the bottom of the image:

<h2><?php the_title(); ?></h2>
                       <?php
			/**
			 * woocommerce_after_shop_loop_item_title hook
			 *
			 * @hooked woocommerce_template_loop_price - 10
			 */
			do_action( 'woocommerce_after_shop_loop_item_title' );
		?>

5. Now for the CSS I had to play around a bit in firebug. For the actual product image hover state I added an opacity of 1.5:

ul.products li.product a:hover img {
opacity: 0.15;
}

6. For the product title div:

#product_title {
color: white;
float: right;
font: italic 18px ‘PT Sans’,’Helvetica Neue’,’Verdana’,sans-serif;
margin-bottom: 100px;
margin-top: 100px;
opacity: 1;
padding-left: 15px;
text-align: center;
text-transform: uppercase;
width: 300px;
}

7. For the product image I added a position absolute:

ul.products li.product a img {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
display: block;
height: auto;
margin: 0 10px 8px;
position: absolute;
transition: all 0.2s ease-in-out 0s;
width: 95%;
}

8. I’m assuming you already figured out how to remove the add to cart buttons but if not, I added this line of code to my woocommerce-functions.php file: function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);`

I hope this helps you and gets you the results it got for me. Please let me know if I need to clarify my steps a bit further.

Hi, I am trying to do all mentioned above: Have the title, price and a brief excerpt on the list pages, however I would like that info to appear on image hover. Does anyone know the additional steps to add an action to make these items appear on a mouse hover? I’m sure this is the correct template file that I would need to edit…any help would be greatly appreciated!

Thanks!

Hi Benoit De Boeck,

I am slightly new to coding and am also trying create different urls with different images. I followed the instructions for .xml but I am stuck on adding the .xml link to the SupersizedDir. You see I am using the slideshow only on the homepage (with NextGen gallery) so I can’t really reference a page/post to attach the .xml file. I want a slideshow only on the homepage of my site. Am I missing something in the instructions on how to add the .xml file without pages/posts?

Hi Keesiemeijer,

That is the correct theme! I did as you said and the good thing is the code didn’t break the site. However it wasn’t working, so for some reason I thought to take out the “!” from “is_home” and it worked! The slideshow appears on the homepage and no where else! BUT now of course there is a small issue. It seems that when you go to another page the loading symbol appears as if its trying to still load the slideshow. Any work around for this? Is this something I need to get read of via css? Here is the final code I used with the script you gave:

<?php if ( is_home() ) : ?>
<script type="text/javascript">  

	jQuery(function($){
		$.supersized({

					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay				:	1,		//Slideshow starts playing automatically
					start_slide             :   1,		//Start slide (0 is random)
					random					: 	0,		//Randomize slide order (Ignores start slide)
					slide_interval          :   5000,	//Length between transitions
					transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	1000,	//Speed of transition
					new_window				:	1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,		//Disables image dragging and right click with Javascript

					//Size & Position
					min_width		        :   0,		//Min width allowed (in pixels)
					min_height		        :   0,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_portrait         	:   1,		//Portrait images will not exceed browser height
					fit_landscape			:   0,		//Landscape images will not exceed browser width

					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   1,		//Display slide numbers
					slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
					slides 					:  	[		//Slideshow Images

<?php
// The Query
query_posts( 'post_type=slides&posts_per_page=-1&orderby=rand' );
$i=0;
while ( have_posts() ) : the_post();
$simg=get_post_meta($post->ID, 'wtf_slide', true);
if ($i > 0) : echo ','; else: echo ''; endif; //For IE sake add a coma BEFORE every image offsetting the first one.
echo "{image : '".$simg."'}";
$i++;
endwhile;
wp_reset_query();
 ?>
]

});
});
</script>
<?php endif; ?>