Tag Archives: woocommerce

Integrating WooCommerce Into Your Theme

I have been working on a WordPress-based website for a friend.

This endeavour has been something of a crash course into the intricacies of theme modification, PHP and style sheets. I had already started learning PHP and MySQL together, but I hadn’t got as far as style sheets. I do have a background in fiddling with programming, so I did have a bit of a comfort level – knew I could always change things back, could follow code reasonably well, could guess at what to change based on the helpful names people give things.

Skipping lots of details about messing with the Twenty Twelve and Twenty Fifteen themes, deciding on Noteskine theme, modifying that and begging the author to find out how to remove some of the functionality, I found out that WooCommerce wasn’t co-operating with my theme.

This had me stumped for weeks. I’d forced Noteskine’s footer bar to be active on all pages (something I may end up not doing on the full site – note to self: need to make decisions about that), and the background of that was not displaying, and the background for the shop content was also invisible. I’m running the Simple Full Screen Background Image plugin, so the placeholder product image was straight on a fairly detailed background, and the text was hard to see as well.

WooCommerce documentation says that their .css files are one long line, a human-readable version has the same filename but .scss is the extension.

Working from that basis, I dequeued woocommerce.css and woocommerce-layout.scss. I also copied wrapper-start.php from a WooCommerce subfolder into a theme subfolder: [theme]/woocommerce/global – that overrides the original.

I fiddled with the above, and just wasn’t seeing the results I was expecting. After lots of trying things, I thought I would start from (more or less) scratch.

Woo has built-in compatibility for WordPress’s default Twenty-named themes. I mentioned earlier that I’d messed with Twenty Twelve and Twenty Fifteen – I hadn’t achieved much by trying child themes “by the book”, I took each theme, copied it into a renamed folder, and changed the name of the theme in all the files (otherwise there would be a certain amount of clash with the original – found that out the hard way. Something couldn’t be declared twice…). This turned out to be an advantage – I could activate a butchered Twenty Fifteen. Woo wouldn’t recognise it, so then I could intentionally direct Woo to use its own code, but in my theme, not the plugin.

Telling wrapper-start.php to use Woo’s own styling for Twenty Fifteen worked. (Worked in the modified Noteskine as well, but didn’t solve the footer menu problem).

Dequeuing the style sheets from the plugin and enqueuing the .scsses (renamed to .css) in the theme, again didn’t achieve what it should have done. It’s supposed to be the same code, right? It should do the same thing?

After getting absolutely nowhere on various forums (you can probably find my posts if you search not-particularly-hard – though one forum they had me reword twice before just closing the thread), and contacting the theme author (not something I’d particularly wanted to do having already troubled him to modify his theme, and it turned out WooCommerce was outside his experience and wasn’t really the theme’s intent), I tried something I should have tried long before.

I took the original woocommerce.css and woocommerce-layout.css, and added line breaks and indentation.

They were very different to the .scss versions. Copying and modifying those (or not, to start out with), magically started yielding the kind of results I’d expected before.

Because you start wondering, “Am I enqueuing these the right way?” (I’d tried several ways). Or a more general “What am I doing wrong?”

The answer is only that the .css and the .scss aren’t (or possibly weren’t, who knows if they’ve fixed it) the same code.

If you run into the same trouble, I hope you find this blog, because I went searching high and low: I found other people with similar problems (none seemed terribly recent), but I didn’t find anyone with a solution.