WooCommerce wrapper issues in shop pages
-
I have been trying to learn how to make WooCommerce work visually with some themes I have been butchering.
I am doing all of this on a Virtual Machine.
I have been trying to get WooCommerce displaying correctly on a hacked version of the Noteskine theme. The wrapper does not display in the Shop page, I get product image and text on my background image. I hacked Noteskine so its footer sidebar shows on Pages (and so it currently does on the Shop page), with plain Woocommerce, the sidebar’s wrapper is invisible, too. If I add woocommerce.php into my theme folder, and put <?php woocommerce_content(); ?> in the divs (<div id=”primary” class=”site-content”> and <div id=”content” role=”main”>), the sidebar’s wrapper reappears but the main content wrapper does not.
I played with the unhooking and rehooking method mentioned on the “Third party / custom / non-WC theme compatibility” page, but didn’t achieve anything helpful.
As the Noteskine wrapper behaves somewhat similarly to the wrapper in TwentyFifteen, I thought it might be easier learning the fundamentals if I were to play around with this in my abandoned TwentyFifteen hack.
I believe my TwentyFifteen hack isn’t technically a child theme, I copied TwentyFifteen into another folder, and replaced all instances of the text “twentyfifteen” with “nass” (that theme’s name).
I copied “wrapper-start.php” into nass/woocommerce/global.
In the switch($template) section, I added “case ‘nass’:”, I copied the code from “case ‘twentyfifteen'”, and that worked fine.
Good first start.
I copied woocommerce-layout.scss from the plugins folder into nass/css, and renamed it wc-style.css
I left the main chunk alone, deleted the “Twenty Fourteen specific styles” section, replaces all “twentyfifteen” with “nass”, and “t15wc” with “nasswc”.
In wrapper-start.php I changed the code in “case ‘nass'” similarly, “content-area twentyfifteen” becoming “content-area nass”, and “site-main t15wc” to “site-main nasswc”.I’ve seen the documentation posted in various different places about dequeueing WC’s styles, I found this page:
https://alexis.nomine.fr/en/blog/2014/02/21/bit-responsiveness-woocommerce-2-1-default-stylesheet/
which says how to add your own style to the queue.
This is how the code is:add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' ); function jk_dequeue_styles ( $styles ) { unset ( $styles['woocommerce-layout'] ); $styles['woocommerce-layout'] = array( 'src' => get_template_directory_uri() . '/css/wc-style.css', 'deps' => '', 'version' => '', 'media' => 'all' ); return $styles;
(I did try ‘1.0.0’ in the version, deleting it was just a stab in the dark. I’ve also tried both “get_template_directory_uri” and “get_stylesheet_directory_uri”).
I have not managed to get the wrapper showing using this method.
Giving it a go again in the Noteskine mod, if I have woocommerce.php in my theme, I get the wrapper for the footer sidebar. If I don’t, I can turn the footer off using is_shop, and have the wrapper for the products by changing “default in wrapper-start.php” to “echo ‘<div id=”primary” role=”main” class=”main-content twentyfifteen”><div id=”main” class=”site-main t15wc”>;
Attempted to change the “twentyfifteen” and “t15” to “nass” and put the modded woocommerce-layout/wc-style code (just the “NASS specific styles” section) into the theme’s main style.php, and ran that without woocommerce.php in the theme’s folder, didn’t work.
It would not be the end of the world if the shop ended up in different divs to the rest of the site, it’s been suggested that perhaps the shop could look a little different (as long as we can modify the look to prettify it without hacking the plugin files directly, of course), on the other hand it wouldn’t be terrible either if it looked the same as the rest of the site.
Please could someone help me understand this, and point out any mistakes in my code. Alternatively, just telling me what code to put where in the Noteskine theme would be helpful.
Thanks!
- The topic ‘WooCommerce wrapper issues in shop pages’ is closed to new replies.