With WooCommerce plugin the WordPress user can easily setup an ecommerce website in a day. But the general layout of homepage is generally looked outdated or just out-of-fashion, what we can say is, default layout is not capable of turning an user into customer. To sell a product your website should be nice looking and user-friendly. In this tutorial, i’ll show you how to change the main shop page of woocommerce. Get ready to make your hand dirty, also you need to have a basic knowledge of HTML and PHP to change the layout.
To work with the shop page, you need to go inside the woocommerce plugin, then copy the whole templates folder and paste it in your theme’s root folder.
In the root folder, you need to rename the folder name from templates to woocommerce. Look at the below image for reference.
Now you are free to do anything with the layout. You can change the homepage, single product page, product archive page, checkout page, cart page, i mean you can change the woocommerce look totally.
Look at the below image and understand the structure and files locations of woocommerce page templates. In this folder you will be able to work with all pages of woocommerce.
In the above folder, we need to work with archive-product.php that is responsible for main shop page. In this page you can edit the whole layout, you can include your own HTML design here. Here is the codes of archive-product.php page
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
get_header( 'shop' );
/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices - 10
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
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' );
}
/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
get_footer( 'shop' );
Here look at the layout. There are also the descriptions of the respective hooks. You can use these hooks in your own layout. Suppose, you want to have the products only, then just use this loop inside your HTML
<?php
if ( woocommerce_product_loop() ) {
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
do_action( 'woocommerce_after_shop_loop' );
} else {
do_action( 'woocommerce_no_products_found' );
}
This page can be also used for category page and search page. So, I’m giving you an assumed layout on how to deploy it with HTML
<!-- Start of Heading section -->
<header class="woo-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-page-title"><?php woocommerce_page_title(); ?></h1>
</header>
<!-- End of Heading -->
<!-- Start of main content -->
<div class="main-content">
<?php if ( woocommerce_product_loop() ) {
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) { the_post(); do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' ); }
}
woocommerce_product_loop_end();
do_action( 'woocommerce_after_shop_loop' ); }
else { do_action( 'woocommerce_no_products_found' );
}
?>
</div>
<!-- End of main content -->
<!-- Your Footer Goes Here -->
<footer class="myfooter">
do_action( 'woocommerce_after_main_content' );
do_action( 'woocommerce_sidebar' );
get_footer( 'shop' );
</footer>
With the above layout you can create any complex design. Or if you want to dig into the codes, you may buy premium WordPress WooCommerce theme. I recommend you Themeforest , this is the best website for any type of commercial and modern theme. So, try to change the layout and if you face any problem, comment below, i will help.