Hello,
I am in the process of sorting out a follow up email which I want to include a link which will take people to the review section of a product page.
What link do I need to include to go to the review section?
Hi @dihetherington,
Thanks for writing in.
I’m not sure about your question but it looks like it’s more related to Woocommerce feature. Have you tried contacting the Woocommerce developer?
The review feature is on the same product page, so I assume it’s the product URL as well?
Thanks!
Hi Rad,
Yes it is the product url but then there is normally #reviews added at the end to go to the review section of the product.
However after looking at your code in inspector it looks like tour theme has customised this, not made it easy to achieve.
Please help
Hello There,
Normally you can use this link for example:
http://demo.theme.co/shop-icon/product/colorful-bracelet#reviews
You will then need a custom JS script that will translate the url and focus on the Reviews tab. You can add this in the Theme Options Custom JS
(function($){
var tabnav = location.href.split("#").slice(-1)[0];
if ( tabnav == 'reviews' ) {
$( document ).ready ( function() {
console.log(tabnav);
var navbar = $('.x-navbar').outerHeight();
$('.woocommerce-tabs .x-nav-tabs-item.reviews_tab').trigger('click');
setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
var yloc = $('.woocommerce-tabs #reviews').offset().top;
console.log($('.woocommerce-tabs #reviews').offset().top);
console.log('tab: ' + tabnav + ', yloc: ' + yloc);
$('html, body').animate({
scrollTop: yloc
}, 850, 'easeInOutExpo');
}, 750 );
} );
}
})(jQuery);
Once the user click on the link, it will open a new page and load the page. The script will make sure that the review tab is active.
Hope this helps.
Thank you,
Can you also put this code in functions.php file as i dont know where this is stored if it breaks the site.
Hi @dihetherington,
You normally do not need to add the code my colleague suggested to the functions.php file of your Child Theme. You can simply go to X > Theme Options > JS and add the code there.
But if you insist here will be the code that you can add in functions.php file:
add_action('wp_head', 'head_information', 9999);
function head_information () { ?>
<script>
(function($){
var tabnav = location.href.split("#").slice(-1)[0];
if ( tabnav == 'reviews' ) {
$( document ).ready ( function() {
console.log(tabnav);
var navbar = $('.x-navbar').outerHeight();
$('.woocommerce-tabs .x-nav-tabs-item.reviews_tab').trigger('click');
setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
var yloc = $('.woocommerce-tabs #reviews').offset().top;
console.log($('.woocommerce-tabs #reviews').offset().top);
console.log('tab: ' + tabnav + ', yloc: ' + yloc);
$('html, body').animate({
scrollTop: yloc
}, 850, 'easeInOutExpo');
}, 750 );
} );
}
})(jQuery);
</script>
<?php }
Thank you.
Hello,
i have tried the original code you provided and just put it in the custom area in the customiser, however i got an error, I think this relates to the animate bit Im guessing.
Also is it possible to change it from #reviews to #tab-reviews? Priority is fixing that error though as currently the code you gave me does nothing.
Hi @dihetherington,
From that code, please change this
$('html, body').animate({
scrollTop: yloc
}, 850, 'easeInOutExpo');
to this
$('html, body').stop().animate({
scrollTop: yloc
}, 850 );
And you can’t change the #reviews to #tab-reviews. Because that’s an existing ID within the review section. Matching the URL and existing ID is a must.
Thanks!
There is now no error but when I enter the link for example (https://www.grandelash.chaselifetech.co.uk/product/grandehair-serum#reviews)
I want it to open the page go down to the review section and make it active, it doesn’t do anything.
(function($){
var tabnav = location.href.split("#").slice(-1)[0];
if ( tabnav == 'reviews' ) {
$( document ).ready ( function() {
console.log(tabnav);
var navbar = $('.x-navbar').outerHeight();
$('.woocommerce-tabs .x-nav-tabs-item.reviews_tab').trigger('click');
setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
var yloc = $('.woocommerce-tabs #reviews').offset().top;
console.log($('.woocommerce-tabs #reviews').offset().top);
console.log('tab: ' + tabnav + ', yloc: ' + yloc);
$('html, body').stop().animate({
scrollTop: yloc
}, 850 );
}, 750 );
} );
}
})(jQuery);
If I look in the review tab for the product then it is not named reviews, its shown as below and if aria-selected=“true” then the review tab is activated.
Please help me solve this, I dont have this problem with other themes.
Hi There,
Please update the code to this:
(function($){
var tabnav = location.href.split("#").slice(-1)[0];
if ( tabnav == 'reviews' ) {
$( document ).ready ( function() {
var navbar = $('.x-navbar').outerHeight();
$('.x-tab-pane, .x-nav-tabs-item').removeClass('active');
$('.reviews_tab, .reviews_pane').addClass('active');
setTimeout ( function() {
$('html, body').animate({
scrollTop: $(".woocommerce-tabs").offset().top - navbar
}, 1000);
}, 750 );
} );
}
})(jQuery);
Let us know how it goes!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.