Support » Plugin: WooCommerce » Stretch woocommerce shop page

  • Resolved rchowdhury


    Hi, I have a styling question for woocommerce. I have my shop pages at 90% width. But the products appear only on the left side of the screen. How to make the thumbnails bigger and make it stretch the whole screen?

    This is my site:

    I have modified theme style.css to make it 90% wide and I have the following added to functions.php:

    * WooCommerce
    * Unhook sidebar
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
    * WooCommerce
    * Unhook/Hook the WooCommerce Wrappers
    function responsive_child_theme_setup() {
    remove_action('woocommerce_before_main_content', 'responsive_woocommerce_wrapper', 10);
    remove_action('woocommerce_after_main_content', 'responsive_woocommerce_wrapper_end', 10);
    add_action('woocommerce_before_main_content', 'responsive_child_woocommerce_wrapper', 10);
    add_action('woocommerce_after_main_content', 'responsive_child_woocommerce_wrapper_end', 10);
    function responsive_child_woocommerce_wrapper() {
    echo '<div id="content-woocommerce" class="grid col-40">';
    function responsive_child_woocommerce_wrapper_end() {
    echo '</div><!-- end of #content-woocommerce -->';
    add_action( 'after_setup_theme', 'responsive_child_theme_setup' );
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
    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>';
    add_theme_support( 'woocommerce' );
    function remove_loop_button(){
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    * add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );
    remove_action('woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author James Koster



    Depends how many products you want per row. I’m a bit confused by your set up because something is telling WooCommerce to put the first/last classes on every third product but the CSS is setting the product widths to be 22.05% which is roughly 1/4.

    If you want 4 products per row just add

    add_filter('loop_shop_columns', 'loop_columns');
    if (!function_exists('loop_columns')) {
    	function loop_columns() {
    		return 4; // 4 products per row

    To your theme functions.php file and you should be ok.

    Thanks for the reply. But the above is not working. I tried to change the return value to 2 thinking that something else is preventing it from going to 4 columns, but 2 is also not working. Kind of confused. Everything else work great. I don’t have sidebar. I even changed content-product.php with the following:

    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 2 );

    it still shows 3 columns. any more ideas? I don’t have any woocommerce directory inside the theme. what else can be over-riding the loop?

    solved it with woocommerece.css . Thanks.

    Hey rchowdhury! I am having the same problem. Would you mind sharing your solution? Thanks! Ellie

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Stretch woocommerce shop page’ is closed to new replies.