Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 17, 2019 at 10:16 pm #1139276
    UNBUENPLAN GROUP

    Hi team!

    I need to change the offer button so that it appears above the image in the upper right as shown in the image

    https://jaraverde.com/wp-content/uploads/2019/09/Captura-de-pantalla-2019-09-17-a-las-22.10.00.png

    Thank you!

    September 17, 2019 at 10:35 pm #1139279
    Jordan Shannon

    Hey UNBUENPLAN GROUP,

    Add this to quick css:

    #top .onsale{
top:-240px!important;
}

    Best regards,
    Jordan Shannon

    September 17, 2019 at 10:50 pm #1139281
    UNBUENPLAN GROUP

    Thank you

    Solve the problem in the desktop version, but in the mobile version I would like the position to be higher as in the image.

    There is a problem with that code because in the ipad and ipad pro version the offer button is not visible. In the horizontal versions of the iPad it only appears very close up in the iPad Pro, in the normal iPad it also does not appear.

    I wait your answer!

    Thank you!

    Mobile: https://jaraverde.com/wp-content/uploads/2019/09/Captura-de-pantalla-2019-09-17-a-las-22.41.14.png
    iPad Pro: https://jaraverde.com/wp-content/uploads/2019/09/Captura-de-pantalla-2019-09-17-a-las-22.40.17.png
    iPad: https://jaraverde.com/wp-content/uploads/2019/09/Captura-de-pantalla-2019-09-17-a-las-22.40.43.png

    September 18, 2019 at 12:04 am #1139289
    Jordan Shannon

    Hi,

    Add the following as well:

    
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait){
#top .onsale{
top:-160px!important;
}}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
#top .onsale{
top:-220px!important;
}}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait){
#top .onsale{
top:-120px!important;
}}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
#top .onsale{
top:-160px!important;
}}

    Best regards,
    Jordan Shannon

    September 18, 2019 at 11:48 am #1139419
    UNBUENPLAN GROUP

    Hello!!

    It resolves in some views but in PC they are seen in the middle, instead of on the top and in other screen widths it disappears.

    Is there no way to leave it fixed in relation to the container of each view?

    I send you this video so you can see what I mean. https://drive.google.com/file/d/125XgXyZXfqIiTPUHag2TNCX-sdyjsQ2r/view

    Please help!

    September 24, 2019 at 4:23 am #1141192
    Ismael

    Hi,

    Thank you for the update.

    Remove the recent css code temporarily, then add the following snippet in the functions.php file. It will create a sale badge above the product image, so you don’t have to adjust it with css.

    #
# removes the default post image from shop overview pages and replaces it with this image
#
remove_action('woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail', 10);
remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action('woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_mod', 10);

function avia_woocommerce_thumbnail_mod($asdf)
{
	global $product, $avia_config;

	if(function_exists('wc_get_rating_html'))
	{
		$rating = wc_get_rating_html(  $product->get_average_rating() );
	}
	else
	{
		$rating = $product->get_rating_html(); //get rating
	}

	$id = get_the_ID();
	$size = 'shop_catalog';

	echo "<div class='thumbnail_container'>";
	 	if($product->is_on_sale()) {
			echo '<span class="onsale">¡Oferta!</span>';
		}

		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		echo get_the_post_thumbnail( $id , $size );
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->get_type() == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.