How to Setup Algolia Search on WordPress with Genesis Theme

For those of you new to Algolia, this is another Instant Search solution for WordPress search. It is a 3rd party solution. The plugin is Free. The service is based on the free plugin on the client side communicating with the Algolia servers to retrieve search results for users.

The Algolia setup is very simple. You download the plugin from https://github.com/algolia/algoliasearch-wordpress. Install the plugin manually via your WordPress Admin. Create a new account on www.algolia.com.

For some reason, my drop down box containing the Search Results was not showing. It would only happen when using a Genesis theme. For other themes (I verified it worked with Storefront), it worked just fine. I posted in the StudioPress forums, but no luck. I inspected the Chrome Inspect Console but saw no JS errors.

I even tried disabling one plugin at a time, trying to figure out a possible conflict. No luck there either.

I decided to seek the help of Algolia’s support team. Sylvain Utard, the VP of Algolia Search came to my rescue. After a few experiements and emails back and forth, he figured out the issue. The issue was CSS related.

From my understanding, the Search Form overflow property was not visible by default in Genesis. The drop down for Algolia Search Results was always there, just invisible!

Here is the fix
.search-form {
overflow: visible !important;
}

Voila! That CSS change did the trick.

WooCommerce: Replace “Add To Cart” with “Ask” Form for Custom Products

When you Google the phrase “replace Add to Cart WooCommerce” (or any variants thereof), there are a lot of SERP’s suggesting the same way of hiding/not displaying the Add To Cart button. The idea is to remove the “woocommerce_template_single_add_to_cart” action.

Replace “Add to Cart” for Custom Products

However, in my case, I wanted to do this for only certain specific products. I have products that are marked as “Custom”, i.e. not stocked products. These are products that can be customized as per the customer/client. They usually take 6-8 weeks from order to delivery. The idea for the landing pages for these “Custom” products is not for them to make the purchase outright, but get them to contact the store owner. This way, the process of designing the custom product can be taken offline.

How to Designate a Product as “Custom”

The first step is to identify the products as “Custom” in WooCommerce. Following this guide by Remy Corson, I added a Checkbox under the General tab in the Product Edit Screen. When this Checkbox is checked, it means that the Product is “Custom”.

"Custom" product
“Custom” product

As you can see in the image above, this product is defined as “Custom”.

Next up, we have to hook into the correct action for marking all “Custom” products as not being allowed for Purchase. We will use the is_purchaseable() hook for that purpose.

Alternative CTA for “Custom” Products

I wanted a form to take the place of the “Add To Cart” button. In my case, I use Contact Form 7 for my forms. I just added a small form specifically for the purpose of this CTA. The visitors will see this form in place of the Add to Cart button. The store owner receives an email containing the lead.

We are simply checking if the Product is “Custom”. If it is “Custom”, we will set it as being non-purchaseable. This will hide the “Add To Cart” button for such “Custom” products.

Full Code Listing

Here is the full code. Notice that 2 other custom fields were added. You do not need those, so you can easily delete the relevant lines of code.

Questions/Comments? Type away in the comments below.

How to Add JavaScript to your theme

From the last WordPress meetup, we discussed How to add javascript to your theme

Inside functions.php, hook into the wp-enqueue_scripts hook

add_action( 'wp_enqueue_scripts', 'wpmia_load-javascript_files');

function wpmia_load_javascript_files() {

wp_register_script( 'info-caroufredsel', get_template_directory_uri() . ' jquery.carouFredSel-5.5.0-packed.js', array ('jquery', '5.5.0', true);

...

...

wp_enqueue_script( 'info-carousel-instance' );

 

if ( is_front_page() ) {

wp_enqueue_script('home-page-main-flex-silder');

} 

}

How to setup Swiftype Crawler Based Search Engine for WooCommerce

I first started using Swiftype late last year (2015). The user experience offered by SwifType is phenomenal. It makes searching fun and not guesswork.

I started with the regular SwifType Search Engine along with the WordPress plugin from SwifType. While it provided basic functionality, the array of results did not include all potential matches. Digging deeper, I discovered that the WordPress plugin did not index pages that WooCommerce generates on the fly. Examples of these include the Product Category Archives and the Product Tag Archives. In addition, it would also not index the Brands archive either. Any custom taxonomy that was added was not being indexed. When I inquired about this, I was told that any pages that are dynamically generated by WooCommerce, are not indexed.

That explains why certain pages would not show up in the SwifType Search Results box. In a quest to get this working, I approached SwifType for guidance.

With help from SwifType, I added some code that solved the problem. With this code, SwifType indexes the entire site, including all dynamically generated pages. Please do note that you will have to create a new Search Engine in your SwifType account and select it as being “Crawler Based” versus WordPress plugin-based.

Be sure to replace the <unique-code-from-swiftype> with the actual code you are assigned by SwifType. Similarly, replace the <name-of-search-engine> on Line 11 with the actual name of your SwifType Search Engine.

 

Let me know what you think of this. Did it work? Did it help you? Did it break anything?

[WooCommerce] Checkout Progress Bar

As you read articles/posts on ecommerce optimization, specifically checkout optimization, a popular theme emerges: The Checkout Progress Bar. The idea is to provide your visitors some kind of visual feedback that they are making progress. It tells them how far along they are before the purchase is complete. Conversely, it tells them how much longer before they can own the product/service they are vying for.

With this in mind, I googled for a free plugin that would accomplish just that. My search ended fruitless (almost). I did hit this gem of a plugin called Progress Bar. This is a simple plugin that can be used anywhere on a WordPress site.

Steps

In this article, my aim is to create your own customized checkout progress bar without the use of any paid plugins. You will need

  • Download the Progress Bar plugin from the WordPress plugin repository
  • Make some code changes (PHP and JS included). Download from github.

The code changes are shown below. The first change is in your theme/child theme’s functions.php file. Two things are happening here:

  1. Hooking into the “woocommerce_checkout_before_customer_details” action hook to display the Progress Bar. We use the shortcode for the Progress Bar because it allows to send in parameters for styling and appearance.
  2. Loading the JavaScript file that will manipulate the Progress Bar based on how much of the Checkout Form has been validated.

The second file is the JS script that checks in real-time which mandatory fields have been validated. Then it calculates the progress (in pixels) by simply dividing the “number of fields validated” by the “number of fields that require validation”. It also accounts for the “Shipping Address Same as Billing Address” checkbox.


The end result is you get a progress bar for your WooCommerce Checkout Page.

WooCommerce Checkout  Progress Bar in Action
WooCommerce Checkout Progress Bar in Action

Notes on Customization

The CSS for the progress bar can be easily customized. Follow the instructions on this link. Also, note that the plugin has quite a few options that can be used for customizing the look and feel of the Progress Bar.