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!