fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 10 MIN READ

Custom Home Page Template

Customizing the Homepage- WooCommerce and Beaver Builder Home Page

From the original Fervor library. Examples may use older package versions.

How to Create a Stunning Homepage Template for Your WooCommerce Store

Whether you’re starting a new WooCommerce store or revamping your existing one, having a well-designed homepage can make a huge difference in your sales. A homepage is like the front window of a shop—first impressions matter!

In this tutorial, we’ll walk you through step-by-step instructions to create a beautiful homepage template for your WooCommerce store. Let’s roll!

Step 1: Set Up Your WooCommerce Store

Before designing a homepage, ensure that:

  1. WooCommerce is installed and active on your WordPress site.
  2. You have products added to your store. (Even sample products will do for now!)
  3. You’ve installed a WooCommerce-compatible theme. (We recommend something like Astra, Storefront, or OceanWP.)

Step 2: Choose Your Page Builder

Page builders simplify the design process and let you create visually stunning layouts. Some popular options include:

  • Elementor (Free and Pro versions)
  • Gutenberg (Block Editor) (Free and built into WordPress)
  • Beaver Builder (Premium)
  • Divi Builder (Premium)

👉 For this tutorial, we’ll use Elementor Free because it’s user-friendly and widely supported.

Step 3: Create a New Page for Your Homepage

  1. Go to your WordPress Dashboard.
  2. Navigate to Pages > Add New.
  3. Title it Homepage (or anything you like).
  4. Under the Page Attributes section, select a Full-Width template (if your theme supports it).
  5. Click Publish.

Step 4: Set Your Homepage

  1. Navigate to Settings > Reading in your WordPress Dashboard.
  2. Under Your homepage displays, select A static page.
  3. Choose the page you just created as your Homepage.
  4. Save changes.

Step 5: Design Your Homepage with Elementor

Here’s where the magic happens! 🎩✨

  1. Open Elementor:

    • Go to Pages > All Pages.
    • Find your homepage and click Edit with Elementor.

  2. Add a Hero Section (Top Banner):

    • Click the + icon to add a new section.
    • Choose a single-column structure.
    • Add a Heading widget for your store’s name or tagline (e.g., “Welcome to Trendy Finds!”).
    • Add a Button widget with a CTA like “Shop Now” and link it to your shop page.
    • Style the background with an eye-catching image or gradient (e.g., go to Style > Background).

  3. Feature Product Categories:

    • Add a new section with 3 or 4 columns.
    • Drag the Image Box widget into each column.
    • Use this to display your main product categories (e.g., Men’s Clothing, Women’s Accessories).
    • Link each image to the relevant category page.

  4. Add a Bestsellers or Featured Products Section:

    • Add another section.
    • Drag the Products widget (WooCommerce integration required).
    • Configure it to display Bestsellers, New Arrivals, or On Sale products.

  5. Include Testimonials:

    • Add a new section.
    • Drag a Testimonial widget and showcase customer reviews.
    • If you don’t have reviews yet, use placeholders like: “Amazing quality and fast shipping!” - Jane Doe.

  6. Display an Email Subscription Form:

    • Use the Form widget to capture leads.
    • Integrate it with your email marketing tool (e.g., Mailchimp or ActiveCampaign).

  7. Add a Footer Section:

    • Use the Footer widget or manually design a footer with columns for links, contact info, and social media icons.

Step 6: Preview and Test Your Homepage

Before publishing:

  1. Click the Preview button to see how it looks.
  2. Test responsiveness by resizing your browser or using Elementor’s responsive mode (Desktop, Tablet, Mobile).
  3. Check for broken links or missing elements.

Step 7: Optimize for Speed

  1. Compress Images: Use a plugin like Smush or TinyPNG.
  2. Install a Caching Plugin: WP Rocket or W3 Total Cache can speed things up.
  3. Use a CDN: Services like Cloudflare can enhance load times globally.

Step 8: Go Live!

Once you’re happy with the design:

  1. Save and publish the homepage.
  2. Check it live on your website to ensure everything works smoothly.

Bonus Tips for a Next-Level Homepage

  1. Add a Countdown Timer: Create urgency for a sale or special promotion.
  2. Use Video Backgrounds: A short clip showing your products in action can be engaging.
  3. Highlight Free Shipping or Return Policies: Put these front and center to attract customers.

🎉 Congratulations! You’ve just created a professional homepage for your WooCommerce store! Keep tweaking and improving based on customer feedback and analytics. 😊

BONUS Custom PHP Homepage Template for Your WooCommerce Store Using a Child Theme

If you’re a developer or want to dive deeper into customizing your WooCommerce store, creating a custom PHP homepage template is a fantastic option. This method gives you full control over your homepage layout and functionality.

Ready to roll? Let’s build that custom homepage template step-by-step!

Prerequisites

  1. WordPress Installed: Your website should be up and running with WordPress and WooCommerce.
  2. Child Theme: Always work in a child theme to ensure your changes don’t get overwritten during theme updates. If you don’t have one, follow this guide to set it up.
  3. Basic PHP Knowledge: You don’t need to be a pro, but familiarity with WordPress functions and PHP syntax helps.

Step 1: Locate Your Child Theme Directory

  1. Navigate to your WordPress installation files via FTP or a File Manager.
  2. Go to wp-content/themes/your-child-theme/.

Step 2: Create a Custom Homepage Template

  1. Inside your child theme folder, create a new file called homepage-template.php.

  2. Add the following basic structure to your file:

<?php
/**
 * Template Name: Custom Homepage
 * Description: A custom homepage template for WooCommerce stores.
 */

get_header(); // Includes the header.php file
?>

<div class="homepage-container">

    <section class="hero-banner">
        <h1>Welcome to [Your Store Name]</h1>
        <p>Your tagline goes here</p>
        <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="button">Shop Now</a>
    </section>

    <section class="product-categories">
        <h2>Shop by Category</h2>
        <div class="categories-grid">
            <?php
            $categories = get_terms( 'product_cat', array(
                'hide_empty' => true,
            ));

            foreach ( $categories as $category ) {
                $thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
                $image_url = wp_get_attachment_url( $thumbnail_id );
                ?>
                <div class="category">
                    <a href="<?php echo get_term_link( $category ); ?>">
                        <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $category->name ); ?>">
                        <h3><?php echo esc_html( $category->name ); ?></h3>
                    </a>
                </div>
                <?php
            }
            ?>
        </div>
    </section>

    <section class="featured-products">
        <h2>Featured Products</h2>
        <div class="products-grid">
            <?php
            echo do_shortcode( '[products limit="4" columns="4" visibility="featured"]' );
            ?>
        </div>
    </section>

    <section class="testimonials">
        <h2>What Our Customers Say</h2>
        <p>"Great quality and fast delivery!" - Happy Customer</p>
        <p>"I love the variety of products." - Another Customer</p>
    </section>

</div>

<?php get_footer(); // Includes the footer.php file ?>

Step 3: Style Your Homepage Template

  1. In your child theme directory, create or edit the style.css file.
  2. Add custom styles for your homepage layout. For example:
.homepage-container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}

.hero-banner {
    text-align: center;
    background: #f7f7f7;
    padding: 50px 20px;
}

.hero-banner h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero-banner .button {
    padding: 10px 20px;
    background: #0073e6;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category img {
    max-width: 100%;
    border-radius: 10px;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

Step 4: Assign the Custom Template to Your Homepage

  1. Go to your WordPress Dashboard.
  2. Navigate to Pages > Add New (or edit an existing page for your homepage).
  3. Assign the Custom Homepage template:
    • On the right-hand side under the Page Attributes section, select Custom Homepage from the Template dropdown.
  4. Publish or update the page.

Step 5: Set Your Homepage

  1. Navigate to Settings > Reading in your WordPress Dashboard.
  2. Under Your homepage displays, select A static page.
  3. Choose the page you assigned the Custom Homepage template.
  4. Save changes.

Step 6: Test Your Homepage

  1. Visit your website and verify the homepage displays as intended.
  2. Test responsiveness on different devices (mobile, tablet, desktop).
  3. Check for any missing assets (like category images) or broken links.

Bonus: Adding More WooCommerce Elements

If you want to include additional sections, here are a few ideas:

  • Bestsellers: Use the shortcode [products limit="4" columns="4" orderby="popularity"].
  • On Sale Products: Use the shortcode [sale_products limit="4" columns="4"].
  • Custom Widgets: Use WooCommerce hooks to add dynamic content.

Wrap-Up

🎉 Congratulations! You’ve successfully created a custom PHP homepage template for your WooCommerce store. This gives you endless possibilities to tailor your homepage to match your brand and delight your customers. 😊

BONUS Tutorial: Create a PHP Template for the Homepage in a Child Theme (with Beaver Builder Support)

Step 1: Set Up Your Child Theme

If you don’t already have a child theme set up, follow these steps:

  1. Navigate to your WordPress installation directory.
  2. Go to the wp-content/themes folder.
  3. Create a new folder for your child theme (e.g., mytheme-child).
  4. Add two required files:
    • style.css:
      /*
 Theme Name: MyTheme Child
 Template: mytheme
 */
    • functions.php: Add this basic setup to enqueue the parent theme’s styles.
      <?php
function mytheme_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_styles');
  5. Activate the child theme in the WordPress admin under Appearance > Themes.

Step 2: Create a Custom Homepage Template

  1. In your child theme directory, create a new file called template-homepage.php.

  2. Add the following basic structure to the file:

    <?php
/*
Template Name: Custom Homepage
*/
get_header(); // Loads the header.php file.
?>

<main id="main-content">
    <div class="custom-hero-section">
        <h1>Welcome to Our Store</h1>
        <p>Your one-stop shop for amazing products!</p>
    </div>

    <!-- This is where Beaver Builder content will go -->
    <div class="beaver-builder-content">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content(); // Beaver Builder content is injected here.
            endwhile;
        endif;
        ?>
    </div>

    <div class="custom-featured-products">
        <h2>Featured Products</h2>
        <?php echo do_shortcode('[products limit="4" columns="4" visibility="featured"]'); ?>
    </div>
</main>

<?php get_footer(); // Loads the footer.php file. ?>

  3. Explanation of the Code:

    • get_header() and get_footer(): Includes the header and footer of your theme.
    • Custom Sections: You can hardcode or dynamically add content like the hero section or featured products.
    • Beaver Builder Content Area: The the_content() function allows Beaver Builder to inject its content here when the page is edited with the builder.
    • Shortcodes: Use WooCommerce shortcodes like [products] to showcase products.

Step 3: Assign the Template to Your Homepage

  1. Go to Pages > Add New in the WordPress admin.
  2. Create a page titled “Homepage.”
  3. On the right-hand side, under the Template dropdown, select Custom Homepage.
  4. Publish the page.

Step 4: Set the Page as Your Homepage

  1. Navigate to Settings > Reading in the WordPress admin.
  2. Under Your homepage displays, select A static page.
  3. Set the “Homepage” page you created as your homepage.
  4. Save changes.

Step 5: Edit with Beaver Builder

  1. Go to the “Homepage” page in the WordPress admin.
  2. Click Edit with Beaver Builder.
  3. Use Beaver Builder to customize the content inside the <div class="beaver-builder-content"> area defined in your PHP template.
    • The the_content() function ensures that Beaver Builder’s content will only affect the intended section of the page.

Step 6: Style Your Template (Optional)

Add custom CSS to style your custom sections in the style.css file of your child theme:

.custom-hero-section {
    text-align: center;
    background-color: #f4f4f4;
    padding: 50px 20px;
}

.custom-featured-products {
    margin: 40px auto;
    text-align: center;
}

Step 7: Test Your Template

  1. Visit your homepage in the browser.
  2. Confirm that:
    • The hardcoded sections (e.g., Hero Section, Featured Products) appear correctly.
    • Beaver Builder can edit the content within the designated area.

Bonus Tips

  1. Add Widgets or More Dynamic Content: Use PHP or shortcodes for dynamic elements, like recent blog posts or sale products.
  2. Responsive Design: Test the homepage on various devices to ensure a mobile-friendly layout.
  3. Debugging: If the Beaver Builder content doesn’t appear, check that:
    • The page has the “Custom Homepage” template selected.
    • Beaver Builder is active on the page.

🎉 Done! You’ve successfully created a custom homepage template with a dedicated Beaver Builder content area. Your hybrid approach lets you mix the power of PHP templates with the flexibility of a drag-and-drop builder. If you have any questions, let me know—I’m here to help! 😊

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY