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
- 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 - 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
- If not existing: create a folder ‘woocommerce’ in the child theme. Usually named flatsome-child:
public_html(or www)/wp-content/themes/flatsome-child/ - If not existing: create a folder ‘layouts’ in the woocommerce folder:
public_html(or www)/wp-content/themes/flatsome-child/woocommerce - Upload the category.php to this folder:
public_html(or www)/wp-content/themes/flatsome-child/woocommerce/layouts/
Stay Connected
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.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.