WooCommerce Display Related Products by Custom Attributes – 2024

In this tutorial you will learn how to display related products by custom attributes. Displaying related products in WooCommerce is a great strategy to increase sales and improve customer engagement. Typically, WooCommerce shows related products based on categories or tags. However, this tutorial will guide you on how to tailor the related products section to show items based on custom attributes, making the suggestions more relevant and targeted.

Use Case Example

Imagine you’re selling clothing, and you want to show related products that not only fall into the same category such as ‘shirts’ but are also made from the same material, like ‘cotton’. This focused approach helps customers find products that more closely match their interests and needs.

Prerequisites

Before starting, make sure you have administrative access to your WordPress site and are comfortable with editing PHP files. Implement these changes in a child theme to ensure they are preserved during theme updates.

Step 1: Define the Custom Attribute

For this example, we’ll use ‘Material’ as a custom attribute. Ensure that your products are set with this attribute in WooCommerce under Products > Attributes.

Step 2: Add Custom Code to Your Theme’s functions.php File

To customise related products based on the ‘Material’ attribute, add the following code to your theme’s functions.php file:

// WooCommerce Display Related Products by Custom Attributes
add_filter('woocommerce_product_related_posts_query', 'wcsuccess_custom_related_products_query', 10, 2);

function wcsuccess_custom_related_products_query($query, $product_id) {
    global $wpdb;

    // Get the 'Material' attribute for the current product
    $current_product_material = (array) wc_get_product_terms($product_id, 'pa_material', array('fields' => 'names'));

    if (empty($current_product_material)) {
        return $query; // Return default query if no material is set
    }

    $material = $current_product_material[0]; // Assume single material for simplicity

    // Modify the related product query to filter by material attribute
    $query['join'] .= " INNER JOIN {$wpdb->term_relationships} AS tr ON (p.ID = tr.object_id)
                        INNER JOIN {$wpdb->term_taxonomy} AS tt ON (tr.term_taxonomy_id = tt.term_taxonomy_id)
                        INNER JOIN {$wpdb->terms} AS t ON (tt.term_id = t.term_id)";

    $query['where'] .= $wpdb->prepare(" AND tt.taxonomy = 'pa_material' AND t.name = %s", $material);

    return $query;
}

Explanation of the Code

  • Hook Used: woocommerce_product_related_posts_query to modify the query that fetches related products.
  • Custom Attribute Handling: The function first retrieves the ‘Material’ attribute of the current product.
  • Query Modification: It then modifies the SQL JOIN and WHERE clauses to filter related products based on the same ‘Material’ attribute.
See also  How to show the number of products sold in Woocommerce on the product page

Step 3: Test the Modified Related Products Display

After implementing the code:

  • Visit a product page that has the ‘Material’ attribute set.
  • Scroll down to the related products section.
  • Verify that the displayed related products share the same ‘Material’ attribute.

Customising Further

  • Multiple Attributes: Extend the logic to consider multiple attributes like colour, size, or type.
  • Fallback Logic: Add fallback conditions to show general related products when no matching attribute products are available.

Conclusion

Customising WooCommerce to display related products by custom attributes can significantly refine the shopping experience. By implementing WooCommerce Display Related Products by Custom Attributes, you provide customers with more relevant product suggestions based on specific features or characteristics they are interested in.

See also  WooCommerce How to Display “Product Already in Cart” Instead of “Add to Cart” Button - 2024

It’s essential to test any changes on a staging site before applying them to your live site to ensure that everything works smoothly and enhances the customer journey as expected. This tutorial on how to display related products by custom attributes in WooCommerce should help you engage your customers more effectively and boost your sales.

0 0 votes
Article Rating

Stay In Touch

Was this post helpful? Why not show your support and buy me a coffee?

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top
×