Search code examples
wordpresswoocommercewoothemes

Woocommerce change product style and display it on a page


Sorry in advance for my approximative english. I would like to change product page style on woocommerce for a specific product category (don't display pictures and some other important layout changes). Already made it and it works, the problem is that I would like to display these products on a single page. I tried using woocommerce integrated shortcode [product_page id=$id], the problem is that the custom style and layout I created on content-single-product.php (in woocommerce folder) is not applied using this shortcode. I tried to copy my script on class-ws-shortcodes.php (woocommerce folder) but it didn't worked. What should I do to display the products on a specific page, with the real style of these products page (the custom one I created), and not the woocommerce shortcode one?

Thanks in advance for your answers


Solution

  • There are two ways to achieve this, it just depends on whether you want to edit single-product.php or content-single-product.php. Both will get you to the same end result.

    To do the former, you can use default WordPress functionality and filter the template under given conditions via template_include

    add_filter( 'template_include', 'so_29984159_custom_category_template' );
    function so_29984159_custom_category_template( $template ){
        if ( is_single() && get_post_type() == 'product' && has_term( 'custom_category', 'product_cat' ) ) {
            $template = locate_template( 'single-product-custom.php' );
        }
        return $template;
    }
    

    Or if you'd rather create a custom content-product.php template part, you can use WooCommerce's wc_get_template_part which works in pretty much the same way. Technically I think you can use the same conditional logic, but I tweaked it here to point out the variables WooCommerce makes available at the filter.

    add_filter( 'wc_get_template_part', 'so_29984159_custom_content_template_part', 10, 3 );
    function so_29984159_custom_content_template_part( $template, $slug, $name ){
        if ( $slug == 'content' && $name == 'product' && has_term( 'custom_category', 'product_cat' ) ) {
            $template = locate_template( 'content-product-custom.php' );
        }
        return $template;
    }
    

    In either case the single-product-custom.php or content-product-custom.php would be in your theme's root folder. To put them somewhere else, just change the path in the locate_template() argument.