About this:

If the width of your layout is set you might want to consider making your sidebar for the shop smaller or wider depending on your content. This is a rather easy change but you will need to be careful not to make typos. It’s recommended to read through the requirements and explanation if this is your first time.

Requirements

There are multiple ways to make these edits. Most of them are good too but these requirements are free and will be a great help to make changes to templates and more.

  • FileZilla for transferring files. Download FileZilla
    You will need FTP details  from your hosting to connect. If you don’t want to use FileZilla/FTP, your file manager in hosting panel will do just fine.
  • Visual Studio Code* for editing files. Download Visual Studio Code
    Any other file editor will work, or even notepad. A code editor is only there to make it more readable for us.
    * = Not to be confused with Visual Studio
  • Flatsome Child Theme*
    * = Don’t have a child theme installed? Read this

Explaining the child theme

Why a Child Theme?

A Child Theme is a fundamental part of editing templates which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template every time there is an update.

Declaring paths

As files are an addition on the main theme, most functionalities are looking in specific folders. The path must be the same as the main file or it will not be found. Example:

flatsome/woocommerce/layouts/category.php   <- for this to be found we need:
flatsome-child/woocommerce/layouts/category.php

We will go over this in step 3.

Good to know; you don’t need everything from these folders. In this case an empty woocommerce folder is viable.

Step 1: Copying the template

  1. Find and download the file category.php (do not remove it). Usually found here:
    public_html(or www)/wp-content/themes/flatsome/woocommerce/layouts/category.php
  2. Open the file category.php with your file editor. (do not rename it)

Step 2: Editing the template

On line 3 you will edit the number depending on how small or wide you want it. 1 being smallest and 12 being full width.
Also line 17 needs to be edited respectively.
Since you have 12 units in total, you need to adjust the second column too. If you use ‘large-1’ you will need to set the second column to ‘large-11’.

<div class="row category-page-row">
        <!-- Edit the number 2 to your needs -->
        <div class="col large-2 hide-for-medium <?php flatsome_sidebar_classes(); ?>">
            <?php flatsome_sticky_column_open( 'category_sticky_sidebar' ); ?>
            <div id="shop-sidebar" class="sidebar-inner col-inner">
                <?php
                  if(is_active_sidebar('shop-sidebar')) {
                        dynamic_sidebar('shop-sidebar');
                    } else{ echo '<p>You need to assign Widgets to <strong>"Shop Sidebar"</strong> in <a href="'.get_site_url().'/wp-admin/widgets.php">Appearance > Widgets</a> to show anything here</p>';
                  }
                ?>
            </div>
            <?php flatsome_sticky_column_close( 'category_sticky_sidebar' ); ?>
        </div>

        <!-- Do not forget to edit this number accordingly! You have 12 units in total to use -->
        <div class="col large-10">
        <?php
        /**
         * Hook: woocommerce_before_main_content.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
         * @hooked woocommerce_breadcrumb - 20 (FL removed)
         * @hooked WC_Structured_Data::generate_website_data() - 30
         */
        do_action( 'woocommerce_before_main_content' );


        ?>


        <?php
        /**
         * Hook: woocommerce_archive_description.
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
        ?>


        <?php


        if ( woocommerce_product_loop() ) {


            /**
             * Hook: woocommerce_before_shop_loop.
             *
             * @hooked wc_print_notices - 10
             * @hooked woocommerce_result_count - 20 (FL removed)
             * @hooked woocommerce_catalog_ordering - 30 (FL removed)
             */
            do_action( 'woocommerce_before_shop_loop' );


            woocommerce_product_loop_start();


            if ( wc_get_loop_prop( 'total' ) ) {
                while ( have_posts() ) {
                    the_post();


                    /**
                     * Hook: woocommerce_shop_loop.
                     *
                     * @hooked WC_Structured_Data::generate_product_data() - 10
                     */
                    do_action( 'woocommerce_shop_loop' );


                    wc_get_template_part( 'content', 'product' );
                }
            }


            woocommerce_product_loop_end();


            /**
             * Hook: woocommerce_after_shop_loop.
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );
        } else {
            /**
             * Hook: woocommerce_no_products_found.
             *
             * @hooked wc_no_products_found - 10
             */
            do_action( 'woocommerce_no_products_found' );
        }
        ?>


        <?php
            /**
             * Hook: flatsome_products_after.
             *
             * @hooked flatsome_products_footer_content - 10
             */
            do_action( 'flatsome_products_after' );
            /**
             * Hook: woocommerce_after_main_content.
             *
             * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
             */
            do_action( 'woocommerce_after_main_content' );
        ?>
        </div>
</div>

Step 3: Upload the template

  1. If not existing: create a folder ‘woocommerce’ in the child theme. Usually named flatsome-child:
    public_html(or www)/wp-content/themes/flatsome-child/
  2. If not existing: create a folder ‘layouts’ in the woocommerce folder:
    public_html(or www)/wp-content/themes/flatsome-child/woocommerce
  3. Upload the category.php to this folder:
    public_html(or www)/wp-content/themes/flatsome-child/woocommerce/layouts/

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.