WooCommerce and Timber / Twig

WooCommerce and Timber / Twig

July 19, 2018 By Jake

Incorporating WooCommerce into a template using Timber was not such an easy task.  I have posted several times about Timber and the benefits it offers. For me as a developer, the fact that Timber incorporates the Twig Templating Framework into WordPress really excites me.  As you may be aware, ProWeb.Agency uses a Bootstrap 4.x based WordPress Template that utilizes the Timber Plugin.

As a WordPress developer, I have experience with WooCommerce.  That experience was usually limited to the installation and configuration of the store and additional plugins, such as payment processors, coupon extensions, and shipping components. This time, it was different.  I was using the Timber Boot Template and overriding WooCommerce’s templating system. At first, it sounded simple, but then reality set it in.

WooCommerce code is written in the form of a library of functions that are called by different hooks. There are a few different approaches you can take, such as re-writing all the template code using Twig.  This is the route I first assumed I would take, but then during the planning stage, I realized that later on down the road, this would be a nightmare.  Using this method, with every new upgrade to WooCommerce, I could potentially be re-writing 90-95% of the code.

WooCommerce is aware of this dilemma, and there are many articles published on this subject.  WooCommerce suggests using overrides for WooCommerce to incorporate it in your template, but instead of re-writing the core code, call the functions and hooks to create the templates.  WooCommerce has documentation available on using filters to adjust the function calls.

For example, If I wanted to show the portion of the single product page that showed the data tabs for the product I could call the function woocommerce_after_single_product_summary‘ from my twig code.  This function calls 3 main hooks:

                     woocommerce_output_product_data_tabs
                     woocommerce_upsell_display
                     woocommerce_output_related_products

But what if this project called for a different display order (the upsell products after the related products) or in the case of this project, removing the description area from the product data tabs and displaying it under the product image so it always showed. With WooCommerce you use filters to change that:

/**
* Remove product data tab
*/
add_filter( ‘woocommerce_product_tabs’, ‘woo_remove_product_tabs’, 98 );function woo_remove_product_tabs( $tabs ) {unset( $tabs[‘description’] ); // Remove the description tab
return $tabs;
}

Using this method, you could rest assured that over 95% of any upgrades to WooCommerce would not require recoding of the template. “The path of least future resistance!”

WooCommerce has additional items to assist you with integration, such as calling the function the ‘add_woocommerce_support’ and incorporating a ‘woocommerce.php’ so you can redirect the data for single product pages and archive (category) product pages. These are the 2 template pages that have to be re-written and directed to the timber/twig template.

The problem I ran into was documentation in the open source world for doing this. (I will write about that in my next blog entry.)  There was some available, but only partial information.  There was some written, but the code threw errors with functions not written properly for PHP7. I found a couple of good guides and a couple of good templates in GitHub, but they were not complete.  Most were also too technical.

Coming from the world of Technical Support based on the end user, it is imperative that documentation on such a procedure be written step by step and in terms that a novice could understand.  I feel that is one of the most important foundations of good customer support.  Let’s face it upfront documentation that is easy to understand will save you a lot of time in the future answering questions about and supporting your code or procedure.

So, I grabbed what worked from the 4 main sources I found and put together the integration.  I also found articles on re-writing some of the WooCommerce displays such as On Sale Product Display and other product displays, that were resource hogs.  Having these functions available, allowed the project to have a home page that could incorporate a carousel or parallax and display On Sale, Top Sellers, New, and Featured Products.  (And get away from some of the boring standard store home pages.)  I even use Timber to write a “mini-cart theme”.

After the project was completed, I did get the client to agree to let me use the code to release a version of Timber Boot that incorporated the store.  I was just asked to base it on a different industry and products.  So I did that, and the demo is here:  Timber Boot Store. The end product was a fast, mobile first template for WooCommerce.  The client’s final home page loads in 4.5 seconds and incorporates a parallax showing 4 different product displays.

#WordPress #WordPress_Templates #Timber #Twig