Quark 1.2.5 and WooCommerce 2.0.14

Resolved trevor67
(@trevor67)

10 years, 7 months ago
Thank you for the excellent theme, Anthony. Not only does the theme look great, in my opinion you’ve set the standard for how to comment a theme’s PHP and CSS. It’s very easy to work with.

I’m new to WordPress, so if this question isn’t in the appropriate forum please let me know. I’ve also searched for anything Quark and WooCommerce related, and I couldn’t find anything other than your comprehensive review of the WooCommerce plugin in 2012.

I’m building an e-commerce site using Quark 1.2.5, and I’d like to use the WooCommerce plugin 2.0.14. When I activated the plugin it warned me that the theme wasn’t compatible. They linked to their documentation on how to change the hooks in a theme so that the plugin doesn’t break the style of the theme. This is the code they recommend putting in the functions.php page to unhook their wrapper (see original documentation at http://docs.woothemes.com/document/third-party-custom-theme-compatibility/):
```
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
```
Followed by this code to hook the theme’s wrappers:
```
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}
```
They say to look at our theme’s page.php to reference the correct mark-up for our theme’s ids and classes. So, looking to Quark’s page.php, I’m wondering if this is the correct edit to the code to make it work in Quark:

Change <section id=”main”> to <div id=”primary” class=”site-content row” role=”main”>

then change </section> to </div>

then put the code snippets in functions.php.

I understand this may be a question for WooCommerce, but I thought I’d ask you because I figured you’d know if the “wrapper” they’re referring to is <div id=”primary” class=”site-content row” role=”main”>…</div>.

Again, thanks for the excellent Quark theme.

Best Regards,
Trevor

Viewing 3 replies - 1 through 3 (of 3 total)

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago
Hi Trevor,

Thanks for the kind words. I’m glad you’re enjoying the theme.

To get WooCommerce to display nicely, there’s a few tweaks that you’ll need to make. Since I’m using a grid, we need to change the template files otherwise the WooCommerce wrappers end up messing our grid up.

At the bottom of header.php, add the following…
```
<div id="primary" class="site-content row" role="main">
```
At the top of footer.php add the following..
```
</div> 
<?php if ( is_front_page() ) { ?>
   <?php get_sidebar( 'front' ); ?>
<?php } ?>
```
Within the following templates, remove these two same lines, the opening and closing tags for the div (as we’ve now added them to our header and footer templates).

page-templates/front-page.php
page-templates/full-width.php
page-templates/left-sidebar.php
page-templates/post-archives.php
404.php
author.php
category.php
page.php
search.hp
single.php
tag.php

From front-page.php, also remove the following line (because this line has also been added to out footer template)
```
<?php get_sidebar( 'front' ); ?>
```
Lastly, add the following lines to functions.php to unhook the default WooCommerce wrappers and use our own.
```
/**
 * Unhook the WooCommerce Wrappers
 */
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

/**
 * Outputs the opening tag for the WooCommerce content
 */
function mytheme_woocommerce_before_main_content() {
   echo '<div class="col grid_8_of_12">';
}
add_action( 'woocommerce_before_main_content', 'mytheme_woocommerce_before_main_content', 10 );

/**
 * Outputs the closing tag for the WooCommerce content
 */
function mytheme_woocommerce_after_main_content() {
   echo '</div> ';
}
add_action( 'woocommerce_after_main_content', 'mytheme_woocommerce_after_main_content', 10 );
```
And that should do it. 🙂

(I will eventually add WooCommerce support into Quark and I’ll have to do these changes to the theme myself, but that will have to wait until I get the spare time).
Thread Starter trevor67
(@trevor67)

10 years, 7 months ago

You, Sir, are a scholar and a gentleman.

I made the edits, and wonder of wonders, my fat fingers didn’t foul up the deal. Everything works perfectly. The only oddity is that the Page Sidebar won’t display on the Shop page–which doesn’t bother me because the other three sidebars work, so there are lots of choices left.

Thank you very much, Anthony; I appreciate your efforts. I’ll send you a link to the site once it’s finished.

Regards,
Trevor

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago

Glad it’s all working for you.

Regarding the widgets/sidebars, the Shop page is actually regarded as an “Archive”, much like the blog page. It displays an archive of your your proudcts. So, the “Main Sidebar” will display as well as the “Blog Sidebar”.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Quark 1.2.5 and WooCommerce 2.0.14’ is closed to new replies.

Tags