WooCommerce Load More Products

If you use theme with components that different from components on standard theme, that can cause some problems after products filtering. You can fix this problem yourself.

1. Open admin panel of your site and go to WooCommerce -> Load More Products -> Selectors tab
2. For fix problem you need to set right next fields Products selector, Product count selector, Product order by selector and Products pagination selector, or if you already use our WooCommerce AJAX Products Filter plugin you can enable Use selectors from WooCommerce AJAX Products Filter plugin option.
3. By default that used:
   • Products Container Selector: ul.products
   • Product Item Selector: li.product
   • Product count selector: .woocommerce-result-count
   • Pagination Selector: .woocommerce-pagination
   • Next Page Selector .woocommerce-pagination a.next
4. What value you need to set you can see at shop page via page inspector of your browser (If you do not know how to do it, then ask the author’s themes)

Contains settings for select load type and stylization for products load.

• Products Loading Type – type of products load
  • None
  • Infinity Scroll – loads next products on scrolling
  • Load More Button – loads next products on button click
  • AJAX Pagination – uses default pagination, but loads products with AJAX
  • Load More Button + AJAX Pagination
• Change load type for small devices – a different load type for devices with screen width less than Maximum width for small devices enable/disable:
  • Load Type for small devices:
    • None
    • Infinity Scroll – loads next products on scrolling
    • Load More Button – loads next products on button click
    • AJAX Pagination – uses default pagination, but loads products with AJAX
• Maximum width for small devices – all devices with width less than this option is small devices
• Products Per Page – Grid/List View override this settings, you can change it there Grid/List View Settings
• Loading Image – image that is displayed on products loading (Font Awesome/Upload):
  • Rotating image on load – rotate image with CSS (if you use static image or font awesome icon)
  • Show loading image inside of the button (can be configured for each button)
• Buffer Pixels – pixels from the bottom of the products block to the bottom of the screen bottom position where next products will be loaded.
• Don’t update url when next page shown – enable/disable.
• JavaScript and CSS is used on WooCommerce pages only -enable/disable.

Settings for the Load More button and Previous button (if Previous Button is enabled) with a preview feature.

• Custom Class – custom class on load more button.
• Use image – use image instead of the button.
• Width – width of the Load More button [px].
• Text on button – text on button that is used for products load.
• Background color – background color on Load More button.
• Background color on mouse over – background color on Load More button when cursor over button.
• Text color – text color on Load More button.
• Text color on mouse over – text color on Load More button when cursor over button.
• Font size – text size on Load More button.
• Paddings – paddings from text on load more buttom:
  • Top
  • Right
  • Bottom
  • Left
• Margin:
  • Top
  • Right
  • Bottom
  • Left
• Border:
  • Top
  • Right
  • Bottom
  • Left
• Border radius:
  • Top-Left
  • Top-Right
  • Btm-Left
  • Btm-Right

Settings for compatibility with theme.

• Products Container Selector – container with products, must contain all products
• Product Item Selector – selector for each product
• Pagination Selector – current pagination on shop page.
• Next Page Selector – selector for link used for opening next page
• Previous Page Selector – selector for link used for opening previous page
• Get selectors automatically – for many themes, selectors will be chosen automatically.
  • IMPORTANT: It will generate some products on your site. Please disable all SEO plugins and plugins, that have anything to do with product creation.

Settings for image lazy load.

• Enable Lazy Load – uses lazy load for images to be loaded with WooCommerce Load More Products plugin.
• Enable Lazy Load on small devices – uses lazy load on small devices for images to be loaded with WooCommerce Load More Products plugin.
• Load Animation – animation for products that contain images to be loaded with Lazy Load.

Settings for text, that is used in different places.

• Loading Text – text that is displayed rightside from loading image.
• Custom Class for Loading Text – custom class for text that is displayed rightside from loading image.
• Products End Message – text that is displayed on last page.
• Custom Class for Products End Message – custom class for text that is displayed on last page.

Custom JavaScript/CSS code.

• Disable Font Awesome: do not upload the CSS file for Font Awesome to the site. Disable it only if you do not use Font Awesome icons in widgets or you have Font Awesome in your theme.
• Font Awesome Version – version of Font Awesome, which will be used in the settings and the front end pages of the shop. Please select the version that is in your theme.
• Custom CSS – field for custom CSS; contains custom CSS code settings to be displayed on the front end pages. Custom CSS is the CSS as you want it to be.
• Before Update – JavaScript that is executed before products load.
• After Update – JavaScript that is executed after products load.

Setting JavaScript

Open your site admin panel->WooCommerce->Load More Products->JavaScript

Add this JavaScript to the field “After Update”:

jQuery('li.product').animate({opacity:1}, 200);

Selector for X

        Products Container Selector: ul.products
        Product Item Selector : li.product
        Pagination Selector : .x-pagination
        Next Page Selector: .x-pagination a.next

br_get_woocommerce_version()

Public function to get WooCommerce version

return string. woocommerce version

br_is_plugin_active( $plugin_name, $version = ‘1.0.0.0’, $version_end = ‘9.9.9.9’ )

Public function to check is plugin activated.

• $plugin_name – list of plugin name:
  • filters – WooCommerce AJAX Products Filter
  • list-grid – WooCommerce Grid/List View
  • more-products – WooCommerce Load More Products
• $version – minimum plugin version
• $version_end – maximum plugin version

 return boolean. is plugin with this version activated

All of these functions is in class BeRocket_LMP as static functions.

get_load_more_button()

Public function to get load more button

return string. html code with load more button

get_lmp_option( $option_name )

Public function to get settings from load more plugin

• $option_name – name of settings tab:
  • br_lmp_general_settings – settings from General tab
  • br_lmp_button_settings – settings from Button tab
  • br_lmp_selectors_settings – settings from Selectors tab
  • br_lmp_lazy_load_settings – settings from Lazy Load tab
  • br_lmp_messages_settings – settings from Messages tab
  • br_lmp_javascript_settings – settings from JavaScript tab
  • br_lmp_license_settings – settings from License tab

return array. Array with settings. All settings you can find in BeRocket_LMP class in static variables $defaults.

Filter for html code with Load More Buttons.

Parameters

1. button html code – string with button html code.

Usage

<?php
function change_load_more_buttons ( $button ) {
//your code here
    return $button;
}

add_filter( 'berocket_lmp_load_more_button', 'change_load_more_buttons' );
?>

Filter for user functions.

Parameters

1. functions – array with user functions.

Usage

<?php
function change_lmp_user_func ( $functions ) {
//your code here
    return $functions;
}

add_filter( 'berocket_lmp_user_func', 'change_lmp_user_func' );
?>

Filter for product selector.

Parameters

1. selector – string with current selector.

Usage

<?php
function change_lmp_products_selector ( $selector ) {
//your code here
    return $selector;
}

add_filter( 'berocket_lmp_products_selector', 'change_lmp_products_selector' );
?>

Filter for product item selector.

Parameters

1. selector – string with current selector.

Usage

<?php
function change_lmp_item_selector ( $selector ) {
//your code here
    return $selector;
}

add_filter( 'berocket_lmp_item_selector', 'change_lmp_item_selector' );
?>

Filter for pagination selector.

Parameters

1. selector – string with current selector.

Usage

<?php
function change_lmp_pagination_selector ( $selector ) {
//your code here
    return $selector;
}

add_filter( 'berocket_lmp_pagination_selector', 'change_lmp_pagination_selector' );
?>

Filter for next page selector.

Parameters

1. selector – string with current selector.

Usage

<?php
function change_lmp_page_selector ( $selector ) {
//your code here
    return $selector;
}

add_filter( 'berocket_lmp_page_selector', 'change_lmp_page_selector' );
?>