Change Add to Cart to View More button in Featured Products

[generalexperts]

My featured products on my homepage currently show Add to Cart when hovering over the product. I would like it to link to View. I would appreciate if anyone can help me change that.

 

Thank you!

 

My site: http://tinyurl.com/n5pfy52

[generalexperts]

And I am using the 'Featured Products on the Homepage' module, with PS 1.5.4.1.

[vekia]

hello

it looks like some non default solution with hover effect

can you show the part of code with this hover?

 

everything depends on how the code looks like

[generalexperts]

#featured-products_block_center

{width:101.3%;

border-radius: 0px 0px 10px 10px;

border:0px solid #ede;

margin-top:15px;

border-bottom:0px!important;

padding:5px 0px 0px 0px;

box-shadow:0 8px 6px -6px #888;

-moz-box-shadow:0 8px 6px -6px #888;

-webkit-box-shadow:0 8px 6px -6px #888;

padding-bottom:100px;}

#featured-products_block_center li {

 

width: 157px;

height: 242px;

margin:8px 0px 1px 11px;

padding: 1px 7px;border:1px dotted #ede;

}

#featured-products_block_center .product_image:hover {opacity: .7;

transition: opacity 500ms ease-out 0s;

 

}

#featured-products_block_center p.title_block{text-transform: uppercase;

border-bottom: 1px solid rgb(222, 222, 222);padding-bottom: 4px;font-weight: 400;

text-shadow:0px 0px 0px!important;

color:rgb(152,153,153);

background: #f9fcf7;

background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%);

font:18px Arial,Helvetica,sans-serif;background:none;}

#featured-products_block_center li.last_item_of_line {margin-right:0;}

 

#featured-products_block_center li p.s_title_block a, #featured-products_block_center li p.s_title_block{color: rgb(153, 153, 153);

display: block;

overflow: hidden;

text-decoration: none;

text-align:center;

position: relative;

white-space: nowrap;

margin: 3px 0px;

font-size: 14px;

padding-bottom:3px!important;

font-family: Arial,Helvetica,sans-serif;}

#featured-products_block_center li:hover p.s_title_block a,#featured-products_block_center li:hover p.s_title_block a{color:rgb(26, 126, 167);}

#featured-products_block_center li .product_image,.products_block li img {

 

display:block;

position:relative;

overflow:hidden;

margin-top:5px;

border:0px!important;

}

img.pring {

margin: 0px;

padding: 0px;

width: 124px;

height: 124px;

display: block;}

 

.ie8 .new{top:70px;right:10;width:24px;}

.ie7 .new {top:80px;right:20;width:24px;}

#featured-products_block_center .product_image span.new

{ display:block;position:absolute;width:24px;top:10px;right:10px;padding:2px;text-align:right;text-transform:uppercase;background-color:#fff;webkit-box-shadow:1px 1px 2px rgba(50,50,50,0.3);-moz-box-shadow:1px 1px 2px rgba(50,50,50,0.3);box-shadow:1px 1px 2px rgba(50,50,50,0.3);}

#featured-products_block_center li:hover .product_desc a {font:13px Arial,Helvetica,sans-serif;text-decoration:none;color: rgb(153, 153, 153);}

#featured-products_block_center li .product_desc a{color:#ccc;font:13px Arial,Helvetica,sans-serif;text-decoration:none;}

#featured-products_block_center li span.on_sale{position:absolute;top:0px;padding:2px;text-align:right;text-transform:uppercase;0.3);color:rgb(153,153,153)}

#featured-products_block_center li:hover span.new {color: rgb(26, 126, 167);}

#featured-products_block_center li:hover span.on_sale{color: rgb(26, 126, 167);}

 

#featured-products_block_center li .lnk_more {

width:30px;position:absolute;top:151px;margin-left:55px;

visibility:hidden;

text-transform: uppercase;

font:10px Arial,Helvetica,sans-serif;

background-color: rgb(255, 255, 255);

text-decoration:none;padding:1px 2px;

box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);

 

}

#featured-products_block_center li:hover .lnk_more {visibility:visible;}

 

#featured-products_block_center .price_container {

 

margin-top:11px;

background: none repeat scroll 0 0 #383838;

box-shadow:1px 1px 2px rgba(50, 50, 50, 0.3);border:0px;

padding:3px 0px;

width:100%;

}

 

#featured-products_block_center li span.price {

font-size: 12px;

margin-left: 2px;

color: rgb(255, 255, 255);

font-family: Arial,Helvetica,sans-serif;

text-shadow:.1px .3px 3px #888888;

letter-spacing:.3px;

font-weight:300;

}

#featured-products_block_center li:hover span.price {font-weight:bold;}

#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button {

visibility:hidden;

position: relative;

margin:-25px 8px 1px 70px;

background:#25aae1;

color:#fff;

box-shadow:1px 1px 3px #383838;

border:0px;

height:12px;}

#featured-products_block_center li:hover .ajax_add_to_cart_button,#featured-products_block_center li:hover.last_item_of_line {;visibility:visible}

#featured-products_block_center li span.exclusive {display:none;}

@media only screen and (min-width:1000px) and (max-width:1120px){

#featured-products_block_center{width:90%;}

#featured-products_block_center li{width: 140px;

height: 230px;

margin:21px 8px 1px 12px;

padding: 1px 7px}

img.pring{width:124px;height:100px;}

#featured-products_block_center p.title_block{font-size:14px;}

#featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:12px;}

#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-left:56px;}

}

/* New code */

#featured-products_block_center li {

position: relative;

}

#featured-products_block_center li .mask {

position: absolute;

width: 100%;

height: 100%;

background-color: rgba(255,255,255,.7);

top: 0;

left: 0;

z-index: 99;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

#featured-products_block_center li:hover .mask {

opacity: 1;

}

#featured-products_block_center li .mask h5 {

padding: 10px;

-webkit-transform: translateY(-100px);

-moz-transform: translateY(-100px);

-o-transform: translateY(-100px);

-ms-transform: translateY(-100px);

transform: translateY(-100px);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

#featured-products_block_center li .mask .product_desc {

-webkit-transform: translateY(100px);

-moz-transform: translateY(100px);

-o-transform: translateY(100px);

-ms-transform: translateY(100px);

transform: translateY(100px);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

#featured-products_block_center li img {

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

max-width: 100%;

height: auto;

}

 

 

#featured-products_block_center li:hover img {

-webkit-transform: scale(1.1,1.1);

-moz-transform: scale(1.1,1.1);

-o-transform: scale(1.1,1.1);

-ms-transform: scale(1.1,1.1);

transform: scale(1.1,1.1);

}

#featured-products_block_center li .mask .product_desc + div {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: translateY(50px);

-moz-transform: translateY(50px);

-o-transform: translateY(50px);

-ms-transform: translateY(50px);

transform: translateY(50px);

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

 

#featured-products_block_center li:hover .mask h5,

#featured-products_block_center li:hover .mask .product_desc,

#featured-products_block_center li:hover .mask .product_desc + div {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

}

#featured-products_block_center li:hover .mask .product_desc {

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 0.1s;

-o-transition-delay: 0.1s;

-ms-transition-delay: 0.1s;

transition-delay: 0.1s;

}

#featured-products_block_center li:hover .mask .product_desc + div {

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

-o-transition-delay: 0.2s;

-ms-transition-delay: 0.2s;

transition-delay: 0.2s;

}

#featured-products_block_center li .ajax_add_to_cart_button, #featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button {

margin: 10px auto;

}

#featured-products_block_center li .product_desc a, #featured-products_block_center li:hover .product_desc a {

color: #333;

padding: 5px 10px;

}

#featured-products_block_center .price_container {

padding: 0 10px;

width: auto;

}

@media only screen and (min-width:744px) and (max-width:999px){#featured-products_block_center{width:79%;}

#featured-products_block_center li{width: 120px;

height: 220px;

margin:15px 8px 1px 10px;

padding: 1px 7px}

img.pring{width:100px;height:100px;}

#featured-products_block_center p.title_block{text-align:center;font-size:14px;}

#featured-products_block_center li .product_desc a ,#featured-products_block_center li:hover .product_desc a{font-size:10px;}

#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{padding:2px;margin-top: -19px;

margin-left: 46px;font-size:11px;}

#featured-products_block_center li span.price{font-size:11px;}

}

@media only screen and (min-width:488px) and (max-width:773px){#featured-products_block_center{width:55%;}

#featured-products_block_center li{width: 90px;

height: 200px;

margin:21px 8px 1px 14px;

padding: 1px 7px}

img.pring{width:80px;height:80px;}

#featured-products_block_center li span.price{font-size:9px;}

#featured-products_block_center p.title_block{text-align:center;font-size:12px;}

#featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:10px;}

#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{font-size:8px;padding:1px;margin-top: -19px;

margin-left: 39px;}

}

@media only screen and (max-width:487px) and (min-width:0px){#featured-products_block_center{width:30%; padding: 5px 0px 3px 0px;}

#featured-products_block_center li{width: 80px;

height: 180px;

margin: 22px 7px 1px 30px;

padding: 1px 7px}

img.pring{width:74px;height:74px;}

#featured-products_block_center p.title_block{text-align:center;font-size:10px;}

#featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:9px;}

#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-top: -18px;

margin-left: 29px;padding:0px;font-size:8px;}

#featured-products_block_center li span.price{letter-spacing:0px;font-size:9px;margin-left:0px;}

#featured-products_block_center li.last_item_of_line{display:none;}

}

[vekia]

it's css stylesheet,

in this case its necessary to alter .tpl file

[generalexperts]

Below is my homefeatured.tpl file. I thought you wanted to see the hover effects so I gave you the css. Thanks for your help!

<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block clearfix">
	<h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4>
	{if isset($products) AND $products}
		<div class="block_content">
			{assign var='liHeight' value=250}
			{assign var='nbItemsPerLine' value=4}
			{assign var='nbLi' value=$products|@count}
			{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
			{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
			<ul style="height:{$ulHeight}px;">
			{foreach from=$products item=product name=homeFeaturedProducts}
				{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}
				{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
				<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
					<a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')|escape:'html'}" height="200px" width="200px" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>
					<h5 class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>
					<div class="product_desc"><a href="{$product.link|escape:'html'}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>
					<div>
						{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
						
						{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
							{if ($product.quantity > 0 OR $product.allow_oosp)}

                            <a class="exclusive ajax_add_to_cart_button" href="{$product.link|escape:'html'}" title="{l s='Read More' mod='homefeatured'}">{l s='Read More' mod='homefeatured'}</a>
                            
                            
							{else}
							<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
							{/if}
						{else}
							<div style="height:23px;"></div>
						{/if}
					</div>
				</li>
			{/foreach}
			</ul>
		</div>
	{else}
		<p>{l s='No featured products' mod='homefeatured'}</p>
	{/if}
</div>
<!-- /MODULE Home Featured Products -->