Full width Woocommerce product pages in Pique theme

Not having access to one of the product pages, I can only reply generally. I assume you have done a display: none; on the #secondary, so what you would need to do would be to set #primary for the product pages to 100% width, and likely also set left padding to 0. I had to work off the demo site for Pique, and it does not have WC installed on it. Hopefully this gets you going. Let me know if you have any issues.

@pmbrandvold You can also download a WooCommerce-compatible version of Pique at: https://wordpress.com/theme/pique

It’s been tweaked to add full support for WooCommerce, so you might want to test out that version — there’s a download link toward the bottom of the page.

Actually I just noticed the version of Pique available for download on WordPress.com is the same as the one here on www.ads-software.com – 1.4.1.

@pmbrandvold If you need further help after looking at sacredpath’s suggestion, could you provide a link to a product page so we can take a look directly? Thanks.

I can set the #secondary to display:none, but when I try to limit it to the woocommerce pages it doesn’t take. Same with #primary to width:100%.

For example, when I do:

#secondary {
	display: none;
}

it works, but if I do:

.woocommerce-page #secondary {
       display: none;
}

it doesn’t

• This reply was modified 7 years, 1 month ago by pmbrandvold.

Okay, I’ve actually discovered if I edit the CSS in the wordpress custom css widget, I’m able to get it working using:

.woocommerce-page #primary {
	width: 100%;
}

.woocommerce-page #secondary {
	display: none;
}

However, when I add the code to my child theme’s woocommerce.css stylesheet it doesn’t work. So something must be going wrong with how my stylesheet is being imported. This is what I have listed in my functions.php

<?php
function child_styles() {

  wp_enqueue_style( pique-style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( pique-style-child, get_template_directory_uri() . '../piqueaboo/styles.css' );
  wp_enqueue_style( pique-woocommerce-style-css, get_template_directory_uri() . '/woocommerce.css' );
  wp_enqueue_style( pique-woocommerce-style-css-child, get_template_directory_uri() . '../piquaboo/woocommerce.css' );
}

add_action( 'wp_enqueue_scripts', 'child_styles' );
?>

Sounds like the parent theme stylesheet may not be getting enqueued in the right order.

I always recommend the function from the Codex, and so far haven’t heard of anyone running into trouble with it:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

No need to add specific filenames – this generic function should work for any child theme.

Do not add a closing PHP tag in functions.php.

Is there any reason you’re using three separate child-theme stylesheets? I would suggest combining them into a single one.

Thank you @zoonini that did the trick! I’ve moved everything to a single stylesheet in my child theme and used the function you provided.

Glad to hear it!