[Support request] Customize Single Product

[xinghui]

How to Customize Single Product Pages,like this:

Is it possible to use the function of hook blocks?

[Fernando]

Hi Xinghui,

It’s not possible with Elements. You can use Element to hook Blocks within the single product page, however, you would need custom CSS or a third party plugin to style actual single product elements.

The styling available in GP for the single product pages are these: https://docs.generatepress.com/article/woocommerce-overview/#single-product

[xinghui]

I don’t quite understand it, can you tell me how to make a single product page?

[David]

Hi there,

customizing Woocoomerce pages is not simple.
What specific things on the example site would you want to copy ? Let us know and we may be able to advise.

[xinghui]

I want to customize my single product page like this,can I re-add a page or use Elements blocks or hooks for customization
Example site product page: https://www.reddbar.com/collections/lab/products/r-e-d-d-lab-cold-brew-latte-elixir

[David]

The main differences i see on that site are:

1. The general font and color styles which can be set in the Customizer.

2. There are No Product Tabs. So do you want the Description, Reviews and Additional Information to be displayed without the tabs?

[xinghui]

Yes，But I still want to fully customize my product page, any good way to recommend? Plugin or write a PHP product page directly

[xinghui]

Or I can use woocommerce’s product shortcode to achieve

[David]

I personally would use the action / filter hooks that Woocommerce provides to make customizations.

For example this will remove the Product Tabs but keep each of the tabs content:

// Remove
function remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );
    unset( $tabs['reviews'] );
    unset( $tabs['additional_information'] );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98, 1 );

// Tabs callback function after single content.
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_product_description_tab' );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_product_additional_information_tab' );
add_action( 'woocommerce_after_single_product_summary', 'comments_template' );

Or the many action hooks available in the single product template, see here:

https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

And those you can use PHP or the GP Block Elements to hook in content.

[Author]

Posts