Question posted in 
We’ve just purchased a stock theme, Blockshop, for our forthcoming Woocommerce site. The team here are comfortable with HTML and CSS, and we have a loose understanding of the purpose of PHP, but no real knowledge of applying or altering it.
On our category page, there is a DIV that holds two filters – one product filter and one sort by filter – and we’d like it to be repositioned underneath the category description, to make the page easier to follow.
Here is an example of a populated category page: https://onemanmusic.co.uk/yamaha-clp-clavinova/ – you’ll see from the page source that the DIV in question is “shop-header-wrapper visible” – ideally we’d like this to display beneath the woocommerce-products-header DIV if at all possible, but we’re all clueless as to where to locate the relevant HTML within the theme files.
I have a loose understanding that the PHP is calling the filter function to appear, but I’ve no idea how to tell it to show in the desired place.
I’ve located the script in question, and I’m able to alter it and remove it from display, but I can’t seem to reposition it:
if ( ! function_exists( 'blockshop_shop_archive_header' ) ) :
/**
* Header area for Shop Archive
*/
function blockshop_shop_archive_header() {
if ( is_shop() || is_product_category() || is_product_tag() ) :
$categories = get_terms(
'product_cat',
array(
'hide_empty' => 0,
'parent' => 0,
)
);
if ( woocommerce_get_loop_display_mode() === 'subcategories' || woocommerce_get_loop_display_mode() === 'both' ) {
$subcategories = $categories;
}
$current_cat = 0;
if ( is_product_category() ) {
global $wp_query;
$current_cat = $wp_query->get_queried_object();
$current_cat_id = isset( $current_cat->term_id ) ? $current_cat->term_id : 0;
if ( 0 !== $current_cat_id ) {
$subcategories = get_terms(
'product_cat',
array(
'hide_empty' => 0,
'parent' => $current_cat_id,
)
);
}
}
?>
<div class="shop-header-wrapper">
<div class="shop-header-block">
<div class="filter">
<?php if ( is_active_sidebar( 'shop-filters-widgets' ) ) : ?>
<span class="toggle-filter">
<i class="icon-filter"></i><span><?php esc_html_e( 'Filter', 'block-shop' ); ?></span>
</span>
<?php endif; ?>
</div>
<?php if ( 'yes' === BlockShop_Opt::get_option( 'category_menu' ) ) : ?>
<div class="shop-categories">
<ul class="shop-list">
<?php
$shop_page_url = get_permalink( wc_get_page_id( 'shop' ) );
if ( ! empty( $shop_page_url ) ) :
?>
<li class="cat-item
<?php
if ( is_shop() ) {
echo 'current-cat';}
?>
">
<?php
if ( is_shop() ) {
echo '<h1>';}
?>
<a href="<?php echo esc_url( $shop_page_url ); ?>"><?php echo esc_html( get_the_title( wc_get_page_id( 'shop' ) ) ); ?></a>
<span class="count"><?php echo esc_html( wc_get_loop_prop( 'total' ) ); ?></span>
<?php
if ( is_shop() ) {
echo '</h1>';}
?>
</li>
<?php
endif;
if ( ! empty( $categories ) ) :
foreach ( $categories as $cat ) :
if ( 0 === $cat->count ) {
continue;
}
?>
<li class="cat-item
<?php
if ( isset( $current_cat_id ) && $current_cat_id === $cat->term_id ) {
echo 'current-cat';}
?>
">
<?php
if ( isset( $current_cat_id ) && $current_cat_id === $cat->term_id ) {
echo '<h1>';}
?>
<a href="<?php echo esc_url( get_term_link( $cat->slug, 'product_cat' ) ); ?>"><?php echo esc_html( $cat->name ); ?></a>
<span class="count"><?php echo esc_attr( $cat->count ); ?></span>
<?php
if ( isset( $current_cat_id ) && $current_cat_id === $cat->term_id ) {
echo '</h1>';}
?>
</li>
<?php
endforeach;
endif;
?>
</ul>
<?php the_widget( 'WC_Widget_Layered_Nav_Filters' ); ?>
</div>
<?php endif; ?>
<div class="sort-products">
<?php do_action( 'blockshop_woocommerce_catalog_ordering' ); ?>
</div>
</div>
<?php if ( is_active_sidebar( 'shop-filters-widgets' ) ) : ?>
<div class="expanded-filter">
<div class="woocommerce-widgets-wrapper">
<?php dynamic_sidebar( 'shop-filters-widgets' ); ?>
</div>
</div>
<?php endif; ?>
</div>
<?php
endif;
}
endif;
add_action( 'woocommerce_before_main_content', 'blockshop_shop_archive_header', 10 );
I’d anticipated to simply be able to cut and paste the code into the right place, but clearly this isn’t the layout in question.
Apologies in advance if this is embarrassingly obvious.
2
Answers
I applied the following:
...which has placed the block below the category description, as desired. Thank you for your help - it gave me the right direction!
To modify this you need to alter the rendering order, from your code
add_action( 'woocommerce_before_main_content', 'blockshop_shop_archive_header', 10 );This block of code sets the priority to 10, so in order to make this appear after
woocommerce-products-headeryou need to assign a greater priority toblockshop_shop_archive_header.Please see excerpt from the docs
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )The order of execution is determined by the
$priority, so in your instance if you assign a priority greater thanwoocommerce-products-headertoblockshop_shop_archive_headerit should appear after it.Please see the documentation for more info