Tagged: ,

Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • January 17, 2016 at 4:28 pm #566813
    Benoit

    Hi guys, i’m trying to change the price position in the woocommerce product grid. The price usually appear under the product image and i would like it to be on the product image. So i need to move it in the appropriate div.

    Here is a screenshot to help you understand what i’m trying to do.

    Screenshot

    You can see the <span class=”price”> is currently under the <div class=”inner_product_header”> and i would like to move it under the <div class=”thumbnail_container”>

    Many thanks in advance for your help.

    • This topic was modified 8 years, 11 months ago by Benoit.
    January 17, 2016 at 7:57 pm #566834
    Benoit

    In fact i just want to change the position of the “price”, to have the price hover the product image. I can move it (drag it) in the chrome Developer Tools but i can’t find a proper way to edit the source code to make the change.

    January 18, 2016 at 6:48 am #566946
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    January 18, 2016 at 3:06 pm #567240
    Benoit

    Hi Rikard, Thanks for your help.

    It should be same for any website with woocommerce grid. But see below the link to the website i’m currently building.

    January 18, 2016 at 3:13 pm #567243
    Benoit

    The <span class=”price”> is under <div class=”inner_product_header”> i would like to have it under <div class=”thumbnail_container”> so it can be visible over the product images.

    Thanks again !

    January 19, 2016 at 4:34 pm #567933
    Benoit

    Any idea would be very appreciated. I can’t find the source code, to change where the price is displayed.

    January 19, 2016 at 4:50 pm #567946
    Yigit

    Hey!

    Sorry for the late reply!

    Do you mind creating a temporary admin login and posting it here privately?

    Regards,
    Yigit

    January 19, 2016 at 4:54 pm #567953
    Benoit

    Here it is

    January 19, 2016 at 11:31 pm #568219
    Yigit

    Hey!

    Please add following code to Functions.php file in Appearance > Editor

    function add_custom_price_pos(){
?>
<script>
jQuery(window).load(function(){
var movedPrice = jQuery('span.price').html();
jQuery('.inner_product .thumbnail_container').append('<span class="price">'+movedPrice+'</span>');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_price_pos');

    Regards,
    Yigit

    January 19, 2016 at 11:47 pm #568232
    Benoit

    Thanks Yigit, You are a genius !!

    But now, i have a duplicate price, one exactly at the appropriate place and the other at the original place.
    Can you help me remove the original price.

    Thanks!!!

    January 20, 2016 at 3:27 am #568326
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .inner_product_header span.price { display: none !important; }

    Best regards,
    Yigit

    January 20, 2016 at 4:08 am #568347
    Benoit

    Thanks Yigit, it works, but now i notice that the price is the same on each product and it display the price even on products without price ?

    January 20, 2016 at 8:11 am #568417
    Vinay

    Hi!

    We have made some changes in the css please check the site now.

    #top .main_color .price{
    position: absolute;
    top: -220px;
}

    I could not figure out where you added the below css but you can remove it if it is in a child theme css.

    
.inner_product_header span.price { display: none !important; }

    Hope this helps.

    Best regards,
    Vinay

    January 20, 2016 at 3:29 pm #568674
    Benoit

    Hi Vinay, Thanks for your help. Really appreciated.

    But i have already tried this solution. The problem with this solution is that the price disappear if i use smaller products grid and it also disappear on tablet and mobile. With the other jQuery method i was able to create smaller grid without loosing the price and it was also responsive on tablet and mobile.

    January 20, 2016 at 3:38 pm #568682
    Yigit

    Hi Benoit!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 769px) {
#top .main_color .price {
    top: -130px;
}}

    Regards,
    Yigit

    January 20, 2016 at 3:47 pm #568690
    Benoit

    Thanks Ygit , It work for tablet but not for mobile ( see the website) and it dosent resolve the smaller grid problem.

    January 20, 2016 at 3:52 pm #568695
    Benoit

    The first option with the jQuery was awesome, apart from the fact that the price is not good and displayed on all the products. Is there a way to use this method with a fix for the price problem ?

    Thanks a lot for your help guys, much appreciated.

    January 20, 2016 at 4:24 pm #568719
    Vinay

    Hi!

    To move this price tag on top and to make it look good on any size product you will have to break it free from it’s exciting container and place it inside the thumbnail container and this can only be done using a child theme. all tho an easier alternative would be to display the price on the bottom right of the product images. That way we can move it up same distance on all products and it will show up correctly on any size product in any size screen… Please check the site now and Let us know…

    Regards,
    Vinay

    • This reply was modified 8 years, 11 months ago by Vinay.
    January 20, 2016 at 4:36 pm #568727
    Benoit

    Hi Vinay,

    Thanks for the explanation. I’m using a child theme, so, will it be possible to break it free from it’s exciting container and place it inside the thumbnail container as you suggest ? The other option is a great alternative but if it’s possible i would really like to have it in the top corner.

    Regards!

    January 20, 2016 at 8:35 pm #568868
    Vinay

    Hi!

    Ok Sure, we will help you with this customization but we need more time to work on this as it involves more work. Until then please continue to use this alternate solution to display on the bottom of all the products and please keep the admin access open till we update you next.

    Regards,
    Vinay

    January 20, 2016 at 8:50 pm #568871
    Benoit

    You are awesome !!! This is one of the reason I love working with enfold, the support is amazing, even when it’s a special request you are always there to help. kriesi should be proud to have a team like you guys.

    Thanks a lot !!

    Regards!

    Benoit

    January 20, 2016 at 11:52 pm #568973
    Yigit

    Hey!

    Thank you for your kind words Benoit! :)

    Regards,
    Yigit

    January 21, 2016 at 12:18 am #568993
    Vinay

    Hi!

    Thank you for the kind words and appreciation :)

    The price position is moved using the modified version of the jQuery code Yigit provided earlier please check the site and let us know what you think.

    // Price Position
function add_custom_price_pos(){
?>
<script>
jQuery(window).load(function(){
    jQuery('span.amount').each(function() {
        var movePrice = jQuery(this);
        movePrice.prev().append( movePrice.html() );
        jQuery(this).parents('.inner_product').find('.thumbnail_container').append('<span class="price">'+'<span class="amount">'+movePrice.html()+'</span>'+'</span>');
        console.log('Price is  :' + movePrice.html());   
    });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_price_pos');

    Cheers!
    Vinay

    • This reply was modified 8 years, 11 months ago by Vinay.
    January 21, 2016 at 1:25 am #569025
    Benoit

    Amazing !! Thanks guys, your help is always very appreciated. I’ll let you know when the website will be finish in order to show you what i was able to create with your help on the latest issues. ( because right now the site is at the beginning of creation)
    Keep up the great work! *****

    Regards!

    January 21, 2016 at 8:21 am #569223
    Vinay

    Hey!

    Glad we were able to help you :)

    Yes we would love to see what you have done with enfold. Please feel free to showcase your site here https://kriesi.at/support/topic/enfold-showcase/

    Should you have any questions in future please get in touch with us :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Change the position of a div in the woocommerce product grid’ is closed to new replies.