Superponer imagen a botón de carrito

[Alberto Fernández]

Hola, para hacer una llamada a la acción quiero colocar unas imágenes png superpuestas sobre el botón de añadir al carrito en la página de producto.

 

Esto es lo que tengo:

 

Y esto es lo que busco:

 

Quiero recalcar que la imagen debe ir superpuesta sobre el botón y (si es posible) sobre el bloque de "Últimas unidades en inventario".

 

Lo que pretendo es mostrar diferentes imágenes para cada categoría de productos sobre el botón de compra, incluso varias diferentes y aleatorias para la misma categoría en el futuro.

 

¿Alguna idea de por dónde empezar?

[nadie]

Por ejemplo en la plantilla por defecto, si vas al fichero:

 

/themes/plantilla/product.tpl

Buscas algo como esto:

 

 <p id="add_to_cart" {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}style="display:none"{/if} class="buttons_bottom_block">
                                <span></span>
                                <input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
                        </p>

y por ejemplo ves que ese "<span></span>" es el icono del carrito del boton de añadir al carrito de la ficha del producto.

 

Adjunto Imagen

 

 

Y si te fijas esa parte del icono en el css corresponde a esto:

 

.content_prices #add_to_cart span {
        z-index:10;
        display:block;
        position:absolute;
        top:0;
        left:-12px;
        height:26px;
        width:26px;
        background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;
}

Por lo que tu podrias jugar con eso, o reutilizando ese span, o creando por ejemplo uno nuevo debajo de:

 

 <p id="add_to_cart" {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}style="display:none"{/if} class="buttons_bottom_block">

llamandole por ejemplo:

 

 <span class="gatito_amame"></span>

y luego en el css añadir:

 

.content_prices #add_to_cart span.gatito_amame { instrucciones CSS }

[Alberto Fernández]

Hola nadie, uso una plantilla de pago que voy modificando y mi botón no es de imagen: http://cincelaser.com/panderetas/14-pandereta-colores.html.

 

La declaración para el carrito es esta (o eso me parece):

<!-- add to cart form-->
		
		<div class="content_prices clearfix">
			
			{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}
				<span class="exclusive">
				
					{l s='Add to cart'}
				</span>
			{else}
				<p id="add_to_cart" class="buttons_bottom_block">
				
					<input type="submit" name="Submit" value="{l s='Add to cart'}"id="button-cart" class="button-exclusive" />
				</p>
			{/if}
			

[Alberto Fernández]

No tengo idea de código pero es sencillo y creo que lo pillo, haré alguna prueba!

Edited December 30, 2013 by Alberto Fernández (see edit history)