Woocommerce product catalog, products with different description

This is quite an undertaking and difficult to answer thoroughly but this should help you on your way.

I would definitely stick with variations because it makes sense from a site structure and management point of view.

By default, WooCommerce will show information relevant to the option selected i.e. images, dimensions, description etc. That means when you select FAST 1X from the dropdown it will show everything related to that If that’s not working you’ll need to investigate why but it’ll be down to your custom theme.

You’ll more than likely need to tweak some of the WooCommerce templates to suit your layout, though. Overriding is the best way to do this as you won’t lose any custom changes when the plugin updates and the best resource for this is: https://docs.woocommerce.com/document/template-structure/ (For future readers: search ‘WooCommerce template override’ if the link is dead).

To override WooCommerce templates, copy the file from wp-content/plugins/woocommerce/templates/path/to/template/file.php to wp-content/themes/yourtheme/woocommerce/path/to/template/file.php. As long as the file path’s match WooCommerce will load your override.

The .content-single-product.php template is a good starting point for changing the layout of the page and will allow you to see what hooks are being called. This will then let you remove any of them and add your own to tweak the layout of the page.

To add and remove hooks you need to add the following to your theme’s functions.php file:

function woocommerce_actions() {
    // Remove excerpt from product view
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

    // Optionally add it elsewhere
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_template_single_excerpt', 20 );

    // or hook your own function
    add_action( 'woocommerce_single_product_summary', 'custom_template_single_excerpt', 20 );
}
add_action( 'wp_head', 'woocommerce_actions' );

function customer_template_single_excerpt() {
    return _e( "My custom excerpt", "custom-theme" );
}

Whilst vague this is the route you need to take and I’d recommend reading up on the various parts to get a better understanding of how to override and rearrange the layout.

Related Posts: