# Any working example of Sage 9 latest (Sage 9.0.0-beta.4+) with WooCommerce (3.1.1+)?

**URL:** https://discourse.roots.io/t/any-working-example-of-sage-9-latest-sage-9-0-0-beta-4-with-woocommerce-3-1-1/10099
**Category:** sage
**Tags:** woocommerce, sage9, blade
**Created:** 2017-07-29T19:35:05Z
**Posts:** 38

## Post 1 by @arthurkirkosa — 2017-07-29T19:35:05Z

I’ve been trying every example on the forum without much luck.

Some of the examples duplicate the woocommerce content over and over again (in my case), some just don’t work.

I’ve ended with a setup that seams to work, but not sure how to overwrite additional files from woo.

```
// app/setup.php
add_theme_support('woocommerce');
```

```
// app/woocommerce.php
<?php

namespace App;

/**
 * WooCommerce Support
 */
add_filter('woocommerce_template_loader_files', function ($search_files, $default_file) {
    return filter_templates(array_merge($search_files, [$default_file, 'woocommerce']));
}, 100, 2);

add_filter('woocommerce_locate_template', function ($template, $template_name, $template_path) {
    $theme_template = locate_template("{$template_path}{$template_name}");

    return $theme_template ? template_path($theme_template) : $template;
}, 100, 3);

add_filter('wc_get_template_part', function ($template, $slug, $name) {
    $theme_template = locate_template(["woocommerce/{$slug}-{$name}", "woocommerce/${name}"]);

    return $theme_template ? template_path($theme_template) : $template;
}, 100, 3);
```

```
// resources/functions.php

array_map(function ($file) use ($sage_error) {
    $file = "../app/{$file}.php";
    if (!locate_template($file, true, true)) {
        $sage_error(sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file), 'File not found');
    }
}, ['helpers', 'setup', 'filters', 'admin', 'woocommerce']);
```

### All from [https://github.com/roots/sage/pull/1923](https://github.com/roots/sage/pull/1923)

```
// resources/views/woocommerce/archive-product.php

<?php echo App\Template('woocommerce');
```

```
// resources/views/woocommerce.blade.php

@extends ('layouts.app')

@section ('content')
@php (woocommerce_content())
@stop
```

Does anyone have a better setup?  
Can I make any improvements to the current setup?

---

## Post 2 by @nitradesign — 2017-09-08T15:24:14Z

It took me a lot of messing around to get this working for me with Sage 9.0.0-beta.4

Put the following in /resources/views/woocommerce.blade.php

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

But then the thing that worked for me was putting archive-single.php and single-product.php in **/resources/woocommerce/** (you need to create the woocommerce folder) instead of putting them in /resources/views/woocommerce/

Both these files have the following content:

```
<?php echo App\Template('woocommerce');
```

Appears to be working without errors at the moment.

---

## Post 3 by @JulienMelissas — 2017-11-19T20:57:49Z

This works great! Thanks!!

---

## Post 4 by @Paolo_Cargnin — 2018-02-12T10:18:11Z

Hi,  
With this method, the variation doesn’t seems to work (the price isn’t updated and all the hook aren’t called).

But I mixed up this solution whit the @indrek-k one on github that you find here.  
[https://github.com/roots/sage/issues/1807#issuecomment-273543163](https://github.com/roots/sage/issues/1807#issuecomment-273543163),

adding this filters, you’ll be able to load .blade.php files for each template in the woocommerce plugin folder. Btw you won’t be able to load the _single-product.php_ and the _archive-product.php_ files.

So I just uses both solutions but instead of your content, in the resources/single-product.php file and resources/the archive-product.php I put this content:  
**single-product.php:**

```
<?php echo App\Template('single-product');
```

**archive-product.php:**

```
<?php echo App\Template('archive-product');
```

**Then** i added the _single-product.blade.php_ and the _archive-product.blade.php_  
And, finally, I converted that file in a blade way :slight_smile:  
@extends(‘layouts.app’)  
@section(‘content’)\<?php if ( ! defined( ‘ABSPATH’ ) ) exit;  
?\>\<?php do\_action( ‘woocommerce\_before\_main\_content’ )  
?\>\<?php while ( have\_posts() ) : the\_post(); ?\>  
\<?php wc\_get\_template\_part( 'content', 'single-product' ); ?\>  
\<?php endwhile; // end of the loop. ?\>  
\<?php do\_action( 'woocommerce\_after\_main\_content' )?\>  
\<?php do\_action( 'woocommerce\_sidebar' )?\>  
@endsection

**Plus, I suggest to add the comments in the resources/woocommerce/single-product.php** so woocommerce will be able to detect if your template is outdated with the new versions

Actually I think this is too much work to let woocommerce files work on Sage, but I don’t know how it could be better, i’m thinking on buildin a woocommerce-sage theme. Does it will be helpful?

---

## Post 5 by @Twansparant — 2018-02-12T14:34:40Z

Some clear documentation about integrating Woocommerce with Sage 9 would be very very useful indeed!

---

## Post 6 by @hambos22 — 2018-02-23T15:15:50Z

After many trials and 5 ecommerce projects with sage, I decided to make my own fork of Sage 9, out of the box intergraded with Woocommerce and with endless boilerplate code ready. You can [find it here](https://github.com/hambos22/sage-woo) with full documentation and features.

---

## Post 7 by @Twansparant — 2018-02-23T15:49:02Z

Wow! Thanks @hambos22!

---

## Post 8 by @MWDelaney — 2018-02-23T15:58:59Z

I wonder if there’s a way to make just the WooCommerce part into a Composer package that could be optionally included in a Sage project. I don’t know if Composer can “fake” files into specific directories…

---

## Post 9 by @hambos22 — 2018-02-23T16:07:40Z

I thought of making it as a Composer package but the obstacle is the woocommerce templates directory. Files inside are depended on the SageWoo class (eg the function which alters the woocommerce hard coded billing forms, is being used inside blade templates), so I preferred to start it as a boilerplate for much more flexibility.

---

## Post 10 by @MWDelaney — 2018-02-23T16:09:14Z

Well, you could probably autoload that class as part of the Composer package, too. But yeah, I feel you.

---

## Post 11 by @hambos22 — 2018-02-23T16:19:49Z

Yeah but this boilerplate has no meaning without the blade files :confused:. I’m thinking the woo overrides as the 60-70% of the work for every woo project. Otherwise, it would be bundled with the YAML features only and then you couldn’t avoid all the woo front end hassle.

I’ll try to keep the fork updated with the upstream (I’m using [backstroke.co](http://backstroke.co) for making it easier). Also I tried to separate it as much possible from Sage’s app files (only some helpers and such are being used).

---

## Post 12 by @MWDelaney — 2018-02-23T16:29:03Z

Thanks for doing this. It’s incredibly helpful for anyone trying to integrate the two.

I’ve been on the lookout for a way to easily add plugin support for more ornery plugins (WooCommerce, The Events Calendar). If I come across an easier way to sort of “overlay” blades and classes with Composer I’ll let you know!

---

## Post 13 by @hambos22 — 2018-02-23T16:37:11Z

That would be great, thanks!

---

## Post 14 by @Twansparant — 2018-02-23T19:00:35Z

Yes very helpful indeed, it was quit the hasle to integrate it into Sage 9 and the blade templates.  
Thanks a lot!

---

## Post 16 by @minimallinux — 2018-03-05T08:00:35Z

Thanks, hambos22, that saves a lot of pain!

---

## Post 17 by @minimallinux — 2018-03-05T08:20:47Z

Hi, hambos, what is the best way to remove Bootstrap form your git clone (Woocommerce) ? Many Thanks

---

## Post 18 by @minimallinux — 2018-03-05T08:36:26Z

Hi, Hambos, I am getting error about soberwp ( ! )  
Fatal error: Uncaught ReflectionException: Class App\Controllers\app does not exist in /var/www/vhost4.com/wordpress/wp-content/themes/sage-woo/vendor/soberwp/controller/src/Loader.php on line 119

Any tips at all? Thanks

---

## Post 19 by @hambos22 — 2018-03-05T10:17:23Z

Hi! This was a controller [issue](https://github.com/soberwp/controller/issues/66). Go to `composer.json` file and change this line

```
"autoload": {
    "psr-4": {
      "App\\": "app/",
    }
  },
```

to

```
"autoload": {
    "psr-4": {
      "App\\": "app/",
      "App\\Controllers\\":"app/controllers/"
    }
  },
```

after that do a `composer dump-autoload`

As for removing Bootstrap, its a lot of SCSS and markup work. First remove bootstrap from package.json. Then add your framework (or not). The SCSS files are using classes and mixins from bootstrap so you must delete or modify them incrementally. Finally change the markup on blade files to suit your needs. Much of the markup uses Bootstrap classes and its tightly coupled with the current design.

Anyway be ready for many scss errors and breaks on design. I was anti-bootstrap too but after the 4v I changed my mind. The markup is minimal, its flexible because of the SCSS and its much safer than foundation which I used to work (foundation has default styling right to the element without classes, on Bootstrap you need to add a class).

---

## Post 20 by @Twansparant — 2018-03-05T10:48:58Z

Thanks again @hambos22, this really helped me a lot!

This snippet might be a nice addition to lower the amount of http requests on non-woocommerce pages:

```
// dequeue wc scripts & styles on non-woocommerce pages
public function manageWoocommerceStyles() {
	// remove generator meta tag
	remove_action('wp_head', array($GLOBALS['woocommerce'], 'generator'));

	// first check that woo exists to prevent fatal errors
	if (function_exists('is_woocommerce')) {
		// dequeue scripts and styles
		if (!is_woocommerce() && !is_cart() && !is_checkout()) {
			# WooCommerce Styles
			wp_dequeue_style('woocommerce-general');
			wp_dequeue_style('woocommerce-layout');
			wp_dequeue_style('woocommerce-smallscreen');
			wp_dequeue_style('woocommerce_frontend_styles');
			wp_dequeue_style('woocommerce_fancybox_styles');
			wp_dequeue_style('woocommerce_chosen_styles');
			wp_dequeue_style('woocommerce_prettyPhoto_css');
			# WooCommerce Scripts
			wp_dequeue_script('wc_price_slider');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-add-to-cart');
			wp_dequeue_script('wc-cart-fragments');
			wp_dequeue_script('wc-checkout');
			wp_dequeue_script('wc-add-to-cart-variation');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-cart');
			wp_dequeue_script('wc-chosen');
			wp_dequeue_script('woocommerce');
			wp_dequeue_script('prettyPhoto');
			wp_dequeue_script('prettyPhoto-init');
			wp_dequeue_script('jquery-blockui');
			wp_dequeue_script('jquery-placeholder');
			wp_dequeue_script('fancybox');
			wp_dequeue_script('jqueryui');
			# WooCommerce Multilingal scripts
			wp_dequeue_script('wcml-front-scripts');
			wp_dequeue_script('cart-widget');
		}
	}
}
add_action('wp_enqueue_scripts', 'manageWoocommerceStyles', 99);
```

And this one to add support for the default product gallery zoom, lightbox & slider functionalities:

```
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');
```

Cheers!

---

## Post 21 by @hambos22 — 2018-03-05T11:15:32Z

I’m happy that it helped you!

As for the scripts I’ve already included something for dequeueing scripts as you can see in the docs. But not conditionally. I believe this is developer’s choice. But I’ll add for sure the second snippet :slight_smile: Thanks

PS  
I’m not using the default woo slider and zoom. I made up my own plugin for this, using Slick and jQuery zoom, with multiple variation images support, lazy loading and [lightgallery](http://sachinchoolur.github.io/lightGallery/) for lightbox. Much more flexible than the default one. I’ll open source it someday

---

## Post 22 by @minimallinux — 2018-03-05T20:00:54Z

Hi, Hambos, great Ill do a Bootstrap 4 version, (you are right its OK anyway) and a vanilla one, Is there a Navwalker in it ? Thanks

---

## Post 23 by @hambos22 — 2018-03-06T12:42:27Z

Νο I didn’t include one. I’ve used extends via scss.

---

## Post 25 by @Twansparant — 2018-04-04T14:44:10Z

Hi again,

I just wanted to try out your option to use radio buttons for the product options in variable products.  
As your documentation states:

### Radio for product options in variable products!

To enable it

```
single_product:
	radio_variations:
		- slug
		- slug
```

I presumed the `- slug` should be your product attribute right?  
So for example if I have 2 product attributes **color** and **size** , I would have to add the slugs like this?

```
single_product:
	radio_variations:
		- pa_color
		- pa_size
```

Unfortunately that is not working, am I missing something?  
What exactly should the slug be here?

Thanks!

**EDIT** : Got it, it obviously had to be:

```
single_product:
	radio_variations:
		- color
		- size
```

---

## Post 26 by @dmill — 2018-04-13T01:57:27Z

@hambos22

In the current documentation, it mentions that the Bootstrap initialisation has been disabled. If I need bootstrap to be included and initialized how do I do that?

---

## Post 27 by @hambos22 — 2018-04-13T11:21:31Z

Hi

It’s already included. In the docs, I mean that I disabled the choice to initialise frameworks (bootstrap, foundation etc) to protect scss from breaking.

---

## Post 28 by @dmill — 2018-04-13T21:28:11Z

@hambos22 Awesome, thanks for all the amazing work, huge time saver!

---

## Post 29 by @jakus — 2018-05-29T23:34:27Z

How were these problems not thought of before shifting Sage to Blade templating?

The fact that this is such a mess seems like a major oversight in the rush to make Sage as ‘_modern_’ as possible.

Pretty frustrating - particularly the lack of response from those officially involved.

Why is there no guidance in the (_paid_) docs or at least a Blog post like there was for the original Sage versions?

@ben @swalkinshaw

---

## Post 30 by @knowler — 2018-05-29T23:52:17Z

This is open source. Feel free to help out. :slight_smile:

Demonstrating a sense of ownership rather than entitlement is a greater motivator for everyone involved.

---

## Post 31 by @jakus — 2018-05-29T23:56:42Z

Thanks, but this is nothing to do with entitlement. It doesn’t diminish how much I appreciate the Sage theme and the entire Roots project.

But for me this is about the importance of releasing something that’s production ready and commercially viable… As I say, not allowing for or planning an easy WooCommerce integration seems like a huge oversight.

We’re seriously considering rolling back to 8.4.2 at this rate.

---

## Post 32 by @ben — 2018-05-30T14:47:38Z

> [@jakus](#):
>
> How were these problems not thought of before shifting Sage to Blade templating?

What problems?

> [@jakus](#):
>
> The fact that this is such a mess seems like a major oversight in the rush to make Sage as ‘ _modern_ ’ as possible.

How come Sage is at fault here?

> [@jakus](#):
>
> Pretty frustrating - particularly the lack of response from those officially involved.

Not sure what you’re looking for here

> [@jakus](#):
>
> Why is there no guidance in the ( _paid_ ) docs or at least a Blog post like there was for the original Sage versions?
> 
> @benword @swalkinshaw

Look, clearly you’re having trouble with integrating WooCommerce with Sage. What’s not cool is how you’re expecting everything to be a certain way… maybe try and remember that this is open-source software?

You’ve done a whole lot of complaining without mentioning any specific issues.

> [@jakus](#):
>
> Thanks, but this is nothing to do with entitlement.

Sure looks that way.

> [@jakus](#):
>
> We’re seriously considering rolling back to 8.4.2 at this rate.

Seriously still waiting for you to mention any sort of specific issue.

---

## Post 33 by @MWDelaney — 2018-05-30T14:55:42Z

What, specifically, doesn’t work? Have you reviewed the other threads addressing Woo integration? Others are having good luck integrating the two. Where are you getting stuck? Is there an error you can share?

---

## Post 34 by @jakus — 2018-05-30T23:40:14Z

> [@Paolo_Cargnin](#):
>
> Actually I think this is too much work to let woocommerce files work on Sage, but I don’t know how it could be better, i’m thinking on buildin a woocommerce-sage theme. Does it will be helpful?

> [@Twansparant](#):
>
> Some clear documentation about integrating Woocommerce with Sage 9 would be very very useful indeed!

> [@Twansparant](#):
>
> … it was quite the hassle to integrate it into Sage 9 and the blade templates. Thanks a lot!

I have checked other threads regarding Woo integration, there is a common thread of frustration. The fact that a completely seperate theme has been created to easily facilitate the integration seems to highlight a problem?

Lack of Woo Blade template support, duplicate content occurrences, inconsistent information on where to place template override files. I can see that the frustration stems from the lack of support offered by the Roots team.

Why isn’t there a single source of truth or resource that describes where to place these files or integrate efficiently? Surely asking for consistency shouldn’t result in being labeled ‘entitled.’

I feel like there’s a lack of compassion and air of superiority that is conveyed by some which really isn’t helpful.

Anyway, in the meantime I’ll give the completely seperate 3rd party theme a try I guess.

---

## Post 35 by @MWDelaney — 2018-05-30T23:58:15Z

There are several popular plugins that don’t work well with Sage 9. It’s not the best tool for every project depending on your plugin needs, however working with Woo is definitely possible and has been accomplished by many users.

You are continuing to express frustration with the process, but you’ve yet to explain where and how you are getting stuck. Have you tried the methods in the other threads, despite the fact there might be a couple of different suggestions for where to place the templates? Did you receive an error we could see and help troubleshoot?

The Roots team and the volunteer forum support crew are here to help with Roots products. We’re enthusiastic and eager to assist with these tools we feel make WordPress development easier and better. Unfortunately the Roots team cannot anticipate all users’ plugin needs and as such some plugins, even popular ones, are not yet canonically documented. If you are able to determine a best practice for working with Woo, I’m sure the team would appreciate an article submitted for the Guides section of the site.

---

## Post 36 by @ibanlopez — 2018-07-12T15:02:19Z

Thanks a lot @hambos22, I really appreciate your work and effort!! Thanks again.

---

## Post 38 by @nitradesign — 2018-08-14T17:02:48Z

Quick Update for anyone looking for the quick fix I mentioned above.

If you are using the latest version of WooCommerce (currently **3.4.4** ) you need to rename:

`/resources/woocommerce/archive-single.php`

to

`/resources/woocommerce/archive-product.php`

WooCommerce has renamed this file so we need to as well to ensure we override it.

I would edit my previous answer if I could.

Just spent ages trying to get this to work and wrongly assumed it was the updated version of Sage (currently 9.0.1).