WordPress.org

Forums

WooCommerce
[resolved] Stretch woocommerce shop page (5 posts)

  1. rchowdhury
    Member
    Posted 3 years ago #

    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: http://www.frameit.in/shop/

    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_action('init','remove_loop_button');
    
    /*
    * 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 );
    
    ?>

    http://wordpress.org/extend/plugins/woocommerce/

  2. James Koster
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    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.

  3. rchowdhury
    Member
    Posted 3 years ago #

    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?

  4. rchowdhury
    Member
    Posted 3 years ago #

    solved it with woocommerece.css . Thanks.

  5. elliepetrov
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.