How To Add A ‘Write Your Review’ Link to WooCommerce Product Pages

/0 Comments/in , , /by

Product page with write your review link

Append the link to the reviews line

In your theme folder, be sure to have a js file you can add code to and enqueued properly.

 $('.woocommerce-product-rating .woocommerce-review-link').after(' | <a class="write-your-review" href="#tab-reviews">Write Your Review</a>');

 

Close the active tab, open the reviews tab, and scroll to the location

Now that we have the link where we want it, we need to scroll to the section we want. But, WooCommerce already has a different tab open by default, or the user maybe clicked around a bit and has a completely different tab open. Without closing these, or opening the reviews tab, we can’t properly scroll to where we want.

 $('.write-your-review').click( function () {

  $('.tabs li').removeClass('active');
  $('.woocommerce-Tabs-panel').attr("style", "display:none");

  $('.reviews_tab').addClass('active');
  $('.woocommerce-Tabs-panel--reviews').attr("style", "display:block");

  $('html, body').animate({
   scrollTop: $("#commentform").offset().top -200
  }, 1500);

 });

 

Here’s the whole js file:

 

I’d love to hear if this helped you or if you have any further questions.

How To Create A Product Reviews Shortcode Query

/0 Comments/in , , /by

This particular shortcode will only work on the single product view. Modification would be needed to make it work elsewhere within the website. In case you’re wondering how this would even be useful on product pages, take a look at my article on how beaver builder was added to product pages.

 

The Shortcode

To do this we set the $product as global in order to grab the id of that product so we can use it in the query arguments. WooCommerce reviews are basically just “comments” so we use get_comments to retrieve these.

Be sure to use ob_start and ob_get_clean or you’ll have some trouble with placement when the output is returned.

 

The CSS

@media screen and (min-width: 768px) {
  #gs-reviews ul {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
  }
  #gs-reviews ul > li {
   width: 30%;
   flex-direction: column-reverse;
  }
}

 

Check out how everything turned out in the image below. In addition, you can read about how I added the “Write your review” link under the product title.

Make Beaver Builder Work on WooCommerce Product Pages

/0 Comments/in , , /by

In this particular use case, the Description Tab of the product wasn’t being used; only the “Short Description” which shows up at the top right. The long description shows under the product in the tabs panel. The content area will be placed at the bottom of the page (after the product tabs and before the footer) and able to be edited by Beaver Builder.

Obviously, make sure you have Beaver Builder installed and your post type settings should have “Products” ticked. This article will require you to create a couple template files in your theme directory and add a few lines of code to your functions.php file.

*This does not work well with the Custom Product Tabs for WooCommerce. As of this post date, the plugin itself doesn’t seem to work well with Beaver Builder being activated and used in the main content area.
** See update at bottom for the solution on Custom Product Tabs

 

Remove Description From The Tabs

What I did was remove the Description Tab from the tab panel so I could utilize the content of that for Beaver Builder. To do this you’ll need to add a filter that unsets the “Description” from that panel.

add_filter( 'woocommerce_product_tabs', 'sd_remove_product_tabs', 98 );
function sd_remove_product_tabs( $tabs ) {
 unset( $tabs['description'] );
 return $tabs;
}

 

Create The Template Files

Since WooCommerce is constantly updated, you may need to reference the default template files relative to your version number. I’ve used v3.5.0 in this example to copy the template files to my theme and then I’ll add the modifications below. If your theme already has single-product.php and/or content-product.php I’ll be highlighting the code necessary to make this work.

 

single-product.php

Beaver Builder needs to use the while loop in order to work properly. Without that you wont have any editable regions.

Essentially, we’re just adding the while loop and asking for the contents of content-product.php file inside of that.

<?php
 if ( have_posts() ) :
 while ( have_posts() ) :
 the_post();
 get_template_part( 'content', 'product' );
 endwhile;
 endif; ?>

You can see where I added that to my file below.

 

content-product.php

This file just wraps the content in Beaver Builder classes and actions.

 

Update: 

Carlos at Beaver Builder was able to provide a solution to help with Custom Product Tab plugins. I haven’t tested this on all those plugins, but theoretically this should work. Because most of the plugins seemed to use the_content filter to filter and display the content in those tabs, beaver builder was duplicated on the page and tabs. Add this to your functions.php file to remove the filter in the tabs and to make beaver builder work properly on the product page. This particular code is for use with Yikes WooCommerce Custom Product Tabs, so it would need adjusted based on which Tab plugin you’re using.

add_filter ( 'yikes_woo_use_the_content_filter', '__return_false' );

 

Let me know in the comments below if you have any issues. I’ll do my best to answer questions and help to further add more detail to this article.