Well, made a first attempt, with the help of your lovely knowledgebase and ai question input field. And a bit of my AI assistant to clean it up and help me.
I made a search.php
<?php
get_header();
global $asp_cats, $asp_products, $asp_pages, $asp_other;
$search_query = get_search_query();
$p_asid = isset($_GET['p_asid']) ? (int) $_GET['p_asid'] : 0;
$asp_active = isset($_GET['asp_active']) ? (int) $_GET['asp_active'] : 0;
// Alleen ASP gebruiken als markers kloppen (pas 8 aan als jouw instance anders is)
$use_asp = ($asp_active === 1 && $p_asid === 8);
// Safeguards
$asp_cats = is_array($asp_cats) ? $asp_cats : [];
$asp_products = is_array($asp_products) ? $asp_products : [];
$asp_pages = is_array($asp_pages) ? $asp_pages : [];
$asp_other = is_array($asp_other) ? $asp_other : [];
?>
<div class="custom-search-results-container">
<div class="container">
<div class="search-header">
<h1 class="search-title">
<?php echo $search_query
? sprintf( esc_html__('Search Results for: "%s"', 'textdomain'), esc_html($search_query) )
: esc_html__('Search Results', 'textdomain'); ?>
</h1>
<div class="search-form-wrapper">
<?php echo do_shortcode('[wpdreams_ajaxsearchpro id=8]'); ?>
</div>
</div>
<?php if (!$use_asp): ?>
<p><?php _e('Ajax Search Pro is not active on this request (missing asp_active=1 & p_asid).', 'textdomain'); ?></p>
<?php else: ?>
<div class="search-results-columns">
<!-- LEFT: Categories -->
<div class="search-col categories-col">
<?php if (!empty($asp_cats)): ?>
<h2><?php _e('Product Categories', 'textdomain'); ?></h2>
<ul class="category-list">
<?php foreach ($asp_cats as $c): ?>
<?php
$name = $c->title ?? '';
$link = $c->link ?? '#';
$thumb = $c->image ?? '';
?>
<li class="category-item">
<a href="<?php echo esc_url($link); ?>">
<?php if ($thumb): ?>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($name); ?>">
<?php endif; ?>
<span><?php echo esc_html($name); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<!-- RIGHT: Products + Pages -->
<div class="search-col products-pages-col">
<?php if (!empty($asp_products)): ?>
<h2><?php _e('Products', 'textdomain'); ?></h2>
<div class="products-grid">
<?php foreach ($asp_products as $p): ?>
<?php
$title = $p->title ?? '';
$link = $p->link ?? '#';
$img = $p->image ?? '';
$price_html = '';
if (!empty($p->id) && function_exists('wc_get_product')) {
$product_obj = wc_get_product((int)$p->id);
if ($product_obj) $price_html = $product_obj->get_price_html();
}
?>
<div class="product-card">
<a href="<?php echo esc_url($link); ?>">
<?php if ($img): ?>
<img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr($title); ?>">
<?php endif; ?>
<h3><?php echo esc_html($title); ?></h3>
<?php if ($price_html): ?>
<div class="product-price"><?php echo wp_kses_post($price_html); ?></div>
<?php endif; ?>
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if (!empty($asp_pages)): ?>
<h2><?php _e('Pages & Posts', 'textdomain'); ?></h2>
<ul class="pages-list">
<?php foreach ($asp_pages as $pg): ?>
<li>
<a href="<?php echo esc_url($pg->link ?? '#'); ?>"><?php echo esc_html($pg->title ?? ''); ?></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</div><!-- /columns -->
<?php if (!empty($asp_other)): ?>
<div class="search-section other-results">
<h2><?php _e('Overige resultaten', 'textdomain'); ?></h2>
<ul class="other-list">
<?php foreach ($asp_other as $o): ?>
<li><a href="<?php echo esc_url($o->link ?? '#'); ?>"><?php echo esc_html($o->title ?? ''); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>'
The instance has ID 8 by the way
put this in the functions.php
// Zet deze op true als je een var_dump van de ASP-results wilt
add_filter(‘asp_results’, function($results, $id) {
if ($id != 8) return $results; // Alleen search instance ID 8 gebruiken
global $asp_cats, $asp_products, $asp_pages, $asp_other;
$asp_cats = $asp_products = $asp_pages = $asp_other = [];
foreach ($results as $r) {
// Categorieën
if (
(isset($r->taxonomy) && $r->taxonomy === ‘product_cat’) ||
(isset($r->post_type) && $r->post_type === ‘product_cat’)
) {
$asp_cats[] = $r;
continue;
}
// Producten
if (isset($r->post_type) && $r->post_type === ‘product’) {
$asp_products[] = $r;
continue;
}
// Pagina’s of blogposts
if (isset($r->post_type) && in_array($r->post_type, [‘page’, ‘post’], true)) {
$asp_pages[] = $r;
continue;
}
// Rest = overige resultaten
$asp_other[] = $r;
}
return $results; // Nodig zodat ASP verder werkt
}, 10, 2);’
And CSS
`/* Custom Search Results Page Styles */
/* Container grid */
/* 2 kolommen lay-out */
.custom-search-results-container .search-results-columns {
display: grid;
grid-template-columns: 25% 1fr;
gap: 2rem;
align-items: start;
}
/* Lists reset & basis */
.custom-search-results-container .category-list,
.custom-search-results-container .pages-list,
.custom-search-results-container .other-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Categorieën links */
.custom-search-results-container .category-item {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 12px;
}
.custom-search-results-container .category-item img {
width: 40px; height: 40px;
object-fit: cover; border-radius: 4px;
}
/* Product grid rechts */
.custom-search-results-container .products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
gap: 1.5rem;
}
.custom-search-results-container .product-card img {
width: 100%; height: auto; display: block; border-radius: 4px;
}
.custom-search-results-container .product-card h3 {
font-size: 1rem; margin: .5rem 0 0;
}
.custom-search-results-container .product-price {
margin-top: .25rem;
}
/* Secties spacing */
.custom-search-results-container .search-section { margin: 0 0 2rem; }
.custom-search-results-container .search-section h2 { margin: 0 0 1rem; }
/* Overige resultaten klein & subtiel */
.custom-search-results-container .other-results { font-size: .9rem; color: #666; }
.custom-search-results-container .other-results h2 {
font-size: 1rem; margin-bottom: .5rem; color: #999;
}
/* Responsief */
@media (max-width: 992px) {
.custom-search-results-container .search-results-columns {
grid-template-columns: 1fr;
}
}’
Somehow my xstore theme kept going back to the normal wp results.
I still have to tweak it, and maybe I’ll put it back into an Elementor grid or loop.
It could also be that I made a mess of my code because a few full days of trying made me cross eyed.Sorry.
I’m open for suggestions. this is on my staging by the way, not on production 😉