Tag: Ajax

WooCommerce: “Load More Related Products” Ajax Button @ Single Product Page

As you know, the WooCommerce Single Product Page displays a set amount of related products (usually 4). But despite the fact that you can customize the number of related products via code, there is no setting that allows you to have a “LOAD MORE” button instead.

My goal is therefore to show as many Related Products as the user wants without reloading the page, so that they can find out more potential matches and increase the chances to place an order.

I must say this took me the whole morning and it’s not yet finished. There are two small bugs: (1) the “Load More” button does not hide once there are no more related products and (2) once the current product’s related products are finished (so, after clicking on the load more button 1 or more times), the Ajax keeps showing the last related product as opposed to show none. Feel free to contribute if you wish to help!

Having said that, let’s see how to implement an Ajax “load more” feature. You can also reuse this on different projects (e.g. “load more blog posts”), because once you get to understand how Ajax works then you can do lots of cool stuff without refreshing the page.

Enjoy!

Continue reading WooCommerce: “Load More Related Products” Ajax Button @ Single Product Page

WooCommerce: Ajax Add to Cart Quantity @ Shop

As you know, you can tick the “Enable AJAX add to cart buttons on archives” checkbox in the WooCommerce settings in order to add products to cart from the Shop / Category / Tag / loop pages without refreshing the page.

This is great for certain businesses, especially those who sell in bulk and where customers know exactly what they need to buy without the need of checking the single product page.

The bad news is that the Ajax Add to Cart button only allows you to add 1 item to the cart i.e. there is no quantity input field. The other bad news is that the Ajax Add to Cart button only works for simple products, while for variable ones it will turn into a “Select options” link without the possibility of adding a variation to cart from there.

In this tutorial, we will see how to turn the WooCommerce shop into an… Ajax cart with quantity inputs. Enjoy!

Continue reading WooCommerce: Ajax Add to Cart Quantity @ Shop

WooCommerce: Why & How to Disable Ajax Cart Fragments

If you’re here it’s because your WooCommerce website is slow and you’re wondering why the “/?wc-ajax=get_refreshed_fragments” URL generates delays and server loads (spikes).

Besides, there is too much online literature about WooCommerce Ajax Cart Fragments (including specific plugins and performance plugin options), and you want to learn quickly what they are before understanding if and how you should disable them.

Performance optimization tools like Pingdom and GTMetrix often put the blame on this little WooCommerce functionality. And disabling it carefully can give you a boost in speed, page load and ultimately sales conversion rate.

So here’s all you need to know.

Table Of Contents
  1. What are WooCommerce Ajax Cart Fragments?
  2. Why disabling WooCommerce Ajax Cart Fragments?
  3. How to Disable WooCommerce Ajax Cart Fragments?
  4. Final Thoughts: WooCommerce Ajax Cart Fragments Yes or No?
Continue reading WooCommerce: Why & How to Disable Ajax Cart Fragments

WooCommerce: How to Enable Product Filters (i.e. “Ajax Filters”)?

If your WooCommerce store has many products, online customers might get easily lost. There might be way too many pages to visit (“product pagination”) before finding the product they’re looking for. Needless to say, this is a huge loss for your business. Possibly, they’ll never come back.

If you shop on popular ecommerce websites such as Amazon and eBay, you know they carry a billion products each or so. Thankfully, on top of the very useful search bar, these websites provide “product filters” in the sidebar. You can refine by price, reviews, tag, category and so on; the website won’t “refresh” but instead it will return the filtered results immediately on that same page.

These are called “Ajax Product Filters” (Ajax is a set of applications that run in the background without forcing a website page refresh). And as Amazon and eBay just proved to you, these filters are absolutely a must if you have 100+ WooCommerce products.

Luckily, there are plugins for that. And they’re either free or quite cheap when you compare this small cost to your potential Return On the Investment (ROI).

Besides, if you have lots of products you also already have several WooCommerce product categories, product tags, product attributes, product custom fields, prices, stock statuses. This means that implementing Ajax Product Filters in your WooCommerce store might be a matter of 10 minutes: activate the plugin, choose the filter criteria and your users will automatically see a smooth filter widget in the sidebar!

So, what are the best “WooCommerce Ajax Product Filter” plugins?

Continue reading WooCommerce: How to Enable Product Filters (i.e. “Ajax Filters”)?

WooCommerce: How to Show Product Search Suggestions?

“Ajax Search” (displaying product search suggestions while a WooCommerce user is typing something in the search bar), is a brilliant idea for all of you ecommerce entrepreneurs.

Saving time to a potential customer is your number one goal. Besides, if your website has a lot of traffic, search should be one of your sales propositions (look at Amazon and eBay to see how prominent the search bar is).

Enabling “Ajax Search” in WooCommerce is actually pretty easy. This time, there is no snippet, but a good combination of free and premium plugins that do the job.

Please note – in this article we will be covering the “Ajax Search” plugins and not the product filtering ones, which are fairly different in regard to the functionality they provide.

So, what are the most reliable “Search Suggestion” plugins for WooCommerce?

Continue reading WooCommerce: How to Show Product Search Suggestions?