Hi Tobias,
Thank you for waiting and sorry about the delay in getting back on this.
I've performed some tests on my own website and this is the workaround that I'll suggest, to design the shop page ( hidden link ) similar to the product category archive pages ( e.g. hidden link )
1. Currently, the "Products" WordPress Archive is set for both, the "Products (post type archive)" and the "Product categories (taxonomy archive)".
From the "WordPress Archive" block setting, keep it selected for the "Product categories (taxonomy archive)", but not for the "Products (post type archive)".
Screenshot: hidden link
2. Next, go to WP Admin -> Appearance -> Customize -> WooCommerce -> Product Catalog and for "Shop page display" select "Show products". This will ensure that the new WordPress Archive that we're going to create in the next step is applied to the shop page.
3. After that, please go to WP Admin -> Toolset -> Settings -> General and select "Show both the legacy and Blocks interface and let me choose which to use for each item I build" for the "Editing experience" field.
Also, select "Classic Editor" for "Editor to use for Content Templates" and "Editor to use for WordPress Archives" fields.
4. From WP Admin -> Toolset -> WordPress Archives (using the classic editor), create a new archive for the "Products" post type archive but keep the content of the loop in the loop editor section empty, as we don't want to show products on this shop page:
Example:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
5. From WP Admin -> Toolset -> Views, create a new taxonomy view to show "Product Categories" and you can design its output in the "Loop Editor" section to match the output of your product category archive page like this:
[wpv-layout-start]
[wpv-items-found]
<div class="js-wpv-loop-wrapper">
<ul class="wpv-loop js-wpv-loop">
<!-- wpv-loop-start -->
<wpv-loop>
<li>
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode">
<div class="wp-block-columns are-vertically-aligned-center">
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:15%">
<div class="tb-field tb-field--left">
[get_terms_thumbnail id="[wpv-taxonomy-id]" title="[wpv-taxonomy-title]" class="attachment-custom aligncenter"]
</div>
</div>
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:67.5%">
<div class="tb-field tb-field--left">
<a href="[wpv-taxonomy-url]">[wpv-taxonomy-title]</a>
</div>
</div>
<div class="wp-block-column" style="flex-basis:17.5%">
<div class="tb-button tb-button--center">
<a class="tb-button__link" href="[wpv-taxonomy-url]">
<i class="tb-button__icon"></i>
<span class="tb-button__content">learn more</span>
</a>
</div>
</div>
</div>
<hr class="wp-block-separator is-style-wide">
</div>
</li>
</wpv-loop>
<!-- wpv-loop-end -->
</ul>
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
6. You'll need to register a custom shortcode [get_terms_thumbnail] that we've used in the last step, to get the image thumbnail from the product categories:
add_shortcode('get_terms_thumbnail', 'get_terms_thumbnail_func');
function get_terms_thumbnail_func($atts) {
$a = shortcode_atts( array(
'id' => '',
'title' => '',
'class' => ''
), $atts );
$thumbnail_id = get_term_meta( $a['id'], 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
return '<img src="'.$image.'"alt="'.$a['title'].'"class="'.$a['class'].'" />';
}
}
Note: This new shortcode accepts three parameters: id, title, and class and the above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through active theme's "functions.php" file.
7. The last step would be to include this taxonomy view's shortcode at the start of content in the "Loop Editor" section of the WordPress Archive for the products post type archive, created in step 4.
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
