Q & A with Chris Christoff on WordPress ecommerce

This past Saturday (October 4, 2014), I attended WordCamp Tampa.  While there, I took up Chris Christoff‘s offer to answer any ecommerce related WordPress questions. Chris was kind enough to clearly explain all his answers. For that I am very appreciative. I hope Chris is a speaker at more WordCamps. Even though I could not attend any sessions in full, the 40 minutes Q & A with Chris made this a most productive WordCamp for me! Here is the summary of my questions and answers by Chris:

Q1. I use WooCommerce. Sometimes, I have product(s) whose layout I would like to change. i.e. the default layout from WooCommerce does not apply well to these products. How do I change the layouts of these certain products in an upgrade-safe way?

A1. First make a child theme. Copy the content-single-product.php inside the child theme. inside the content-single-product.ph”, check using Conditional Tags if the current product requires a special layout. For checking, you can use a category slug or the Product ID itself.

If the Product does require a special layout, place those layouts within the “if” clause.

NOTE: If you have only a handful of products that require this layout, it is acceptable to use this “if” approach. However, for more products, it is advisable to use a “switch … case” construct. Within each “case” clause, “include” the PHP file that contains each product’s layout definition.

If WooCommerce changes the “Add To Cart” function name, check your theme to make sure function names are named correctly. This is very rare and unlikely.

TIP: Use git to look up the differences between your theme and the one that WooCanvas is about to release. You can simply place a copy of your current files and compare with the latest WooCommerce version of those files.

Q2. I  have an IFRAME from an external site that allows the visitor to customize a product. When different options are selected, the jQuery script will change the product’s appearance. Is there a way to simply retrieve some output (price and options) from this script and pass them on to WooCommerce to “Add To Cart” this custom product?

A2. Since its an external script that does not output anything, nothing can be extracted from this script.

Instead, Chris suggested to compile the pictures of all the permutations/options.  (Use amazon mechanical turk for downloading all the images). Use those images as attribute images. This way, this product can be easily defined as a Variable product with all the different options. In other words, do not use the IFRAME because it can not be “Add”ed to Cart.

Q3. In WooCommerce, we have products with Variations. Say for example, a Product has 3 colors and 3 sizes. That makes 9 different combinations. The picture of the Small, Medium and Large combinations is the same. i.e. no different picture is required for combinations that are of the same color. How do I assign the same picture to combinations of the same color without repeating it 9 times?

A3. First step, do not “link all variations”. Instead, click on “Add Variation”. Select the Color, then select “Any Size”. Then load the picture for that color. This way, you only upload the picture for each color just once. (versus 3 times, for each of the Small, Medium and Large sizes).

The downside with this approach is that you can not have differently priced Size based options. You can not specify Stock for the Small vs Medium vs Large either.

Q4.Speeding up WooCommerce. Tips?

A4. Caching. Host provided caching is the best. Send a ticket to let your host know that we are using WooCommerce. This way, they can exclude Checkout, Purchase Confirmation and My Account Page.

Look into Amazon cloud front for caching/CDN solution. Also for CDN’s, Chris’s recommendation was MaxCDN or Amazon S3. CloudFlare did not have high marks.

A surefire way to speed up the site is using hosting that use SSD drives instead of SATA. Additionally, Memory Caching at host can make a major impact. Recommendations Digital Ocean or Liquid Web. CloudFlare not recommended. Amazon or Max CDN is recommended.

Q5. Checkout page customization

A5. Copy the checkout page template to the child theme and then make changes. This way, the changes will be upgrade-safe.

Q6. For cross sells to show on single product:  I would like to show related products for certain products.

A6. Call woocommerce_cross_sell_display() inside the single-product.php

Q7. If we want to write a plugin for product attributes so that all products with no default attributes should automatically have some default, what would be the best way to go about it?

A7. This has been debated internally several times before.

Look at the Core code in wordpress inside save_post(). Check if a product has attributes. If it does have default attributes, no change. Otherwise, update the meta data for that product to assign default attributes.

That is all the questions I had. If I meet Chris again, I will ask him more questions. He is the most enlightened WooCommerce expert I have ever met!

 

[Fixed] Infinite Redirect after switching WooCommerce site to SSL

According to Google’s Webmaster Blog, they are going to consider HTTPS as a ranking signal.  With this announcement, it becomes important that site owners switch their entire site to HTTPS.

If you already have SSL on all your pages, you do not need to do anything. However, I had a case where only the Checkout and Account pages were SSL protected. The rest of the site was not SSL protected.

I embarked on the journey to convert an e commerce site to HTTPS on all pages. Doing the conversion itself was easy. I used this guide to transfer the site to HTTPS.

However, the problem was I was receiving the dreaded infinite redirect message from Chrome. Initially, I thought it was a local browser cache issue. That was not the case. Digging deeper using Google Chrome’s FireBug tool, I determined that the http://www.example.com was redirecting to https://www.example.com. In turn the latter would redirect to the former. This 2-way ping pong redirect would continue for about 3 or 4 times before the browser gives up and announces failure.

I found the issue was a non-trivial (in hindsight) setting under WooCommerce. Go to WooCommerce->Settings->Checkout->Force HTTP when leaving the checkout

Make sure that setting option “Force HTTP when leaving the checkout” is Unchecked.

When this option is checked, it will redirect all non-checkout pages to http. There lies the problem. The 301 site-wide redirect for http:// to https:// was conflicting with this WooCommerce setting. Each was reversing each other out, hence the infinite redirect.

I had posted in multiple online groups but never received a proper response, so I hope this helps someone.

 

WordPress Meetup PBG Re-cap

This is my first meetup for this meetup group.  Carolyn Lee of Palm Beach SEO was kind enough to share her thoughts on links.

Link Building Takeaways:

1. Title Tags are the one of the most important factor among SEO factors.

2. Meta Description tags are considered important as well. Meta Keywords tag can hurt.

3. Header Tags – Make sure you have the hierarchy intact. Do not have more than 1 H1 Tag.

H1 – Title of the Page

H2 – What’s on the page

4. Optimize images; alt tags, keywords in the title and filename.

 Favorite Plugins

TinyMCE Editor

Genesis Theme

 

WordCamp Miami 2014 Re-cap

WordCamp Miami 2014 was held during the weekend of May 9-11 at the University of Miami in Coral Gables.

The first day was a choice between a WordPress Beginners WorkShop vs BuddyPress Workshop. I opted for the latter, since I wanted to learn more about BuddyPress. The presenters kept the event alive with useful tidbits. They provided a good overview of BuddyPress and bbPress. The slides are informative and fun.

The next day was divided into three tracks. I was picking sessions based more on content than on the track. For example, the session on “How to Create a Killer Video” session was very nicely presented. All in just 15 minutes. I was clamoring for more info on the videos topic.

There was another presentation that stood out for me. This one was about how to change the WordPress Admin panel for small business owners. It was all done through small coding tricks, no hacks. Just clean programming to change the capabilities of users via code. This would cut down on the overwhelming number of choices in the Dashboard, if you are not familiar with WordPress.

WordPress tidbits

I recently attended the South Florida WordPress Developers Meetup in Davie. I wanted to re-cap some of the very useful pieces of tidbits that Michael Schofield presented at the meetup. He has a very easy way of presenting information. Michael does not hesitate to dig into the deep details of WordPress. I left the meetup feeling very happy armed with all the useful information he presented.

  1. You can create your own barebones theme by visiting underscores.me. This same website is also used to generate the base TwentyEleven, TwentyTwelve and TwentyThirteen themes that come bundled with the default install of WordPress. At a minimum, a theme can function with just 2 files: index.php and style.css. Michael did a great job at explaining each of the files with the theme. He dissected the code and did easy demos to explain how these files fit into the big picture.
  2. the_excerpt() function is used to display a 255 word excerpt of the blog post. However, this can be problematic if the post has a lot of non-text material in the beginning. An example could be images, special HTML formatting etc. In that case, you can use “get_the_excerpt()” alternatively. This function will strip out all the HTML before printing.
  3. How does WordPress determine which page to show? Here is a helpful infographic that shows how WordPress determines the correct template file to invoke. You can also find a simpler Black and White version of this Template Hierarchy at https://codex.wordpress.org/Template_Hierarchy
  4. For developers, a very useful tool that they can use for quick testing and validation: www.codepen.io. As Michael demonstrated the use of this tool live, I was fascinated with its power. Michael did a quick demo of how to create a Triangle using only CSS and also rotated the triangle. Very Cool indeed!
  5. Another very useful resource (one that I did not know existed) is the ability to test which CSS mechanisms are compliant with which browsers. www.caniuse.com to the rescue. THis will allow you to test which CSS clauses are compliant with each browser. A nice matrix shows you the answer easily.
  6. Also, dont forget the WordPress Codex.

Thanks to this meetup group, I was able to learn quite a few pieces of useful advice that we as developers find very pertinent. I will start using some of these resources in the future.