Activate Woocommerce image gallery features on shop archive page

Question

I'm trying to build a Woocommerce shop with all products listed with full product information (excerpts, pictures, title, price, etc.) on the shop archive page. No product detail pages.

I have loaded the simple-page content instead of page-content in the loop of my custom archive-product.php in my theme/woocommerce folder.

My problem is, that the product image gallery features (zoom, lightbox, slider) don't work on the archive page, only on single-product-page.

How can I unlock the gallery features for the shop and category archive pages?

I think, that wordpress or woocommerce somehow deactivated certain javascript or php functions for the gallery features on this page. But I couldn't figure out where to make changes in order to bring them back in.

Here is the code I use for the loop in my moded archive-product.php. I simply changed 'product' to 'single-product' in order to load the full product content:

<?php while ( have_posts() ) : the_post(); ?>

    <?php
        /**
        * woocommerce_shop_loop hook.
        *
        * @hooked WC_Structured_Data::generate_product_data() - 10
        */
    do_action( 'woocommerce_shop_loop' );
    ?>

    <!-- This part of the template has been moded for the product archive page to show the complete content of the single product page -->

    <?php wc_get_template_part( 'content', 'single-product' ); ?>

<?php endwhile; // end of the loop. ?>

Please read stackoverflow.com/help/how-to-ask . Try to describe your problem more clearly and avoid external links. — Doomenik
ok I updated it and inserted some code. hope it is fine now? — jolo

jolo jolo · Accepted Answer · 2017-11-27T08:47:24

In case anyone ever has the same problem as me and wants to activate the woocommerce image gallery features on the archive page same as on the product page, add this code to the functions.php in your theme folder:

add_action( 'wp_enqueue_scripts', 'gallery_scripts', 20 );

function gallery_scripts() {
    if ( is_archive()) {
        if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) { 
            wp_enqueue_script( 'zoom' );
        }
        if ( current_theme_supports( 'wc-product-gallery-slider' ) ) {
            wp_enqueue_script( 'flexslider' );
        }
        if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) {
            wp_enqueue_script( 'photoswipe-ui-default' );
            wp_enqueue_style( 'photoswipe-default-skin' );
            add_action( 'wp_footer', 'woocommerce_photoswipe' );
        }
        wp_enqueue_script( 'wc-single-product' );
    }

}

Activate Woocommerce image gallery features on shop archive page

1 Answers