# Woocommerce & Blade (Sage 9)

**URL:** https://discourse.roots.io/t/woocommerce-blade-sage-9/8449
**Category:** sage
**Created:** 2017-01-03T03:46:10Z
**Posts:** 27

## Post 1 by @masoninthesis — 2017-01-03T03:46:10Z

Hey guys,

[Great article on Sage and Woocommerce](https://roots.io/using-woocommerce-with-sage/) by @chriscarr , but I think it’s probably outdated for Sage 9.

Here’s two ( [1](https://discourse.roots.io/t/sage-9-woocommerce/7108), [2](https://discourse.roots.io/t/single-template-filter-from-plugins/6637))discussions on Woocommerce and Sage 9.

It seems these issues were resolved by @QWp6t’s [Sage-9 fix](https://github.com/roots/sage/commit/4435d52d01e1598f0bf2f4b7c27feda5c8060412) back in July.

But I’m getting errors on my product pages, and I’m assuming it has to do with the new Blade integration?

I’ve done 3 steps (other than installing/activating woocommerce):

1. Created `archive-product.php` and `single-product.php` in theme root with `<?php woocommerce_content(); ?>`
2. Added theme support in `sage/src/setup.php` with `add_theme_support('woocommerce');`

These got rid of some errors, but not all. Here’s the remaining errors:

[Warning: A non-numeric value encountered #1](https://gist.github.com/masoninthesis/459d20df576bb9531b30f47c75f1caa5)

[Warning: A non-numeric value encountered #2](https://gist.github.com/masoninthesis/2de764017e8aa2564442d485f1937087)

[Warning: A non-numeric value encountered #3](https://gist.github.com/masoninthesis/0f3b0966b3dd74f55d39f29440aaab2b)

_\*the first 2 show up in xdebug formatted correctly, the 3rd one has broken styles (which is why it’s in a single line)_

I’m going to play around with adding some hooks meanwhile. [Here’s the repo](https://github.com/masoninthesis/lyps_v1.1), but other than the changes I listed, it’s pretty much just default Sage 9. Any tips would be awesome, thanks!

---

## Post 2 by @QWp6t — 2017-01-03T05:11:24Z

> **[Third party / custom / non-WC theme compatibility - WooCommerce Docs](https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/)**
>
> For the most part, WooCommerce templates will integrate nicely with most WordPress themes. Where you may run into issues when the default WooCommerce content wrappers do not match your chosen theme. This manifests itself by breaking your layout on...

[![](http://i.imgur.com/CuFZuDa.png) ](http://i.imgur.com/CuFZuDa.png)

---

## Post 3 by @masoninthesis — 2017-01-03T20:28:54Z

Hey thanks for the response @QWp6t!

I read over that while setting it up, but I’m still trying to familiarize myself with Blade, so I got confused on the Blade specifics (and from what I saw, there’s no results on Google for Blade/Woocommerce– which makes sense).

I’ve updated the repo. Here’s what I tried:

- Placing `woocommerce.php` in the theme root with the WC loop `<?php woocommerce_content(); ?>`
- Placing `woocommerce.blade.php` in `sage/templates` with Blade syntax of WC loop `@php(woocommerce_content())`

I also tried a variation of things in `woocommerce.blade.php` such as:

`@extends('layouts.base') @section('content') @php(woocommerce_content()) @endsection`

I could very well be getting the syntax or file structure wrong since the instructions apply to non-Blade themes. Any ideas?

---

## Post 4 by @kalenjohnson — 2017-01-04T21:53:50Z

Hey @masoninthesis, so this will work… eventually. I [made a PR](https://github.com/woocommerce/woocommerce/pull/12510) to allow filtering for the woocommerce.php file, and it was accepted, but it doesn’t look like it was part of the 2.6.\* releases, but it is part of the 2.7 beta. If you can pull in that beta, that would allow you to use the `woocommerce.blade.php` file.

Otherwise, you can override the templates with Blade templates.

---

## Post 5 by @masoninthesis — 2017-01-04T23:23:31Z

Awesome, thanks for the info @kalenjohnson!

I’ll definitely try the 2.7 beta out ([Release 2.7.0 Beta 1 · woocommerce/woocommerce · GitHub](https://github.com/woocommerce/woocommerce/releases/tag/2.7.0-beta-1)). I’ll report back how/if that works.

> [@kalenjohnson](#):
>
> Otherwise, you can override the templates with Blade templates.

Not quite sure how that is done. Isn’t that the same as what I’d be trying using the 2.7 beta? Thanks!

---

## Post 6 by @kalenjohnson — 2017-01-05T00:15:41Z

Well it seems like I was mistaken. I forgot how Woocommerce checks for template files. So basically… the `woocommerce.php` fix will be best :smiley:

---

## Post 7 by @masoninthesis — 2017-01-05T02:21:31Z

Installed woocommerce 2.7.0 beta, and it’s fixed!.. Well sort of. PHP errors are gone now. But the shop and products pages don’t seem to be wrapped properly. The head is actually completely empty, so it’s missing all stylesheets.

Might this be related to the fact that when I add `sage/woocommerce.php`, it overrides `woocommerce/woocommerce.php`, but `sage/templates/woocommerce.blade.php` doesn’t have any effect?

Everything else is working.

If anyone wants to save time installing 2.7.0 Beta w/ Composer, you can use my git repo:

`git@github.com:masoninthesis/woocommerce.git`

And to clarify for any future-comers, here’s the steps required for it to work for me w/ Sage 9:

1. Create `archive-product.php` and `single-product.php` in theme root with `<?php woocommerce_content(); ?>`
2. Create `woocommerce.php` in theme root with WC loop `<?php woocommerce_content(); ?>`

---

## Post 8 by @Eljas — 2017-01-10T08:13:40Z

Hey @kalenjohnson

How do I override Woocommerce template files with my theme’s blade files?

Now I’m overriding those by adding .php file (not blade file) inside templates folder. But this way it won’t load my base layout at all.

All I would need is to override archive-products.php and single-product.php with my own blade files inside theme/templates folder.

---

## Post 9 by @Eljas — 2017-01-12T15:09:49Z

@emilsgulbis posted a way to use blade templates for WooCommerce. ([https://github.com/roots/sage/issues/1807](https://github.com/roots/sage/issues/1807) ).

> …you should create 2 files in templates/woocommerce - archive-product.php and single-product.php and add only
> 
> \<?php echo App\Template('woocommerce'); to them. Then in templates/woocommerce add woocommerce.blade.php that contains @extends('layouts.base') @section('content') @php(woocommerce\_content()) @endsection

The only thing I did different was to place `woocommerce.blade.php` file inside _theme/template_ folder instead of _theme/template/woocommerce_.

---

## Post 10 by @nacm — 2017-01-13T06:18:48Z

This works for me. I have also placed woocommerce.blade.php out side the woocommerce folder, but inside the templates folder/

---

## Post 11 by @vdrnn — 2017-04-27T07:02:11Z

Did anyone of you guys figure out how to access variables from the controller in your woocommerce templates?  
I posted another topic here [Controller and WooCommerce](https://discourse.roots.io/t/controller-and-woocommerce/9469/2) where @kalenjohnson explained that the problem is that the template files are not blade templates, and the controller only works with blade templates.

Did anyone stumble upon the same issue?

---

## Post 12 by @p3f — 2018-04-06T17:40:57Z

Hey Guys, I’m trying to do the same with latest Sage 9 release but it doesn’t work with blade templates.

The “normal override” works (woocommerce/archive-product.php) though I have no base layout so it’s not really an option. I did try many solutions (they all date from 2017 in alpha of beta version) to have woocommerce.blade.php, but without success.

Here’s what I tried so far:  
The above solution from Eljas

> <https://github.com/soberwp/controller/issues/16>

  

> <https://github.com/roots/sage/pull/1923>

  
[https://roots.io/using-woocommerce-with-sage/](https://roots.io/using-woocommerce-with-sage/) (from sage 8)

Does anyone have a solution for this?

Thank you!

---

## Post 13 by @Twansparant — 2018-04-06T17:46:23Z

I would highly recommend @hambos22 **sage 9 fork** for integrating WooCommerce with Sage 9 and Blade: [https://github.com/hambos22/sage-woo](https://github.com/hambos22/sage-woo)

---

## Post 14 by @joshb — 2018-05-04T20:02:23Z

I am bringing this thread back to life as I’ve searched and experimented with nearly every option I’ve discovered in this discourse to be able to override template files with Sage 9 but no luck.

Has anyone found an easy solution to this yet? I don’t exactly want to start over using that fork.

---

## Post 15 by @KimH — 2018-05-05T20:47:50Z

I made a composer package out of the solution I used on some projects I did a while ago. Feel free to test it out. Have not had time to test it out on a fresh Sage 9 project. Not sure I like that the package looks everywhere for templates anymore, but the original idea was that woocommerce templates should work just like other templates, and that I also could put templates in a plugin.

[https://packagist.org/packages/kimhf/sage-woocommerce-support](https://packagist.org/packages/kimhf/sage-woocommerce-support)

---

## Post 16 by @joshb — 2018-05-07T20:11:50Z

Thank you for providing this.

It appears to install perfectly. I haven’t had a lot of time to play with it yet but upon initial installation it appears to duplicate the header of a single-product page and completely removes everything else related to WooCommerce.

Here are a couple files I created as you mentioned in the docs but modifying the files presents no change to the single product pages:

 ![image](https://discourse.roots.io/uploads/default/original/2X/a/a468dc9209ce75ca8f0f41cb615c81e97241ac97.png)

---

## Post 17 by @joshb — 2018-05-07T20:43:13Z

Always speaking too soon…  
Once I start putting together my own partials for WooCommerce the pages start coming together.

I was under the assumption that the standard WooCommerce pages would appear as default out of the box until I started overwriting them with my own template overrides.

---

## Post 18 by @KimH — 2018-05-07T21:20:19Z

If you start out with something like this in single-product.blade.php

```
@php
/**
 * The Template for displaying all single products
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @version 1.6.4
 */
@endphp

@extends('layouts.app')

@section('content')
    @php
		/**
		 * woocommerce_before_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action( 'woocommerce_before_main_content' );
    @endphp

    @while ( have_posts() )
      @php
      the_post();
      wc_get_template_part( 'content', 'single-product' );
      @endphp
    @endwhile

    @php
		/**
		 * woocommerce_after_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
		 */
		do_action( 'woocommerce_after_main_content' );
    @endphp

    @php
		/**
		 * woocommerce_sidebar hook.
		 *
		 * @hooked woocommerce_get_sidebar - 10
		 */
		do_action( 'woocommerce_sidebar' );
    @endphp
@endsection
```

then it should definitely load the default woocommerce templates, but without the duplicate header that get\_header( ‘shop’ ); caused in the default single-product.php

---

## Post 19 by @joshb — 2018-05-22T20:11:28Z

@KimH

Have you had any luck with comments as reviews for WooCommerce with Sage 9?

I’m able to display this at the top of product pages:  
 ![image](https://discourse.roots.io/uploads/default/original/2X/7/7534569f02c3cdcaef2a885c092bd7e28a499047.png)

But the area lower on the product page where it displays the 7 reviews displays them as comments and the comment/review form doesn’t give the option to choose a star rating when adding a review. (The stars exist because this is previous site being revamped).

I have all the options turned on in WooCommerce and WP to allow comments and reviews.

I can’t find much info on this. If you have any ideas that would be great.

---

## Post 20 by @joshb — 2018-05-29T20:27:31Z

Still having trouble with this. Anybody have any helpful tips?

---

## Post 21 by @Twansparant — 2018-05-29T20:41:04Z

> [@joshb](#):
>
> Anybody have any helpful tips?

Does it display 12345 instead of the stars? Then you can style it to stars!

---

## Post 22 by @joshb — 2018-05-29T20:59:28Z

No, no.

I have everything enabled to activate reviews. At the top of the single product pages I see the review rating and the amount of reviews:

![image](https://discourse.roots.io/uploads/default/original/2X/3/3d6b97eb964e683a0834cebb19902b1ae9548c3a.png)

Lower on the page where you would normally leave a review is set to leave a comment:

 ![image](https://discourse.roots.io/uploads/default/original/2X/1/1dbf7831852de537569a440106fa835e87fe7f66.png)

In the past and with other themes this comment section would turn into a reviews section allowing for users to give a rating and leave a review.

I can’t figure out how to change this within Sage to have it use WooCommerce reviews instead of WordPress comments.

---

## Post 23 by @MWDelaney — 2018-05-29T21:42:45Z

This is a long shot but depending on how old your copy of Sage is, you could be running into [this problem](https://github.com/roots/sage/issues/1857) where poorly written plugin styles aren’t enqueued properly.

You could check if your copy of Sage includes [these commits](https://github.com/roots/sage/pull/1949).

---

## Post 24 by @joshb — 2018-05-29T21:55:59Z

Thanks for the response. I don’t believe that’s the issue here. I’m all up to date on the theme. WooCommerce is working great. The review star ratings are appearing everywhere they should. It’s just that the comments area for single products are just that… comments. They’re not being transformed to reviews like I’m use to in the past.

---

## Post 25 by @joshb — 2018-05-29T22:09:06Z

Something I just discovered:

If I copy the code from “single-product-reviews.php” from the WooCommerce plugin directory and replace the code in the “comments.blade.php” then I see the following (after a bunch of debug errors):

 ![image](https://discourse.roots.io/uploads/default/original/2X/c/c950c09a0c201585e30b9b6d0cfae2c1053707c0.png)

Please excuse my lack for the correct terms but it appears Sage is not setup to allow WooCommerce reviews to override the default WordPress comments?

---

## Post 26 by @joshb — 2018-05-29T22:17:03Z

So now my Sage9 ‘comments.blade.php’ file looks like this:

> **[@phpif (post_password_required()) { return;}@endphp](https://pastebin.com/nybQJ4kj)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

I know there must be a better way of doing this but this is working for me for now.  
It returns the results fine like this:

 ![image](https://discourse.roots.io/uploads/default/original/2X/c/cfa0a865fa5160b5f96700c520bd1f97bb17f54b.jpg)

---

## Post 27 by @Twansparant — 2018-05-30T07:09:19Z

> [@joshb](#):
>
> So now my Sage9 ‘comments.blade.php’ file looks like this:

Jup, that seems right. I think that’s how mine looks!