WooCommerce

Developer documentation for the Ajax Load More WooCommerce add-on.

Filter Hooks

The following filter hooks are available when using this add-on:

alm_woocommerce_container

The alm_woocommerce_container filter updates the target classname of the WooCommerce listing container.

// Default: 'ul.products'
// <ul class="products">...</ul>

add_filter( 'alm_woocommerce_container', function() {
   return 'ul.woo-products-list'; 
} );

This filter is useful when a theme has modified the default WooCommerce product classes.

alm_woocommerce_products

The alm_woocommerce_products filter updates the target classname of the individual products.

// Default: '.product'
// <li class="product">...</li>

add_filter('alm_woocommerce_products', function(){
   return '.my-woo-product'; 
});

This filter is useful when a theme has modified the default WooCommerce container class.

alm_woocommerce_results

The alm_woocommerce_results filter updates the target classname on the WooCommerce result count component.

// Default: '.woocommerce-result-count'
// <p class="woocommerce-result-count">...</p> 

add_filter('alm_woocommerce_results', function(){
   return '.my-woocommerce-results'; 
});

This filter is useful when a theme has modified the default WooCommerce class of this element.

alm_woocommerce_permalink_structure

The alm_woocommerce_permalink_structure filter will allow for changing the default URL permalink structure.

// Default: /page/{page}
add_filter('alm_woocommerce_permalink_structure', function() {
	return '?product-page={page}';
});

This filter is useful when using WooCommerce shortcodes or a plugin (e.g. Divi, Elementor) on shop pages. These use a paging permalink structure outside the default WooCommerce shop /page/{page}/ structure.

alm_woocommerce_hide_orderby

The alm_woocommerce_hide_orderby filter will hide the sort/orderby select menu on WooCommerce templates.

// Default: false
add_filter( 'alm_woocommerce_hide_orderby', '__return_true' );

alm_woocommerce_orderby_class

The alm_woocommerce_orderby_class filter will update the classname for the orderby select menu.

// Default: .woocommerce-ordering
add_filter( 'alm_woocommerce_orderby_class', '.my-woocommerce-ordering' );

This filter is useful when a theme has modified the default WooCommerce orderby menu class and Ajax Load More cannot locate the target element.

alm_woocommerce_hide_pagination

The alm_woocommerce_hide_pagination filter will show the default paging navigation on WooCommerce templates.

By default Ajax Load More will add inline CSS to hide the out-of-the-box WooCommerce pagination as it is replaced with infinite scroll.

// Default: true 
add_filter( 'alm_woocommerce_hide_orderby', '__return_false' );

alm_woocommerce_pagination_class

The alm_woocommerce_pagination_class filter will update the classname for the default WooCommerce paging navigation.

// Default: .woocommerce-pagination 
add_filter( 'alm_woocommerce_pagination_class', '.my-woocommerce-pagination' );

This filter is useful when a theme has modified the default WooCommerce pagination class and Ajax Load More cannot locate the target element.

WooCommerce Filter Integrations

The WooCommerce add-on has been tested and integrated with the following WooCommerce filtering plugins. Please review the integration steps of each to complete the integration.

<script>
   var init_facetwp = true;
   document.addEventListener('facetwp-refresh', function() {
      if ( ! init_facetwp && document.querySelector('ajax-load-more-wrap[data-id="alm_woocommerce"]' ) ) {
         ajaxloadmore.reset({'type' : 'woocommerce'});
      }
      init_facetwp = false;
   });
</script>

WOOF – Products Filter for WooCommerce

Users with WOOF – Products Filter for WooCommerce activated will need to complete the following steps to enable integration between the two plugins if using the Ajax filtering functionality of the plugin.

Step #1 – Disable Inline CSS

Visit the Ajax Load More settings page and disable the Load CSS Inline setting. If this setting remains enabled, WOOF will strip the inline styling and the Ajax loader will appear unstyled.

Step #2 – JavaScript Callback

Visit the Advanced -> Code settings section of the WOOF Products Filter and enter the following JavaScript inside the JavaScript code after AJAX is done field – this JavaScript will instruct Ajax Load More to reset after the Ajax filtering has completed.

ajaxloadmore.reset({'type' : 'woocommerce'});

JavaScript

Advanced AJAX Product Filters – BeRocket

Users with Advanced AJAX Product Filters by BeRocket activated will need to complete the following to enable integration between the two plugins.

Enable JavaScript Callback

Visit the Product Filters -> JavaScript/CSS settings section and enter the following JavaScript inside the After Update: field – this JavaScript will instruct Ajax Load More to reset after the Ajax filtering has completed.

ajaxloadmore.reset({'type' : 'woocommerce'});

JavaScript

FAQs

Below are common questions regarding the WooCommerce add-on. If you have a question and don’t see an answer here, please visit the support page and submit your request.

« Back to Add-ons