Product hover

[DARKF3D3]

I'm trying to customize the products list editing the hover effects, practically i want to remove everything except the shadow effect.

For deleting the price on the image i delete this code:

						{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
							<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
								{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
									<span itemprop="price" class="price product-price">
										{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
									</span>
									<meta itemprop="priceCurrency" content="{$priceDisplay}" />
									{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
										<span class="old-price product-price">
											{displayWtPrice p=$product.price_without_reduction}
										</span>
										{if $product.specific_prices.reduction_type == 'percentage'}
											<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
										{/if}
									{/if}
								{/if}
							</div>
						{/if}

After i delete the 2 buttons:

					<div class="button-container">
						{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
							{if ($product.allow_oosp || $product.quantity > 0)}
								{if isset($static_token)}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								{else}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								{/if}						
							{else}
								<span class="button ajax_add_to_cart_button btn btn-default disabled">
									<span>{l s='Add to cart'}</span>
								</span>
							{/if}
						{/if}
						<a itemprop="url" class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
							<span>{l s='More'}</span>
						</a>
					</div>

The problem is that now when i hover on a product the price disappears and the box become smaller.

How can i fix this?

[DARKF3D3]

No one know how can i fix this?

[DARKF3D3]

Inspecting the code with crhrome i see that when i hover the mouse on a product the:

<li class="ajax_block_product col-xs-6 col-sm-4 col-md-3 first-in-line first-item-of-tablet-line first-item-of-mobile-line">

Get a new class "hovered":

<li class="ajax_block_product col-xs-6 col-sm-4 col-md-3 first-in-line first-item-of-tablet-line first-item-of-mobile-line hovered">

 

I searched for it in the product-list.tpl but there's no trace of that class. I'm stuck with this from some days, I don't find a way to remove  the over effect.

[martc]

Hi, I have a solution to your issue. Your findings on the class 'hovered' helped me do the same thing, so thanks.

 

What you need to do (besides what you've done above):

 

In PRODUCT_LIST.CSS

 

1. Inside  "ul.product_list.grid > li.hovered .product-container .content_price {", comment out the line:

  

         display: none

 

 

You will now find a new problem - when hovering over products with a one line description the price jumps up. To correct this:

 

2. Inside "ul.product_list.grid li.hovered h5 {", comment out the line:

 

         min-height: 30px

Edited December 25, 2014 by martc (see edit history)