• 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:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Don’t use blockquote, it messes up the formatting. ]

    /**
     * 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 );
    
    ?>

The topic ‘Stretch woocommerce shop page’ is closed to new replies.