I've added woocommerce to my Timber starter theme

Because I've finally figured out a nice way to integrate woocommerce with timber and the online tutorials aren't really very helpful or comprehensive I've decided to add my integration to my timber starter theme and write a little tutorial about it.

The general idea for this setup is to add all the info from woocommerce to the $context, and use them in the twig templates using your own html as much as possible. The one problem I can see is that you are overriding the original woocommerce templates, so no more updates. But I don't think these templates will change much anyway.

A single product

This code is a copy of the example code in the woocommerce guide on the Timber docs. You can read more about how it works over there.

Product category or shop

This code is a copy of the example code in the woocommerce guide on the Timber docs. You can read more about how it works over there.

The cart

The first step is to create a new page in Wordpress which will act as the cart. Choose the cart template for this page, then set this page as the cart in the Woocommerce setup. This page then points to the page-cart twig file. Since the Woocommerce cart is basically a shortcode that's what I'm using here. This shortcode then looks for the default cart.php, or in our case, we're overriding the default cart.php in the woocommerce theme.

I'm using a new array which I fill with all products so I can later use them in my twig template. If you compare this file to the original cart.php you'll see I've changed the code to be able to use them later in my twig file.

Checkout

The setup here is basically the same as the cart setup. Add a page for the checkout page, use the checkout template, which points to the checkout twig file. Set this page as the checkout page in the Woocommerce setup. The shortcode looks for woocommerce/checkout/form-checkout.php. The code here is simple, and is mostly meant so we can use a more flexible html setup for the checkout page.

Thanks page

Simply remove the woocommerce/checkout/thankyou.php page if you want to use the default thank you page. I wanted to be able to control the html a little better, so I've included it in the starter theme. I'm using views/woo/thankyou.twig for this page.

This setup can probably be refined, but I like the simplicity for now.

8 Reacties

  1. I tried it, and it worked, but i didn't see a 'add to cart' function, and after i tried something, the homepage didn't show the products anymore.
  2. Hi Jan, your question is too vague to answer. It sounds like you did something wrong, which caused the homepage to stop showing the products. And I don't know what this 'add to cart' function is.
  3. I'm not sure what i did wrong, but with the 'add to cart' function i mean that there is a button on every single-product page, which allowes the customer to add that specific product to the cart. With that theme i didn't see that option
  4. Hi Jan, correct, I didn't add the code for a simple add to cart button to the theme. If you're working with Timber you're probably no noob, so it wouldn't be too difficult to add the button. I believe the code you're looking for is in wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php. Good luck!
  5. Ah! I found a add to cart form, now i think i need to do something with that 'do action' within a twig file. To make the php functionality work in the twig file.
  6. One more question. Which twig file is the shop page itself, i'm going to figure out why the products aren't looping. But don't seem to find the shop page.
  7. It's the views/woo/archive.twig file. If you want to add things to the context for this page you'll have to do that in woocommerce.php.
  8. […] De site is gebouwd met WordPress en Timber, iets waar ik verder weinig over kan zeggen. Maar ik heb voor het eerst een goede manier gevonden om Woocommerce te integreren met Timber! Daar heb ik Over de Woocommerce en Timber integratie. […]