- This topic has 8 replies, 3 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
September 1, 2022 at 7:46 pm #2331006xinghui
How to Customize Single Product Pages,like this:
Is it possible to use the function of hook blocks?
September 1, 2022 at 8:33 pm #2331023Fernando Customer SupportHi 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
September 2, 2022 at 3:18 am #2331295xinghuiI don’t quite understand it, can you tell me how to make a single product page?
September 2, 2022 at 5:37 am #2331412DavidStaffCustomer SupportHi 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.September 2, 2022 at 6:02 am #2331434xinghuiI 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-elixirSeptember 2, 2022 at 6:33 am #2331448DavidStaffCustomer SupportThe 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?
September 2, 2022 at 6:41 am #2331452xinghuiYes,But I still want to fully customize my product page, any good way to recommend? Plugin or write a PHP product page directly
September 2, 2022 at 6:55 am #2331467xinghuiOr I can use woocommerce’s product shortcode to achieve
September 2, 2022 at 7:34 am #2331488DavidStaffCustomer SupportI 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.
-
AuthorPosts
- You must be logged in to reply to this topic.