Archived topic
blog category and product category on same page
12 replies · Started by Magnus on November 15, 2022
Hello,
I use the same category names (e.g. Category "Summer") in my Blog Posts and in my products (e.g. Category "Summer"). I'm looking for a way to show both category sources on the same page. Any ideas?
Thanks, Magnus
Hi Magnus,
Try using a query loop block from GenerateBlocks, you can add a query loop block to show the posts with the summer category, and another query loop block to show the products with the summer category.
https://wordpress.org/plugins/generateblocks/
https://docs.generateblocks.com/article/query-loop-overview/
Hello Ying,
Thank you for this solution. This works perfect. The downside is, that each new post or product must be added manually. With a growing amount of posts and products it’s an effort I want to prevent. Is there any chance to e.g. modify an category archive page to show product categories as well?
that each new post or product must be added manually.
The new posts/page should always show automatically, no need to add manually.
Are you sure you are using a query loop block?
Hello Ying,
you are right, I didn't used a query loop block. Thanks for the note. With this tipp it works very well.
Two question regarding:
1. each query loop block is ordered by date. Now only one block is sorted by date, then the other. Is there a way to sort both blocks together?
2. Is it also possible to sort by individual fields (ACF)?
Thank you!
Hi there,
1. I am not sure what you mean ? Do both blocks have the same order parameters ?
2. See here on how to order using a custom field:
Hi David,
thank you for your reply.
Regarding #1:
I have two query loop blocks, ordered by date. First Block for example shows posts:
1) Post A Jan 2022
2) Post B Feb 2022
3) Post C Mar 2022
followed by the second block:
4) Post D Jan 2022
5) Post E Feb 2022
6) Post F Mar 2022
But it would be nicer if both query loop could be ordered like this
1) Post A Jan 2022
2) Post D Jan 2022
3) Post B Feb 2022
4) Post E Feb 2022
5) Post C Mar 2022
6) Post F Mar 2022
Hope this clearifies my "problem"
Regarding #2:
I've implemented the php in the functions.php of my child theme:
add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
// apply filter if loop has class: my-class-name
if (
! empty( $attributes['className'] ) &&
strpos( $attributes['className'], 'order-by-score-value' ) !== false
) {
// merge meta_key my-custom-field into query
return array_merge( $query_args, array(
'meta_key' => 'score_value',
'orderby' => 'meta_value',
'order' => 'DESC',
) );
}
return $query_args;
}, 10, 2 );
The grid within the query loop has the additional css class order-by-score-value and the ACF Field has the name score_value. But the order will not work, see my page: https://ride-with-love.bike/ride-with-love-mtb-enduro-touren/ The Order should be DESC of the values "7.5" etc.
Hello,
an update from my side:
The Code for ordering by ACF custom fields does the job
add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
// apply filter if loop has class: my-class-name
if (
! empty( $attributes['className'] ) &&
strpos( $attributes['className'], 'order-by-score-value' ) !== false
) {
// merge meta_key my-custom-field into query
return array_merge( $query_args, array(
'meta_key' => 'score_value',
'orderby' => 'meta_value',
'order' => 'DESC',
) );
}
return $query_args;
}, 10, 2 );
I had a plugin that messed up the order. After deinstalling the plugin the code works perfect!
For sorting posts and products on the same page I've coded a simple Template php file using with a regular blog-post, which runs great
$args = array(
'post_type' => array('product', 'post'),
'tax_query' => array(
'relation' => 'OR',
array(
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => ['82', '85'],
),
array(
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => ['96'],
),
),
'posts_per_page' => 999,
'orderby' => 'meta_value_num',
'meta_key' => 'score_value',
'order' => 'DESC',
);
See my Test-Page: https://ride-with-love.bike/test/
How can I change the layout of my custom Template PHP into a two column layout?
Thanks, Mags
Glad to hear you figured that out :)
2 columns, edit the Query Loop block, inside there is a Grid Block, and inside that is the Post Template block <-- select that. In its settings change the Width to 50%
Hi David,
thanks for your reply. I call my posts & products completely with a custom-template.php. So I use the WP Editor only to connect an empty post with my custom-template.php. Thes custom-template does the job and is calling & showing the complete content directly.
I haven't found an other solution to mix posts and products on one page and order them together.
So I guess I must use some css oder html code to set-up a two column layout. But I haven't found a working solution so far.
Hopefully my answer will help to understand my request.
Try this CSS:
@media (min-width: 769px) {
main#main {
display: flex;
flex-wrap: wrap;
}
main#main > .gb-grid-column {
width: 50%;
}
main#main > .gb-grid-column:nth-child(odd) {
padding-right: 25px;
}
main#main > .gb-grid-column:nth-child(even) {
padding-left: 25px;
}
}
Hello Ying, works perfect :-) Thank you!
No problem :)