WooCommerce Add-on | Docs | Ajax Load More

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

Filter Hooks
WooCommerce Filter Integrations
FAQs

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 of 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.

1 2	// 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.

1 2	// 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.

1 2	// 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.

1 2	// 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.

Users filtering WooCommerce products with FacetWP will need to add the following JavaScript snippet to their website to enable integration between the two plugins.

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>

The code snippet above uses the refresh callback in FacetWP and the reset function in Ajax Load More to manually trigger a reload of Ajax Load More after FacetWP refreshes the product results.

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.

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

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.

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

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.

Yes, all WooCommerce filtering widgets work out of the box. You can view an example on our demo site.

The WooCommerce add-on is compatible with Cache, but is not yet integrated with the Filters or Paging add-ons.

No, the WooCommerce add-on can only be implemented on WooCommerce specific templates.

Shop
Product Archives
Product Search

If you are using WOOF – WooCommerce Product Filters plugin you need to either Turn OFF the Ajax functionality within the filters or follow the guide located above.

Note: Ajax filtering can be turned off in the WOOF widget or the settings page under Options.

To integrate Advanced AJAX Product Filters by BeRocket with Ajax Load More you need to follow the short implementation guide in the WooCommerce Filter Integrations section.

« Back to Add-ons

Filter Hooks

alm_woocommerce_container

alm_woocommerce_products

alm_woocommerce_results

alm_woocommerce_permalink_structure

alm_woocommerce_hide_orderby

alm_woocommerce_orderby_class

alm_woocommerce_hide_pagination

alm_woocommerce_pagination_class

WooCommerce Filter Integrations

FacetWP

WOOF – Products Filter for WooCommerce

Step #1 – Disable Inline CSS

Step #2 – JavaScript Callback

Advanced AJAX Product Filters - BeRocket

Enable JavaScript Callback

FAQs

Is it possible to use core WooCommerce filter widgets with this add-on?

Does the WooCommerce add-on integrate with other Ajax Load More add-ons like Filters or Cache?

Can this add-on be used on non WooCommerce templates?

WOOF WooCommerce Product Filters are not working

Advanced AJAX Product Filters by BeRocket are not working