I am setting up a woocommerce website using the enfold theme and wanted to guidance as to how I might be able to change the layout of the page.
I have purchased an extension for Woocommerce called Woocommerce Composite Products. It works perfectly and has caused no errors or issues.
My problem is the following:
I want a fairly basic/common page layout for my product pages. I have done a rough sketch and linked it below.
I am fairly good at styling using CSS, I am just not sure how to place certain elements of the shop page in the correct order/place I require them.
Many thanks,
Hey Luke86,
Thank you for using Enfold.
This layout can’t be done with css alone. You have to modify the single product template with woocommerce hooks. For example, if you want to move the tabs below the product summary and make it full width, add this in the functions.php file:
add_action('init', 'woocommerce_init_mod', 100);
function woocommerce_init_mod() {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 1 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 21 );
}
For more info, please refer to this link: https://docs.woocommerce.com/wc-apidocs/hook-docs.html
And review the config-woocommerce > config.php file.
Best regards,
Ismael
Thanks I will take a good long look into this.
How about the Woocommerce Composite Products, how would I change the order of that plugin, do you have any idea how I could use similar code to move that above the reviews?
Hi,
Please refer to this post – https://docs.woocommerce.com/document/composite-products/composite-products-tips-tricks-and-snippets/#sort_by_tweaks
Best regards,
Yigit