I Have some minor question regarding visual settings

Hi @Kulimary,

1. You’re on the right track — your current code forces in-stock products to appear first in the default WooCommerce catalog view. However, the issue arises because WooCommerce’s sorting options like “Sort by price” or “Sort by popularity” override the posts_clauses you modified. That’s why your “in-stock first” logic is being ignored when users select another sort method.

To fix this and preserve sorting by stock status across different sorting methods, you can take a slightly different approach that uses a custom orderby hook. Here’s a more flexible solution that applies the stock sorting only when it’s appropriate, and combines better with existing Woo sorting options.

add_filter('woocommerce_get_catalog_ordering_args', 'custom_woocommerce_catalog_ordering_args');
function custom_woocommerce_catalog_ordering_args($args) {
    // Add meta_query to prioritize in-stock products
    $args['meta_query'][] = array(
        'key'     => '_stock_status',
        'value'   => 'outofstock',
        'compare' => '!=',
    );

    return $args;
}

add_filter('posts_clauses', 'custom_orderby_stock_status_clauses', 100, 2);
function custom_orderby_stock_status_clauses($clauses, $query) {
    if (!is_admin() && is_woocommerce() && (is_shop() || is_product_category() || is_product_tag())) {
        global $wpdb;

        // Only add the join if not already sorting by stock status
        if (strpos($clauses['join'], 'istock') === false) {
            $clauses['join'] .= " LEFT JOIN {$wpdb->postmeta} AS istock ON {$wpdb->posts}.ID = istock.post_id AND istock.meta_key = '_stock_status'";
        }

        // Append stock status sort to existing ORDER BY clause
        if (!empty($clauses['orderby'])) {
            $clauses['orderby'] = "istock.meta_value ASC, " . $clauses['orderby'];
        } else {
            $clauses['orderby'] = "istock.meta_value ASC";
        }
    }

    return $clauses;
}

2. Please navigate to Appearance > Theme Options > WooCommerce(shop) > Shop > Shop Page Layout > Product added notification > select None: https://prnt.sc/h1_jQMd3fcDp.

3. Please add this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

body .content-product .product-title {
    min-height: 50px;
}

Hope it helps!

Best Regards,
8Theme’s Team

Dear Kulimary,

It’s great having you in our WordPress & WooCommerce community!

Every insight you share helps us refine XStore and build tools that empower thousands of online store owners worldwide.

Leave Feedback →
(takes less than a minute)

Together, we grow stronger with every release.

Topic closed.
The 8Theme Team