How to Build Static Homepage and Front Page Layouts for Seamless WooCommerce Integrations

• This template features a prominent heading for the blog section.
• The “ block is configured to display 10 posts per page, including their featured images, titles, dates, excerpts, and categories.
• A `

Leveraging WooCommerce Blocks and Shortcodes

For a truly seamless WooCommerce integration on your static homepage, you’ll want to utilize WooCommerce’s built-in Gutenberg blocks or shortcodes. These allow you to dynamically display products, categories, cart information, and more directly within your page content.

Common WooCommerce Blocks for Homepage

When editing your static front page (e.g., “Home”) in the WordPress editor, you can add blocks like:

• Featured Products: Displays a selection of hand-picked products.
• Best Selling Products: Showcases your top-selling items.
• Products by Category: Allows you to display products from specific categories.
• All Products: Lists all available products.
• Product Search: Adds a search bar for products.
• Product Categories: Displays a list of product categories.

Using the [products] Shortcode

The [products] shortcode offers extensive customization. You can place this within a “Shortcode” block on your static front page or within your front-page.php template.

[products limit="8" columns="4" category="clothing,accessories" orderby="rand" order="desc" tag="sale"]

Shortcode Attributes Explained:

• limit: The maximum number of products to display.
• columns: The number of columns to arrange products in.
• category: Displays products from specific categories (comma-separated slugs).
• orderby: How to sort products (e.g., date, title, rand for random).
• order: The direction of sorting (asc for ascending, desc for descending).
• tag: Displays products with a specific tag (comma-separated slugs).
• best_selling: Set to true to show best-selling products.
• on_sale: Set to true to show products that are currently on sale.

Advanced Customization with Theme Hooks and Filters

For more dynamic layouts or to integrate WooCommerce elements into specific areas of your theme (like headers or sidebars), you can use WordPress action and filter hooks, often provided by WooCommerce itself.

Example: Adding a Cart Icon to the Header

Many themes provide a hook in their header template (e.g., header.php) where you can add custom elements. WooCommerce also offers hooks.

<?php
/**
 * Add a WooCommerce cart icon to the header.
 */
function my_custom_header_cart_icon() {
    if ( class_exists( 'WooCommerce' ) ) {
        global $woocommerce;
        $cart_count = $woocommerce->cart->get_cart_contents_count();
        $cart_url = wc_get_cart_url();

        echo '<a class="cart-contents" href="' . esc_url( $cart_url ) . '" title="' . esc_attr__( 'View your shopping cart', 'your-theme-textdomain' ) . '">';
        echo '<i class="fas fa-shopping-cart"></i> '; // Font Awesome icon example
        if ( $cart_count > 0 ) {
            echo '<span class="cart-count">' . esc_html( $cart_count ) . '</span>';
        }
        echo '</a>';
    }
}
// Hook into a common theme header hook, e.g., 'astra_header_before' or 'generate_header'
// Replace 'your_theme_hook_location' with the actual hook from your theme.
add_action( 'your_theme_hook_location', 'my_custom_header_cart_icon' );
?>

You would typically place this PHP code in your theme’s functions.php file. Remember to replace 'your_theme_hook_location' with the specific action hook provided by your theme. You’ll also need to ensure you have a plugin like Font Awesome installed or use an alternative icon method.

Styling Your Static Homepage

Once your layout is in place, you’ll want to style it to match your brand. This can be done via your theme’s style.css file or using the Additional CSS section in the Customizer.

/* Example styles for the front-page.php */

.wp-block-group.alignfull {
    /* Full width container styles */
}

.wp-block-group.has-background {
    /* Styles for background color blocks */
    padding: 40px 20px;
}

.wp-block-heading h1 {
    margin-bottom: 20px;
}

.wp-block-buttons .wp-block-button__link {
    background-color: #007bff; /* Primary button color */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.site-main .widget_products ul.products li.product {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}

.site-main .widget_products ul.products li.product img {
    margin-bottom: 10px;
}

.site-main .widget_products ul.products li.product .button {
    background-color: #28a745; /* Add to cart button color */
    color: #ffffff;
}

These CSS rules target elements generated by Gutenberg blocks and WooCommerce shortcodes, allowing you to customize their appearance. Always inspect your page’s HTML structure using browser developer tools to identify the correct selectors for your theme.

Conclusion

Building effective static homepages and front pages for WooCommerce integrations involves understanding WordPress’s page settings, creating appropriate template files (front-page.php, home.php), leveraging WooCommerce blocks and shortcodes for dynamic content, and applying custom styling. By following these steps, you can create a compelling and functional storefront that enhances user experience and drives sales.

• The `Template Name` comment is a WordPress standard that allows you to select this template from the Page Attributes meta box when editing a page.
• get_header(); and get_footer(); include your theme’s header and footer files.
• The content within the main `<div id=”primary”>` is structured using Gutenberg blocks. This example demonstrates a hero section with a call to action, a featured products section using the WooCommerce `[products]` shortcode, and a section for recent blog posts.
• The `[products]` shortcode is a powerful WooCommerce tool. Here, `limit=”4″` displays four products, `columns=”4″` arranges them in four columns, `best_selling=”true”` shows best-selling items, and `orderby=”date” order=”desc”` sorts them by date in descending order.
• The `` block is a modern Gutenberg block for displaying posts. This example is configured to show the latest 3 posts in a list format.

The home.php Template

This template is used to display the blog posts index page, which is the page you designated as the “Posts page” in the WordPress settings. It typically lists your blog articles chronologically.

Create a file named home.php in your theme’s root directory.

<?php
/**
 * The template for displaying the blog posts index.
 *
 * This file is used when a static front page is set, and this template
 * is assigned to the "Posts page" in the WordPress settings.
 */

get_header(); ?>

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div id="primary" class="wp-block-group alignfull">
    <main id="main" class="site-main wp-block-group__inner-container" role="main">

        <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset--spacing--70","right":"var:preset--spacing--70","bottom":"var:preset--spacing--70","left":"var:preset--spacing--70"}}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
        <div class="wp-block-group alignfull has-background-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);">
            <!-- wp:heading {"textAlign":"center"} -->
            <h1 class="wp-block-heading has-text-align-center">Our Blog</h1>
            <!-- /wp:heading -->
        </div>
        <!-- /wp:group -->

        <!-- wp:query {"queryId":2,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"include":[],"exclude_tree":[],"taxQuery":{"relation":"AND","0":{"field":"term","taxonomy":"category","terms":[],"operator":"IN"}},"metaQuery":{"relation":"AND"},"parent":[],"childOf":[],"parentIn":[],"childIn":[],"orderIn":[]},"align":"wide"} -->
        <!-- wp:post-template {"align":"wide"} -->
        <ul class="wp-block-post-template alignwide">
            <!-- wp:post-featured-image {"align":"wide","aspectRatio":"16:9"} -->
            <figure class="wp-block-post-featured-image alignwide size-auto" style="aspect-ratio:16/9"><img src="placeholder-image.jpg" alt="Featured Image"/></figure>
            <!-- /wp:post-featured-image -->

            <!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"2.5rem"}}} -->
            <h2><a href="post-link">Post Title</a></h2>
            <!-- /wp:post-title -->

            <!-- wp:post-date {"isLink":true,"format":"F j, Y"} -->
            <p><time datetime="2023-10-27T10:00:00+00:00">October 27, 2023</time></p>
            <!-- /wp:post-date -->

            <!-- wp:post-excerpt -->
            <div class="wp-block-post-excerpt"><p>Post excerpt...</p></div>
            <!-- /wp:post-excerpt -->

            <!-- wp:post-terms {"term":"category"} -->
            <p><span>Categories:</span> <a href="#">Category Name</a></p>
            <!-- /wp:post-terms -->
        </ul>
        <!-- /wp:post-template -->
        <!-- wp:query-pagination {"align":"wide"} -->
        <nav class="wp-block-query-pagination alignwide"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></nav>
        <!-- /wp:query-pagination -->
        <!-- /wp:query -->

    </main><!-- #main -->
</div><!-- #primary -->
<!-- /wp:group -->

<?php get_footer(); ?>

Explanation:

• This template features a prominent heading for the blog section.
• The `` block is configured to display 10 posts per page, including their featured images, titles, dates, excerpts, and categories.
• A `` block is included to handle navigation between multiple pages of blog posts.

Leveraging WooCommerce Blocks and Shortcodes

For a truly seamless WooCommerce integration on your static homepage, you’ll want to utilize WooCommerce’s built-in Gutenberg blocks or shortcodes. These allow you to dynamically display products, categories, cart information, and more directly within your page content.

Common WooCommerce Blocks for Homepage

When editing your static front page (e.g., “Home”) in the WordPress editor, you can add blocks like:

• Featured Products: Displays a selection of hand-picked products.
• Best Selling Products: Showcases your top-selling items.
• Products by Category: Allows you to display products from specific categories.
• All Products: Lists all available products.
• Product Search: Adds a search bar for products.
• Product Categories: Displays a list of product categories.

Using the [products] Shortcode

The [products] shortcode offers extensive customization. You can place this within a “Shortcode” block on your static front page or within your front-page.php template.

[products limit="8" columns="4" category="clothing,accessories" orderby="rand" order="desc" tag="sale"]

Shortcode Attributes Explained:

• limit: The maximum number of products to display.
• columns: The number of columns to arrange products in.
• category: Displays products from specific categories (comma-separated slugs).
• orderby: How to sort products (e.g., date, title, rand for random).
• order: The direction of sorting (asc for ascending, desc for descending).
• tag: Displays products with a specific tag (comma-separated slugs).
• best_selling: Set to true to show best-selling products.
• on_sale: Set to true to show products that are currently on sale.

Advanced Customization with Theme Hooks and Filters

For more dynamic layouts or to integrate WooCommerce elements into specific areas of your theme (like headers or sidebars), you can use WordPress action and filter hooks, often provided by WooCommerce itself.

Example: Adding a Cart Icon to the Header

Many themes provide a hook in their header template (e.g., header.php) where you can add custom elements. WooCommerce also offers hooks.

<?php
/**
 * Add a WooCommerce cart icon to the header.
 */
function my_custom_header_cart_icon() {
    if ( class_exists( 'WooCommerce' ) ) {
        global $woocommerce;
        $cart_count = $woocommerce->cart->get_cart_contents_count();
        $cart_url = wc_get_cart_url();

        echo '<a class="cart-contents" href="' . esc_url( $cart_url ) . '" title="' . esc_attr__( 'View your shopping cart', 'your-theme-textdomain' ) . '">';
        echo '<i class="fas fa-shopping-cart"></i> '; // Font Awesome icon example
        if ( $cart_count > 0 ) {
            echo '<span class="cart-count">' . esc_html( $cart_count ) . '</span>';
        }
        echo '</a>';
    }
}
// Hook into a common theme header hook, e.g., 'astra_header_before' or 'generate_header'
// Replace 'your_theme_hook_location' with the actual hook from your theme.
add_action( 'your_theme_hook_location', 'my_custom_header_cart_icon' );
?>

You would typically place this PHP code in your theme’s functions.php file. Remember to replace 'your_theme_hook_location' with the specific action hook provided by your theme. You’ll also need to ensure you have a plugin like Font Awesome installed or use an alternative icon method.

Styling Your Static Homepage

Once your layout is in place, you’ll want to style it to match your brand. This can be done via your theme’s style.css file or using the Additional CSS section in the Customizer.

/* Example styles for the front-page.php */

.wp-block-group.alignfull {
    /* Full width container styles */
}

.wp-block-group.has-background {
    /* Styles for background color blocks */
    padding: 40px 20px;
}

.wp-block-heading h1 {
    margin-bottom: 20px;
}

.wp-block-buttons .wp-block-button__link {
    background-color: #007bff; /* Primary button color */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.site-main .widget_products ul.products li.product {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}

.site-main .widget_products ul.products li.product img {
    margin-bottom: 10px;
}

.site-main .widget_products ul.products li.product .button {
    background-color: #28a745; /* Add to cart button color */
    color: #ffffff;
}

These CSS rules target elements generated by Gutenberg blocks and WooCommerce shortcodes, allowing you to customize their appearance. Always inspect your page’s HTML structure using browser developer tools to identify the correct selectors for your theme.

Conclusion

Building effective static homepages and front pages for WooCommerce integrations involves understanding WordPress’s page settings, creating appropriate template files (front-page.php, home.php), leveraging WooCommerce blocks and shortcodes for dynamic content, and applying custom styling. By following these steps, you can create a compelling and functional storefront that enhances user experience and drives sales.

Understanding WordPress Static Front Page vs. Homepage

In WordPress, the distinction between the “Front Page” and the “Homepage” is crucial for theme development, especially when integrating with WooCommerce. The Front Page is the *first* page a visitor sees. The Homepage is the *blog post listing* page. By default, WordPress displays your latest posts on the homepage. However, for e-commerce sites, you typically want a dedicated static page as the front page, often showcasing products, promotions, and calls to action. This guide will walk you through setting up these static layouts effectively.

Configuring Static Front Page and Homepage in WordPress Settings

The most straightforward method to set a static front page is through the WordPress Customizer. This doesn’t require direct code modification but is the foundational step before theme-level customization.

1. Navigate to Appearance → Customize in your WordPress admin dashboard.

2. Select Homepage Settings.

3. Under “Your homepage displays,” choose A static page.

4. For “Homepage,” select the page you’ve created to serve as your front page (e.g., “Home”).

5. For “Posts page,” select the page you want to use for displaying your blog posts (e.g., “Blog”). If you don’t have a blog page, create a new blank page and assign it here.

6. Click Publish to save your changes.

Creating Template Files for Static Pages

While the WordPress settings handle the assignment, your theme needs specific template files to render these static pages correctly. For a static front page, you’ll typically use a template file named front-page.php. If this file doesn’t exist, WordPress will fall back to home.php (for the blog posts index) or index.php. For the blog posts index page, you’d use home.php.

The front-page.php Template

This template is specifically designed to display the content of the page designated as the “Front Page” in the WordPress settings. It’s the ideal place to build your custom homepage layout, integrating WooCommerce elements.

Create a file named front-page.php in your theme’s root directory.

<?php
/**
 * Template Name: Custom Front Page
 *
 * This file is used to display the static front page.
 * If the page is set as the front page in WordPress settings, this template will be used.
 */

get_header(); ?>

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div id="primary" class="wp-block-group alignfull">
    <main id="main" class="site-main wp-block-group__inner-container" role="main">

        <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
        <div class="wp-block-group alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
            <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset--spacing--70","right":"var:preset--spacing--70","bottom":"var:preset--spacing--70","left":"var:preset--spacing--70"}}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
            <div class="wp-block-group alignfull has-background-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);">
                <!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"clamp(2.5rem, 5vw, 3.5rem)"}}} -->
                <h1 class="wp-block-heading has-text-align-center" style="font-size:clamp(2.5rem, 5vw, 3.5rem)">Welcome to Our Awesome Store!</h1>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"align":"center"} -->
                <p class="has-text-align-center">Discover our latest products and exclusive offers.</p>
                <!-- /wp:paragraph -->

                <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                <div class="wp-block-buttons">
                    <!-- wp:button {"backgroundColor":"primary","textColor":"background"} -->
                    <a class="wp-block-button__link wp-element-button has-background-background-color has-primary-background-color has-text-color has-background-color" href="#">Shop Now</a>
                    <!-- /wp:button -->
                </div>
                <!-- /wp:buttons -->
            </div>
            <!-- /wp:group -->

            <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset--spacing--70","right":"var:preset--spacing--70","bottom":"var:preset--spacing--70","left":"var:preset--spacing--70"}}},"layout":{"type":"constrained"}} -->
            <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);">
                <!-- wp:heading -->
                <h2>Featured Products</h2>
                <!-- /wp:heading -->

                <!-- wp:shortcode -->
                <div class="wp-block-shortcode">[products limit="4" columns="4" best_selling="true" orderby="date" order="desc"]</div>
                <!-- /wp:shortcode -->
            </div>
            <!-- /wp:group -->

            <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset--spacing--70","right":"var:preset--spacing--70","bottom":"var:preset--spacing--70","left":"var:preset--spacing--70"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
            <div class="wp-block-group alignfull has-contrast-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);">
                <!-- wp:heading -->
                <h2>Latest Blog Posts</h2>
                <!-- /wp:heading -->

                <!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"include":[],"exclude_tree":[],"taxQuery":{"relation":"AND","0":{"field":"term","taxonomy":"category","terms":[],"operator":"IN"}},"metaQuery":{"relation":"AND","0":{"key":"featured_post","value":"yes","compare":"="}},"parent":[],"childOf":[],"parentIn":[],"childIn":[],"orderIn":[]},"displayLayout":{"type":"list"}} -->
                <!-- wp:post-template {"align":"wide"} -->
                <ul class="wp-block-post-template alignwide">
                    <!-- wp:post-title {"isLink":true,"style":{"typography":{"font-size":"2rem"}}} -->
                    <li class="wp-block-post-title"><h2><a href="post-link">Post Title</a></h2></li>
                    <!-- /wp:post-title -->
                    <!-- wp:post-excerpt -->
                    <div class="wp-block-post-excerpt"><p>Post excerpt...</p></div>
                    <!-- /wp:post-excerpt -->
                </ul>
                <!-- /wp:post-template -->
                <!-- /wp:query -->
            </div>
            <!-- /wp:group -->

        </div>
        <!-- /wp:group -->

    </main><!-- #main -->
</div><!-- #primary -->
<!-- /wp:group -->

<?php get_footer(); ?>

Explanation:

• The `Template Name` comment is a WordPress standard that allows you to select this template from the Page Attributes meta box when editing a page.
• get_header(); and get_footer(); include your theme’s header and footer files.
• The content within the main `<div id=”primary”>` is structured using Gutenberg blocks. This example demonstrates a hero section with a call to action, a featured products section using the WooCommerce `[products]` shortcode, and a section for recent blog posts.
• The `[products]` shortcode is a powerful WooCommerce tool. Here, `limit=”4″` displays four products, `columns=”4″` arranges them in four columns, `best_selling=”true”` shows best-selling items, and `orderby=”date” order=”desc”` sorts them by date in descending order.
• The `` block is a modern Gutenberg block for displaying posts. This example is configured to show the latest 3 posts in a list format.

The home.php Template

This template is used to display the blog posts index page, which is the page you designated as the “Posts page” in the WordPress settings. It typically lists your blog articles chronologically.

Create a file named home.php in your theme’s root directory.

<?php
/**
 * The template for displaying the blog posts index.
 *
 * This file is used when a static front page is set, and this template
 * is assigned to the "Posts page" in the WordPress settings.
 */

get_header(); ?>

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div id="primary" class="wp-block-group alignfull">
    <main id="main" class="site-main wp-block-group__inner-container" role="main">

        <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset--spacing--70","right":"var:preset--spacing--70","bottom":"var:preset--spacing--70","left":"var:preset--spacing--70"}}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
        <div class="wp-block-group alignfull has-background-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);">
            <!-- wp:heading {"textAlign":"center"} -->
            <h1 class="wp-block-heading has-text-align-center">Our Blog</h1>
            <!-- /wp:heading -->
        </div>
        <!-- /wp:group -->

        <!-- wp:query {"queryId":2,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"include":[],"exclude_tree":[],"taxQuery":{"relation":"AND","0":{"field":"term","taxonomy":"category","terms":[],"operator":"IN"}},"metaQuery":{"relation":"AND"},"parent":[],"childOf":[],"parentIn":[],"childIn":[],"orderIn":[]},"align":"wide"} -->
        <!-- wp:post-template {"align":"wide"} -->
        <ul class="wp-block-post-template alignwide">
            <!-- wp:post-featured-image {"align":"wide","aspectRatio":"16:9"} -->
            <figure class="wp-block-post-featured-image alignwide size-auto" style="aspect-ratio:16/9"><img src="placeholder-image.jpg" alt="Featured Image"/></figure>
            <!-- /wp:post-featured-image -->

            <!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"2.5rem"}}} -->
            <h2><a href="post-link">Post Title</a></h2>
            <!-- /wp:post-title -->

            <!-- wp:post-date {"isLink":true,"format":"F j, Y"} -->
            <p><time datetime="2023-10-27T10:00:00+00:00">October 27, 2023</time></p>
            <!-- /wp:post-date -->

            <!-- wp:post-excerpt -->
            <div class="wp-block-post-excerpt"><p>Post excerpt...</p></div>
            <!-- /wp:post-excerpt -->

            <!-- wp:post-terms {"term":"category"} -->
            <p><span>Categories:</span> <a href="#">Category Name</a></p>
            <!-- /wp:post-terms -->
        </ul>
        <!-- /wp:post-template -->
        <!-- wp:query-pagination {"align":"wide"} -->
        <nav class="wp-block-query-pagination alignwide"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></nav>
        <!-- /wp:query-pagination -->
        <!-- /wp:query -->

    </main><!-- #main -->
</div><!-- #primary -->
<!-- /wp:group -->

<?php get_footer(); ?>

Explanation:

• This template features a prominent heading for the blog section.
• The `` block is configured to display 10 posts per page, including their featured images, titles, dates, excerpts, and categories.
• A `` block is included to handle navigation between multiple pages of blog posts.

Leveraging WooCommerce Blocks and Shortcodes

For a truly seamless WooCommerce integration on your static homepage, you’ll want to utilize WooCommerce’s built-in Gutenberg blocks or shortcodes. These allow you to dynamically display products, categories, cart information, and more directly within your page content.

Common WooCommerce Blocks for Homepage

When editing your static front page (e.g., “Home”) in the WordPress editor, you can add blocks like:

• Featured Products: Displays a selection of hand-picked products.
• Best Selling Products: Showcases your top-selling items.
• Products by Category: Allows you to display products from specific categories.
• All Products: Lists all available products.
• Product Search: Adds a search bar for products.
• Product Categories: Displays a list of product categories.

Using the [products] Shortcode

The [products] shortcode offers extensive customization. You can place this within a “Shortcode” block on your static front page or within your front-page.php template.

[products limit="8" columns="4" category="clothing,accessories" orderby="rand" order="desc" tag="sale"]

Shortcode Attributes Explained:

• limit: The maximum number of products to display.
• columns: The number of columns to arrange products in.
• category: Displays products from specific categories (comma-separated slugs).
• orderby: How to sort products (e.g., date, title, rand for random).
• order: The direction of sorting (asc for ascending, desc for descending).
• tag: Displays products with a specific tag (comma-separated slugs).
• best_selling: Set to true to show best-selling products.
• on_sale: Set to true to show products that are currently on sale.

Advanced Customization with Theme Hooks and Filters

For more dynamic layouts or to integrate WooCommerce elements into specific areas of your theme (like headers or sidebars), you can use WordPress action and filter hooks, often provided by WooCommerce itself.

Example: Adding a Cart Icon to the Header

Many themes provide a hook in their header template (e.g., header.php) where you can add custom elements. WooCommerce also offers hooks.

<?php
/**
 * Add a WooCommerce cart icon to the header.
 */
function my_custom_header_cart_icon() {
    if ( class_exists( 'WooCommerce' ) ) {
        global $woocommerce;
        $cart_count = $woocommerce->cart->get_cart_contents_count();
        $cart_url = wc_get_cart_url();

        echo '<a class="cart-contents" href="' . esc_url( $cart_url ) . '" title="' . esc_attr__( 'View your shopping cart', 'your-theme-textdomain' ) . '">';
        echo '<i class="fas fa-shopping-cart"></i> '; // Font Awesome icon example
        if ( $cart_count > 0 ) {
            echo '<span class="cart-count">' . esc_html( $cart_count ) . '</span>';
        }
        echo '</a>';
    }
}
// Hook into a common theme header hook, e.g., 'astra_header_before' or 'generate_header'
// Replace 'your_theme_hook_location' with the actual hook from your theme.
add_action( 'your_theme_hook_location', 'my_custom_header_cart_icon' );
?>

You would typically place this PHP code in your theme’s functions.php file. Remember to replace 'your_theme_hook_location' with the specific action hook provided by your theme. You’ll also need to ensure you have a plugin like Font Awesome installed or use an alternative icon method.

Styling Your Static Homepage

Once your layout is in place, you’ll want to style it to match your brand. This can be done via your theme’s style.css file or using the Additional CSS section in the Customizer.

/* Example styles for the front-page.php */

.wp-block-group.alignfull {
    /* Full width container styles */
}

.wp-block-group.has-background {
    /* Styles for background color blocks */
    padding: 40px 20px;
}

.wp-block-heading h1 {
    margin-bottom: 20px;
}

.wp-block-buttons .wp-block-button__link {
    background-color: #007bff; /* Primary button color */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.site-main .widget_products ul.products li.product {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}

.site-main .widget_products ul.products li.product img {
    margin-bottom: 10px;
}

.site-main .widget_products ul.products li.product .button {
    background-color: #28a745; /* Add to cart button color */
    color: #ffffff;
}

These CSS rules target elements generated by Gutenberg blocks and WooCommerce shortcodes, allowing you to customize their appearance. Always inspect your page’s HTML structure using browser developer tools to identify the correct selectors for your theme.

Conclusion

Building effective static homepages and front pages for WooCommerce integrations involves understanding WordPress’s page settings, creating appropriate template files (front-page.php, home.php), leveraging WooCommerce blocks and shortcodes for dynamic content, and applying custom styling. By following these steps, you can create a compelling and functional storefront that enhances user experience and drives sales.