WooCommerce isn't working with Sage 9 Beta 3

Hi guys I have been reading many discussions about using WooCommerce with Sage 9 and for some reason I can’t get it to work despite following all of the guides.

So heres what I have done:

  1. In resources/views/woocommerce I have added the files archive-product.php and single-product.php. Within these files I have added one line which is <?php echo App\Template('woocommerce'); ?>.

  2. I have then placed woocommerce.blade.php at resources/views/ with the following blade syntax in it:
    @extends('layouts.app') @section(‘content‘) @php(woocommerce_content()) @endsection

  3. Lastly I placed add_theme_support('woocommerce'); to my setup.php file.

When I visit the /shop url the page is completely blank apart from my header and footer showing. So I tried editing the archive-product.php file by placing all of the code from the WooCommerce archive-product.php file on their GitHub page. When I do this a different header and footer is pulled into the page however the page works and shows my products.

I tried just remove the <?php get_header( 'shop' ); ?> and <?php get_footer( 'shop' ); ?> from the archive-product.php view however the page just loads with no header and footer. How can I modify these default WooCommerce pages correctly?

Thanks, Nick

Hi,
I have the same problem with Buddypress. I get a blank screen with no php error…
Here is how buddypress theme compatibility works:
https://codex.buddypress.org/themes/theme-compatibility-1-7/a-quick-look-at-1-7-theme-compatibility/

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Any ideas guys? Still not managed to solve this.

It should work, double check your markup. Atleast I didn’t have any problems with beta 3 :neutral_face:

Does your file have exactly same markup as the first post?

@section(‘content‘)  should be  @section('content')
1 Like

@Eljas Silly me, it works now! Not sure how I added @section(‘content‘), think I copied it from a guide. Thanks you’re my hero! Can I just ask how I would go by making amendments to the archive-product.php view? At the moment it simply has <?php echo App\Template('woocommerce'); ?> in it? Would I just take the php template for this view from the WooCommerce plugin and copy it into my archive-product.php minus the header and footer?

Thanks

You could just add any content what you want in it. If you want to use original layout just remove get_header( 'shop' ); ?> and <?php get_footer( 'shop' ); ?> from the file since you don’t need them.

I’m not sure if the way I did my templates is the best practice or not, but I wanted to use blade templates on my layout files so I just copied all the WooCommerce’s view files (.php) that I wanted to change to the resources/views/woocommerce folder. After that I erased everything in them and added <?php echo App\Template('file_name'); ?> to them.

So now my theme overrides original WooCommerce files since WooCommerce first looks for those files from theme and if they exists it uses them. When WooCommerce uses my theme’s .php it gets the corresponding .blade files. Those blade files then defines how my site will look.

To be honest I don’t actually use <?php echo App\Template('woocommerce'); ?> anywhere in my theme. And my archive-product layout is only used for categories page, tags page and search results page. I made custom frontpage layout, which might not be the exact WC way (because now I don’t have specific ‘shop’ page and link to the shop page in wp-admin is disabled) :grin:


Here is how my archive-product looks like:
archive-product.php (resources/views/woocommerce):
<?php echo App\Template('woocommerce/archive-product');

archive-product.blade.php (resources/views/woocommerce):

@extends('layouts.base')
@section('content')
	
	{{-- Variables --}}
		@php
			global $wp_query;
			$total = $wp_query->found_posts;
			$cat = $wp_query->get_queried_object();
			$taxonomy = $cat->taxonomy;
			
			$tag_img = get_field('kuva', $taxonomy . '_' . $cat->term_id);
			$archive_img_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
			$archive_img = $tag_img ? $tag_img : wp_get_attachment_image_url( $archive_img_id, 'full' );
			
			$slider = get_field('slider_shortcode', $taxonomy . '_' . $cat->term_id);
		@endphp

	<section id="category" class="container">
		
		{{-- Category Header --}}
			<header class="header row">
				
				{{-- Category Heading --}}
					<div class="heading col s12 center-align">
						<h1>{{ woocommerce_page_title() }}</h1>
					</div>

				{{-- Category Image --}}
					<div class="image col s12">
						
						@if($slider)
							{!! do_shortcode($slider) !!}
						@else
							<img src="{!! $archive_img !!}" class="responsive-img category-img" >
						@endif

					</div>

				{{-- Category Description --}}
					<div class="desc col s12 center-align">
						{!! term_description( $cat, $taxonomy ) !!}
					</div>

				{{-- Category Product Count --}}
					<div class="count right-align col s12 right">

						<span>{{ $total }} {{ __('Products', 'textdomain') }}</span>

					</div>

				{{-- Divider --}}
					<div class="divider col s12"></div>

				{{-- Category Product Sorting --}}
					<div class="count right-align col s12 right">

						@php
							do_action( 'woocommerce_before_shop_loop' );
						@endphp

					</div>
					

			</header>
		
		@if ( have_posts() )
			
			{{-- Products --}}
				<section class="row">

					<ul class="products-in-category">

						<?php while ( have_posts() ) : the_post(); ?>
							
							{{-- Product --}}
								@include('woocommerce/content-product' )

						<?php endwhile; ?>

					</ul>

				</section>

			{{-- Pagination --}}
				@include('partials/pagination')

		@elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) )
			
			<div>
				{{ wc_get_template( 'loop/no-products-found.php' ) }}
			</div>

		@endif

	</section>

@endsection

(Btw I use materialize css and advanced custom fields in this project.)


Basically you could just pick the parts you like from the original WC template file and put the straight in the archive-product.php but I liked to customize make almost every template so I just did this to the files I liked to change and then put custom code inside the blade files.

My way is not the best way to do things but it works, and right now I haven’t found a way to get WC to look for blade files directly so I had to add both php and blade files (WC calls .php file from theme which calls .blade file).

Some of the WC template files need variables to pass in them to get different functions to work so if you run in to problems you could just add the variables in the .php file like I did for cart’s cross-sells.php:

Ex. If you use original layout for cart’s cross-sells.php but wanted to benefit blade’s structure you can:
In cross-sells.php (resources/views/woocommerce/cart)
<?php echo App\Template('woocommerce/cart/cross-sells', [ 'posts_per_page' => $posts_per_page, 'orderby' => $orderby ]); ?>


I haven’t found a way to use blade controller to pass data in my WC templates and I will keep looking for a way to directly call those blade files so I can ditch .php files from my views, but until then this is the way I got it working.

Hope this makes any sense and helps you and the others in their way to build WC themes with Sage! :slight_smile: