Lazy Loader In WordPress WooCommerce Product Listing Page

When we create a WooCommerce product listing page, we can see pagination automatically. Recently we came across a project which had the requirement of having lazy loader in the product listing page. We make it easily using few jQuery Script and Ajax.

Most WordPress developers use only jQuery lazy loader for loading more products or content. When we use this all the products and content load at a time. Here Ajax concept came up, because Ajax loads content part by part as you configure it.
Also Read: Where To Outsource Web Design Projects – India Or Philippines?
To create Ajax lazy loader in WooCommerce product listing page….
1. Copy WooCommerce templates from your plug-in folder and paste it in your custom themes folder.
2. Find ‘archive-product.php’ in WooCommerce templates . Add your product listing page HTML here and a loader .gif image at the bottom of this HTML see below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2.1.

2.2.

2.3.

2.9.

2.10.

2.11. woocommerce_product_loop_start( false ), ‘after’ => woocommerce_product_loop_end( false ) ) ) ) : ?>

2.12. <?php echo '

’ ?>

2.13.

2.14.

2.15.

3. Set flag variable equal to 1 and set page number equal to 0.
4. Write jQuery for window scroll function. Inside the function first calculate the total height of the website “$(window).height()”. Following this calculate the height of total document “$(document).height()”. Subtract window height from document height.
5. Each time the scroll top value equals to window height deducted from the document height, the page number increases by 1. Now check if the flag value equals to 1 or not. If it is 1, configure Ajax.
6. Send the page number to the Ajax page for calculation of pagination.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
6.1.

6.2. var flag=1;

6.3. var limit=0;

6.4. $(window).scroll(function(){

6.5. var height=$(‘#k_test’).height();

6.6. if($(window).scrollTop() == $(document).height() – $(window).height()){

6.7.

6.8. limit++;

6.9. if(flag==1)

6.10. {

6.11. $(“.lazy_lode_img”).css(‘display’,’block’);//display loading image

6.12. $.ajax({

6.13. url:”/ajax/ajax_laziloder.php”, // ajax page

6.14. type:’POST’,

6.15. data:{ ‘paged’:limit}, // send page no

6.16. dataType:”html”,

6.17. success: function(product_data){

6.18. }

6.19. });

6.20. }

6.21. }

6.22. });

6.23.
7. Now write a query for fetching the product by page limit. Check out the admin panel for the number of posts displayed in the product listing page.
7.1.
WordPress WooCommerce Product Listing Page
8. Calculate the limit for query. You will find that I have set 4 posts per page so that each page contains 4 posts/products. Now, the page number is multiplied by the posts per page. Each time when I call Ajax in the previous window, the scrollTop function page number gets increased. Set the WP_Query array posts_per_page equal to predefined posts per page and offset equals to the calculated page number. After setting the query if no product is found, it will return only “0”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
8.1. $post_per_page,//set post per page

8.6. ‘offset’ => $page_no,//set offset for limit

8.7. ‘post_type’ => ‘product’,

8.8. ‘product_cat’=> $cat_id,

8.9. ‘post_status’=>’publish’,

8.10. ‘meta_query’ => array(

8.11. ‘relation’ => ‘OR’,

8.12. array(

8.13. ‘key’ => ’_price’,

8.14. ‘value’ => array($smaillprice, $bigprice),

8.15. ‘type’ => ‘NUMERIC’,

8.16. ‘compare’ => ‘BETWEEN’

8.17. )

8.18. )

8.19. );

8.20. $query = new WP_Query( $args );

8.21. if ( $query->have_posts() ) {

8.22. while ( $query->have_posts() ) : $query->the_post();

8.23. $price = get_post_meta( $query->post->ID, ’_regular_price’, true );

8.24. $price=round($price,2);

8.25. if ((int) $price == $price)

8.26. {

8.27. $price=$price.’.00’;

8.28. }

8.29. echo ’

  • ’.get_the_post_thumbnail( $query->post->ID, ‘thumbnail’ ).’

    ’.$query->post->post_title.’

    $’.$price.’View Detail

  • ’;

    8.30. endwhile;

    8.31. }

    8.32. else

    8.33. {

    8.34. echo ‘0’;

    8.35. }

    8.36. ?>
    9. Go back to the ‘archive-product.php’ Ajax success function. If the return id of product_data does not equal to ‘0’ then hide the loader image first and then append return product_data HTML in the product listing page. Else set flag equals to ‘0’.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    9.1. if(img_popup!=0)

    9.2. {

    9.3. $( “.products” ).append(img_popup);

    9.4. $(“.lazy_lode_img”).css(‘display’,’none’);

    9.5. }

    9.6. else

    9.7. {

    9.8. flag=0;

    9.9. $(’#k_test’).append(’

    NO MORE PRODUCT

    ’);

    9.10. $(“.lazy_lode_img”).css(‘display’,’none’);

    9.11. }
    It’s done now. You can see your page displaying the product using lazy load and through this process you can reduce your page loading time. This is because the product is loaded in parts depending on scroll-down.
    Lazy Loader In WordPress WooCommerce Product Listing Page

    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s