Wild Jim

Thanks Frank, we were able to shut down the woo output and set up the page. The issue has been resolved.

<?php

/**

 * 1. COMPLETELY DISABLING DEFAULT CONTENT

 * We use the 'wp' hook to ensure page conditional checks (is_shop) are ready.

 */

add_action( 'wp', function() {

    if ( is_shop() ) {

        // Stop WooCommerce from showing categories/subcategories

        remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );

        // Remove the default WooCommerce product loop

        remove_action( 'woocommerce_no_products_found', 'wc_no_products_found', 10 );

        // Hide standard product output by forcing the main query to return nothing

        add_action( 'pre_get_posts', function( $query ) {

            if ( $query->is_main_query() ) {

                $query->set( 'post__in', array( 0 ) );

            }

        });

    }

});

/**

 * 2. RENDERING CUSTOM CATEGORY ROWS

 * We use 'woocommerce_archive_description' which appears BEFORE the main loop

 * to ensure our content sits correctly under the title.

 */

add_action( 'woocommerce_archive_description', function() {

    if ( ! is_shop() ) return;

    $categories = get_terms([

        'taxonomy'   => 'product_cat',

        'hide_empty' => true,

        'parent'     => 0, // Only get top-level categories

    ]);

    foreach ( $categories as $category ) {

        echo '<div class="category-section" style="margin-bottom: 40px; clear: both;">';

        echo '<h2 class="category-title">' . esc_html( $category->name ) . '</h2>';

        $products = new WP_Query([

            'post_type'      => 'product',

            'posts_per_page' => 4,

            'tax_query'      => [[

                'taxonomy' => 'product_cat',

                'field'    => 'term_id',

                'terms'    => $category->term_id,

            ]],

        ]);

        if ( $products->have_posts() ) {

            // Use Storefront's built-in grid classes for 4 columns

            echo '<div class="woocommerce columns-4">';

            woocommerce_product_loop_start();

            while ( $products->have_posts() ) {

                $products->the_post();

                wc_get_template_part( 'content', 'product' );

            }

            woocommerce_product_loop_end();

            echo '</div>';

        }

        wp_reset_postdata();

        echo '</div>';

    }

}, 15 );

We are getting there. This adds our custom content (a row of 4 products from each category) but we have not been able to shut down the original output on the page. It is displaying under the last row of 4 products from the last category. Any help would be greatly appreciated.

@frankremmy @saivutukuru Guys we have another quandary that we have not been able to run down. This page https://www.smokingblends.com/shop/herbs/ . We have a plugin that allows us to use html in category descriptions. However you can see the link on this page is underlined but it will not remove on hover. Any help would be appreciated. We would be happy to leave positive feedback for this theme and already have.

• This reply was modified 9 months, 2 weeks ago by Wild Jim.

Thanks this is what we have come up with for now. The links on the shop/home page look and act like the links on other pages.

/* === Shop page intro text links — match other pages === */

/* Classic template wrapper */
body.woocommerce-shop .woocommerce-products-header .page-description a,
body.woocommerce-shop .woocommerce-products-header .page-description a:visited {
  text-decoration: underline;
}

/* Block-based archive wrapper (if your setup ever uses it) */
body.woocommerce-shop .wp-block-woocommerce-archive-description a,
body.woocommerce-shop .wp-block-woocommerce-archive-description a:visited {
  text-decoration: underline;
}

/* Hover: remove underline (same as the rest of the site) */
body.woocommerce-shop .woocommerce-products-header .page-description a:hover,
body.woocommerce-shop .wp-block-woocommerce-archive-description a:hover {
  text-decoration: none;
}

Sorry about that. We looked over several options before trying this one. I signed up and was under the impression it covered both wordpress and woocommerce. I can see by reading the plugin page, it does not.

Hey @babylon1999,

Thanks for you help.

The script is replacing this:

if ( class_exists( ‘WooCommerce’ ) && ( is_product_category() || is_shop() || is_product() ) ) {

With this.

if ( class_exists( ‘WooCommerce’ ) && ( is_product() ) ) {

You are eliminating two checks. It will unlikely make a huge difference speed wise but it is simpler and seems to accomplish the same thing.

Hey Pepe, @anastas10s

Thanks for your help as always. This is interesting. I took a look at Etsy, Ebay and Amazon. They all use catalog images in the 300 x 300 range, unless they have a code that checks for high-res displays. Something to think about. We adjusted the images using the code below.

function set_max_srcset_width( $max_width ) {

    if ( class_exists( ‘WooCommerce’ ) && ( is_product_category() || is_shop() ) ) {

        $max_width = 324;

    } else {

        $max_width = 768;

    }

    return $max_width;

  }

  add_filter( ‘max_srcset_image_width’, ‘set_max_srcset_width’ );

Just discovered this code does not work on the product page. All of the related products are 786 when displayed at 324.

• This reply was modified 2 years, 8 months ago by Wild Jim.
• This reply was modified 2 years, 8 months ago by Wild Jim.

@anastas10s We searched for a long time for another option. All we could find was the same code that went on the single.php page, or for plugins. The information on that page should do the trick. It has a different code that goes on a completely different page. Thanks