Today I am sharing the customization of the product details page in Woo, and in Part 1 I go to the custom section “Similar Products” or otherwise “Related Products”.
Normally, the default product in the FS theme is set to the last
To change this part, I have a number of ways as follows, you follow below:
But first you have to delete the display below:
// Add at functions.php file remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
or: into the path
wp-content/themes/flatsome/woocommerce/single-product/layouts/product.php
and delete the line: do_action( 'woocommerce_after_single_product_summary' );
lưu ý: this is erase tabs tabs, upsell …. (Not recommended all users, this only refer to the reference)
Next …. we add the related product
Option 1:
Add at functions.php file
add_action( 'Location', 'woocommerce_output_related_products', prioritize );
– “Location” you learn the lines of code at product.php in the path wp-content/themes/flatsome/woocommerce/single-product/layouts/product.php
– “prioritize”: The order of priority is displayed when there are multiple hook actions in the same position
For example I would like to add SP to the end of the summary (under add cart, share). Where do you want to add the hook?
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_related_products', 31 );
Option 2:
Add at product.phpin the path wp-content/themes/flatsome/woocommerce/single-product/layouts/product.php nghĩa là tôi phá vỡ bố cục của file product.php
Các bạn tìm đến vị trị cần thêm sp tương tự thêm đoạn code sau:
<?php woocommerce_output_related_products(); ?> // Function này để gọi sp liên quan
or otherwise
các bạn có thể tự tạo 1 action cho riêng mình, sau đó hook vào action mình tạo ra (không cần hook vào action của theme quy định)
To add a simple action
<?php do_action( 'hdev_action_related_prod' ); ?>
và sau đó ra file functions.php thực hiện hook vào như cách 1 (nhưng thay bằng vị trí là name mình tạo), code như bên dưới:
add_action( 'hdev_action_related_prod', 'woocommerce_output_related_products' );
Finally see your results. Good luck!
Demo at here