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

WordPress / 14 MIN READ

Woo Custom Archive Product

Customizing the WooCommerce Archive Product Page

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

🎨 Tutorial: Customizing the WooCommerce Archive Product Page 🚀

The Archive Product Page in WooCommerce is where products are listed by category, tag, or as part of the shop. Customizing this page allows you to tailor the design, layout, and functionality to better reflect your brand and optimize user experience.

🛠️ How the Archive Product Page Works in WooCommerce

The archive page is a product listing page that uses the following elements:

  1. Template File:

    • The main template is located here:
      /wp-content/plugins/woocommerce/templates/archive-product.php
    • This template determines the overall structure of the archive page.

  2. Hooks and Actions:

    • WooCommerce uses hooks like woocommerce_before_shop_loop and woocommerce_after_shop_loop to inject content (e.g., filters, pagination, or banners).

  3. Query and Loop:

    • WooCommerce queries products from the database and displays them in a grid or list.
    • The product grid is rendered using the template:
      /wp-content/plugins/woocommerce/templates/content-product.php

  4. Customization Options:

    • Modify the archive layout by overriding templates.
    • Use hooks to add, remove, or reorder elements.
    • Use CSS and JavaScript for design tweaks.

Step 1: Override the Default Archive Product Template

To safely customize the archive page, copy the archive-product.php template to your theme:

  1. Navigate to your theme directory:

    /wp-content/themes/your-theme/

  2. Create a woocommerce folder if it doesn’t exist:

    /your-theme/woocommerce/

  3. Copy the archive-product.php file:

    /wp-content/plugins/woocommerce/templates/archive-product.php

    Paste it into your theme’s WooCommerce folder:

    /your-theme/woocommerce/archive-product.php

WooCommerce will now use your custom template instead of the default one.

Step 2: Understanding the Default Archive Template Structure

The default archive-product.php template contains the following:

<?php
defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

do_action( 'woocommerce_before_main_content' );

if ( woocommerce_product_loop() ) {

    do_action( 'woocommerce_before_shop_loop' );

    woocommerce_product_loop_start();

    while ( have_posts() ) {
        the_post();
        wc_get_template_part( 'content', 'product' );
    }

    woocommerce_product_loop_end();

    do_action( 'woocommerce_after_shop_loop' );

} else {
    do_action( 'woocommerce_no_products_found' );
}

do_action( 'woocommerce_after_main_content' );

get_footer( 'shop' );

Key Elements:

  1. Header and Footer:

    • get_header( 'shop' ) and get_footer( 'shop' ) include the theme’s header and footer files for shop pages.

  2. Hooks for Adding Content:

    • woocommerce_before_main_content: Add content before the product listing.
    • woocommerce_after_main_content: Add content after the product listing.

  3. Product Loop:

    • woocommerce_product_loop_start(): Opens the product grid container.
    • woocommerce_product_loop_end(): Closes the product grid container.
    • Inside the loop, wc_get_template_part( 'content', 'product' ) loads the markup for individual products.

  4. No Products Message:

    • woocommerce_no_products_found: Displays a message if no products are available.

Step 3: Customizing the Archive Product Template

Here’s how you can modify the archive-product.php template:

1. Add a Custom Banner Above Products

Add a promotional banner or message using the woocommerce_before_main_content hook:

add_action( 'woocommerce_before_main_content', 'add_custom_shop_banner', 5 );
function add_custom_shop_banner() {
    echo '<div class="shop-banner" style="text-align: center; margin: 20px 0;">
        <h2>Welcome to Our Shop!</h2>
        <p>Discover the best deals and latest products.</p>
    </div>';
}

2. Rearrange the Shop Page Elements

Move the product sorting dropdown below the product grid:

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );

3. Change the Number of Products Per Row

By default, WooCommerce displays 3-4 products per row. Customize this using a filter:

add_filter( 'loop_shop_columns', 'custom_shop_columns' );
function custom_shop_columns( $columns ) {
    return 4; // Change this to 3, 5, etc.
}

4. Change the Number of Products Per Page

Control how many products display on each page:

add_filter( 'loop_shop_per_page', 'custom_products_per_page', 20 );
function custom_products_per_page( $cols ) {
    return 12; // Display 12 products per page.
}

5. Add a Sidebar or Custom Filters

To add a sidebar, modify the template:

<?php if ( is_active_sidebar( 'shop-sidebar' ) ) : ?>
    <aside class="shop-sidebar">
        <?php dynamic_sidebar( 'shop-sidebar' ); ?>
    </aside>
<?php endif; ?>

Register the sidebar in functions.php:

add_action( 'widgets_init', 'register_shop_sidebar' );
function register_shop_sidebar() {
    register_sidebar( array(
        'name'          => 'Shop Sidebar',
        'id'            => 'shop-sidebar',
        'description'   => 'Widgets added here will appear on the shop page.',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
    ) );
}

6. Customize Individual Product Cards

The product cards in the archive use the content-product.php template:

/wp-content/plugins/woocommerce/templates/content-product.php

Copy it to your theme:

/your-theme/woocommerce/content-product.php

Modify the HTML to customize the layout of product cards.

Example: Add a “Best Seller” Badge

In content-product.php:

<?php if ( $product->get_total_sales() > 100 ) : ?>
    <span class="best-seller-badge">Best Seller</span>
<?php endif; ?>

Add CSS for styling:

.best-seller-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: gold;
    color: black;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 12px;
}

7. Add a Load More Button

Replace pagination with a “Load More” button using AJAX. Use a plugin like WooCommerce Infinite Scroll and Ajax Pagination or custom code.

Step 4: Styling Your Archive Page

Use CSS to enhance the design. Example:

.shop-banner {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
}

.products .product {
    transition: transform 0.3s ease;
}

.products .product:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

🚀 Bonus Ideas for Customization

  1. Add Quick View Buttons: Let users preview products without leaving the page.

    • Use the woocommerce_after_shop_loop_item hook.
    • Add a modal for quick view functionality.

  2. Dynamic Filters: Add AJAX-powered filters for price, categories, and attributes.

  3. Custom Sorting Options: Add new sorting methods, such as “Most Popular” or “Newest First.”

  4. Product Category Banners: Show category-specific banners at the top of the page.

  5. Hover Effects for Product Images: Add zoom or alternate images on hover.

🎉 Wrapping It Up

Customizing the WooCommerce Archive Product Page gives you full control over its design and functionality. By combining template overrides, hooks, filters, and CSS, you can create a visually appealing and user-friendly shopping experience.🛍️✨

🎁 Bonus Section: Cool Ideas & Enhancements for WooCommerce Archive Product Pages 🚀

Your Archive Product Page is often the first thing shoppers see when browsing your store, so let’s make it functional, fun, and visually appealing! Here’s a list of cool ideas and code snippets to spice up your archive-product pages.

1. Add Hover Effects for Product Images

Let product images zoom, rotate, or switch to an alternate image when hovered over.

Code Snippet (CSS):

.products .product img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.products .product:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

Alternate Image on Hover:

Add the second product image on hover using WooCommerce hooks.

add_action( 'woocommerce_before_shop_loop_item_title', 'add_alternate_image', 10 );
function add_alternate_image() {
    global $product;
    $attachment_ids = $product->get_gallery_image_ids();
    if ( isset( $attachment_ids[0] ) ) {
        $secondary_image = wp_get_attachment_image( $attachment_ids[0], 'woocommerce_thumbnail' );
        echo '<div class="alternate-image" style="position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s;">
                ' . $secondary_image . '
              </div>';
    }
}

Style the alternate image:

.product:hover .alternate-image {
    opacity: 1;
}

2. Add Product Labels (e.g., “New” or “On Sale”)

Highlight products with custom labels like “New” or “50% Off.”

Code Snippet:

add_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_labels' );
function add_custom_product_labels() {
    global $product;

    if ( $product->is_on_sale() ) {
        echo '<span class="product-label sale">Sale</span>';
    }

    $newness_days = 30; // Define what counts as "new."
    $created_date = strtotime( $product->get_date_created() );
    if ( ( time() - $created_date ) < ( $newness_days * DAY_IN_SECONDS ) ) {
        echo '<span class="product-label new">New</span>';
    }
}

Style the labels:

.product-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 5;
}

.product-label.sale {
    background: orange;
}

.product-label.new {
    background: green;
}

3. Enable AJAX Filtering

Make category, price, or attribute filters update the product list without reloading the page.

Idea:

  • Use a plugin like WooCommerce AJAX Filters.
  • Or, create a custom AJAX filter:
    1. Add dropdowns or checkboxes for filters.
    2. Use admin-ajax.php to query and return filtered products dynamically.

4. Infinite Scroll or Load More Button

Replace traditional pagination with infinite scrolling or a “Load More” button.

Idea:

Use a plugin like WooCommerce Infinite Scroll and Ajax Pagination or write custom code using JavaScript to load more products dynamically.

5. Add a Quick View Button

Let users preview product details without leaving the archive page.

Code Snippet:

add_action( 'woocommerce_after_shop_loop_item', 'add_quick_view_button', 10 );
function add_quick_view_button() {
    echo '<button class="quick-view-button" style="margin-top: 10px;">Quick View</button>';
}

Pair this with a modal or lightbox plugin like FancyBox to display product details.

6. Display Product Stock Levels

Show stock availability directly on the archive page to encourage urgency.

Code Snippet:

add_action( 'woocommerce_after_shop_loop_item_title', 'add_stock_status', 15 );
function add_stock_status() {
    global $product;
    if ( $product->managing_stock() ) {
        $stock = $product->get_stock_quantity();
        if ( $stock > 0 ) {
            echo '<p class="stock-status">In Stock: ' . $stock . '</p>';
        } else {
            echo '<p class="stock-status" style="color: red;">Out of Stock</p>';
        }
    }
}

Highlight a featured category at the top of the archive page.

Code Snippet:

add_action( 'woocommerce_before_main_content', 'add_featured_category_banner', 5 );
function add_featured_category_banner() {
    if ( is_shop() || is_product_category() ) {
        echo '<div class="featured-category-banner" style="margin-bottom: 20px; text-align: center;">
            <h2>🔥 Featured Category: Summer Collection</h2>
            <p>Explore our top picks for this season.</p>
            <a href="/product-category/summer-collection" class="button">Shop Now</a>
        </div>';
    }
}

8. Custom Sorting Options

Add unique sorting options, like “Most Viewed” or “Top Rated.”

Code Snippet:

add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_sorting_options' );
function custom_sorting_options( $args ) {
    if ( isset( $_GET['orderby'] ) && 'most_viewed' === $_GET['orderby'] ) {
        $args['orderby'] = 'meta_value_num';
        $args['meta_key'] = 'product_views'; // Ensure you track this meta key.
        $args['order'] = 'DESC';
    }
    return $args;
}

add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_sorting_option' );
add_filter( 'woocommerce_catalog_orderby', 'add_custom_sorting_option' );
function add_custom_sorting_option( $options ) {
    $options['most_viewed'] = 'Most Viewed';
    return $options;
}

9. Show Dynamic Free Shipping Messages

Encourage larger orders by displaying a free shipping threshold message.

Code Snippet:

add_action( 'woocommerce_before_shop_loop', 'show_free_shipping_message', 20 );
function show_free_shipping_message() {
    $free_shipping_threshold = 50;
    $cart_total = WC()->cart->subtotal;

    if ( $cart_total < $free_shipping_threshold ) {
        $remaining = $free_shipping_threshold - $cart_total;
        echo '<p class="free-shipping-message" style="background: #e6ffe6; padding: 10px; text-align: center;">
            Add ' . wc_price( $remaining ) . ' more to get free shipping! 🚚
        </p>';
    } else {
        echo '<p class="free-shipping-message" style="background: #e6ffe6; padding: 10px; text-align: center;">
            🎉 You qualify for free shipping!
        </p>';
    }
}

10. Highlight Best Sellers

Showcase best-selling products at the top of the archive page.

Code Snippet:

add_action( 'woocommerce_before_shop_loop', 'display_best_sellers', 15 );
function display_best_sellers() {
    echo '<h2>🌟 Best Sellers</h2>';
    echo do_shortcode( '[products limit="4" columns="4" orderby="popularity"]' );
}

11. Interactive Filter Sidebar

Make filters more engaging with sliders for price, color swatches, or size toggles.

Idea:

Use a plugin like YITH WooCommerce Ajax Product Filter or customize with:

  • Sliders using noUiSlider.js.
  • AJAX calls for real-time filtering.

12. Add a Wishlist Icon to Products

Let users save products for later with a wishlist button.

Idea:

  • Use YITH WooCommerce Wishlist or a similar plugin.
  • Add a small heart icon below product titles:
add_action( 'woocommerce_after_shop_loop_item_title', 'add_wishlist_icon', 10 );
function add_wishlist_icon() {
    echo '<a href="#" class="wishlist-icon">❤️ Add to Wishlist</a>';
}

13. Offer Bulk Discounts on Archive Pages

Show bulk pricing tables directly below the product price on the archive page.

🎉 Wrapping It Up

With these ideas and code snippets, you can turn your WooCommerce archive-product page into an engaging, functional, and beautiful shopping experience. From interactive filters to dynamic free shipping messages, there’s no limit to how creative you can get!

Need help implementing these ideas? Let me know—I’m happy to assist! 🛍️✨

🧠 Pro Tips for Optimizing WooCommerce Archive Product Pages 🚀

Your WooCommerce Archive Product Page serves as the gateway to your product offerings. Optimizing it ensures customers have a seamless and enjoyable shopping experience, increasing engagement and conversions. Below are pro tips and best practices to make your archive page perform at its best.

🛠️ Technical Pro Tips

1. Optimize Page Speed

  • Why It Matters: Slow-loading pages drive customers away.
  • How to Fix:
    • Use optimized product images (compress with tools like TinyPNG).
    • Enable caching with plugins like WP Rocket or W3 Total Cache.
    • Use a CDN (Content Delivery Network) like Cloudflare for faster global delivery.
    • Minimize HTTP requests by combining and minifying CSS/JS files.

2. Enable AJAX for Filters and Pagination

  • Why It Matters: Reduces page reloads and improves user experience.
  • How to Fix:
    • Use a plugin like WooCommerce AJAX Filters for dynamic filtering.
    • For custom solutions, use wp_ajax in WordPress to process filter requests.

3. Use Schema Markup

  • Why It Matters: Boosts SEO by providing search engines with detailed product information.
  • How to Fix:
    • Ensure products use structured data for price, availability, and reviews.
    • Use SEO plugins like RankMath or Yoast WooCommerce SEO for automated schema generation.

4. Mobile Optimization

  • Why It Matters: Over 70% of eCommerce traffic comes from mobile devices.
  • How to Fix:
    • Test responsiveness across devices using tools like Google Mobile-Friendly Test.
    • Use a mobile-first design approach: ensure filters, buttons, and grids are touch-friendly.
    • Enable “sticky” filters or sorting options for mobile usability.

5. Lazy Load Images

  • Why It Matters: Reduces initial load times by loading images only as users scroll.
  • How to Fix:
    • Use the loading="lazy" attribute for images.
    • Enable lazy loading with plugins like Smush or Lazy Load by WP Rocket.

🎨 Design Pro Tips

6. Highlight Filters and Sorting

  • Why It Matters: Helps customers quickly find what they want.
  • How to Fix:
    • Position filters prominently at the top or side of the page.
    • Use sliders for price filters and swatches for colors and sizes.
    • Add custom sorting options like “Most Popular” or “Newest First.”

7. Enhance Product Cards

  • Why It Matters: Clean, attractive product cards improve click-through rates.
  • How to Fix:
    • Include essential details: product name, price, reviews, and a clear CTA (e.g., “Add to Cart”).
    • Use hover effects to display alternate images or quick add-to-cart buttons.
    • Add labels like “New,” “Best Seller,” or “Limited Stock” for extra emphasis.

8. Focus on Typography

  • Why It Matters: Clear, readable text reduces friction for users.
  • How to Fix:
    • Use a legible font with sufficient size (at least 16px).
    • Use bold and contrasting colors for prices and product names.
    • Maintain consistent spacing between elements for a clean look.

9. Use Visual Hierarchy

  • Why It Matters: Guides customers’ attention to important elements.
  • How to Fix:
    • Make CTAs (e.g., “Add to Cart”) the most prominent element.
    • Display product prices and discounts in larger, bolder text.
    • Highlight key filters or categories with contrasting colors.

💡 Functional Pro Tips

10. Enable “Quick View”

  • Why It Matters: Allows users to preview product details without leaving the page.
  • How to Fix:
    • Use plugins like YITH WooCommerce Quick View.
    • Add a “Quick View” button on hover using the woocommerce_after_shop_loop_item hook.

11. Dynamic Free Shipping Message

  • Why It Matters: Encourages customers to increase cart value.
  • How to Fix:
    • Show a dynamic banner indicating how much more the customer needs to spend to get free shipping.

12. Infinite Scroll

  • Why It Matters: Keeps users engaged by eliminating the need for pagination.
  • How to Fix:
    • Use a plugin like WooCommerce Infinite Scroll.
    • Or implement custom AJAX to load products dynamically as users scroll.
  • Why It Matters: Increases average order value by showing complementary products.
  • How to Fix:
    • Display related products or “Frequently Bought Together” items below each product card.

14. Personalized Recommendations

  • Why It Matters: Boosts conversions by showing products tailored to user behavior.
  • How to Fix:
    • Use AI-driven recommendation plugins like Beeketing or AutomateWoo.
    • Add sections like “You May Also Like” or “Recommended for You.”

15. Incorporate Reviews and Ratings

  • Why It Matters: Builds trust and helps users make purchasing decisions.
  • How to Fix:
    • Display star ratings and the number of reviews prominently on product cards.
    • Use plugins like Verified Reviews for WooCommerce for authenticity.

16. Test and Iterate

  • Why It Matters: Every store and audience is unique.
  • How to Fix:
    • Use tools like Google Optimize or Optimizely for A/B testing.
    • Test different grid layouts, button styles, or sorting options to see what works best.

🛍️ Conversion Optimization Pro Tips

17. Add Urgency

  • Why It Matters: Drives quicker purchasing decisions.
  • How to Fix:
    • Display stock counts (e.g., “Only 3 left in stock”).
    • Add sale countdown timers on discounted products.

18. Make CTAs Stand Out

  • Why It Matters: Encourages users to take action.
  • How to Fix:
    • Use bold, contrasting colors for “Add to Cart” or “Buy Now” buttons.
    • Keep the text action-oriented, like “Shop Now” or “Get Yours.”

19. Simplify Navigation

  • Why It Matters: Helps users browse with ease.
  • How to Fix:
    • Add breadcrumbs for easy backtracking.
    • Include category filters or a sticky header with sorting options.

20. Track and Analyze Performance

  • Why It Matters: Data-driven decisions lead to better results.
  • How to Fix:
    • Use Google Analytics with enhanced eCommerce tracking.
    • Analyze bounce rates, click-through rates, and conversion funnels for insights.

🎯 Bonus Tip: Focus on Mobile Optimization

Since most shoppers browse on mobile devices:

  • Enable swipe gestures for product filters.
  • Optimize grid layouts for smaller screens.
  • Test all interactions with a mobile-first mindset.

🎉 Wrapping It Up

By applying these pro tips, you can transform your WooCommerce archive product page into a conversion-optimized, visually stunning, and highly functional part of your store. Whether it’s adding quick view buttons, enabling AJAX filters, or simplifying navigation, the goal is to make shopping as effortless as possible for your customers. 🛍️✨

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