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

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

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.

Genesis Custom Loop Not Paginating Correctly On front-page.php

I recently had to debug why genesis_custom_loop wasn’t working on a homepage. The pagination at the bottom had “Next Page” but it only ever linked to page 2 even if the current “page” was 5. In the general settings, the homepage was set to a static page, not “The Latest Posts” page.

genesis_custom_loop uses genesis_posts_nav for the pagination and there’s no known way to update what the $page or $paged variable is to reference. Basically, static pages were never meant for pagination, so it won’t return the proper value unless you’re on a blog or archive page.

In order to fix this issue, writing a custom loop is necessary:

 

Let me know if you have any questions or suggestions. Or if you know of a magic way to make  genesis_custom_loop work on front-page.php I would be extremely happy to hear it.

Make Beaver Builder Work on WooCommerce Product Pages

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.

How To Add A Fifth Column To Beaver Builder’s Footer Widget Area

Since widgets have been native to the Appearance > Widgets area, I wanted to keep that familiar set up instead of using Beaver Builder’s really cool global rows/sections ability which you could certainly use to achieve the same or similar result.

This article assumes you’re using the Beaver Builder Theme + Child Theme setup. 

I strive to customize things in a way that makes since, works the way you would expect, and is simply logical.

The code below will work in such a way that if Footer Column 5 does not actually contain any widgets, the footer area will be built just as before whether or not you use 1 or 4 columns, it’s still dynamic.

 

Create The Footer Column 5 Widget

Updated code for adding the widget area:

CARLOS AT BB HELPED ME SORT THE FOOTER COLUMNS TOGETHER INSTEAD OF COLUMN 5 BEING BY ITSELF (as shown in the image above). BELOW IS THE UPDATED CODE FOR ADDING THE WIDGET AREA.

Add this code to your functions.php file. This removes the footer widget areas, so we can add the 5th grouped together with the other 4.

add_action( 'widgets_init', 'gs_custom_widgets', 11 );
function gs_custom_widgets() {
 unregister_sidebar( 'footer-col' );
 unregister_sidebar( 'footer-col-2' );
 unregister_sidebar( 'footer-col-3' );
 unregister_sidebar( 'footer-col-4' );

 if ( 'disabled' != $footer_widgets_display ) {
  register_sidebars( 5, array(
   'name' => _x( 'Footer Column %d', 'Sidebar title. %d stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ),
   'id' => 'footer-col',
   'before_widget' => '<aside id="%1$s" class="fl-widget %2$s">',
   'after_widget' => '</aside>',
   'before_title' => '<h4 class="fl-widget-title">',
   'after_title' => '</h4>',
   ) );
  }
}

 

Setup 5 Column CSS for Bootstrap

Beaver Builder is built with the most famous Bootstrap which is fantastic. Its only drawback that I seem to always need to compensate for is it’s lack of 5 equal columns in a row that stretch all the way across without have to use push/pull classes. You can add this to your style.css file.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
 .col-sm-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 992px) {
 .col-md-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 1200px) {
 .col-lg-5ths {
  width: 20%;
  float: left;
 }
}

Customize the footer-widgets file to support the 5th column

Lastly, we’re adding some conditional code to that footer-widgets.php file. Since you should be working with a child theme, within your theme folder you’ll want to have an includes folder. Within that, you need to copy the parent theme footer-widgets.php.

 

The code below checks if the Footer Column 5 is in use, if so we use the new 5ths classes above. If it’s not in use, then it essentially defaults back to using the display_footer_widgets() function.

<div class="fl-page-footer-widgets">
  <div class="fl-page-footer-widgets-container container">
  <div class="fl-page-footer-widgets-row row">
    <?php //FLTheme::display_footer_widgets(); ?>

    <?php if ( is_active_sidebar( 'footer-col-5' ) ) { ?>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-2' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-3' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-4' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-5' ); ?>
      </div>
    <?php } else {?>
      <?php FLTheme::display_footer_widgets(); ?>
    <?php } ?>

   </div>
 </div>
</div><!-- .fl-page-footer-widgets -->

You’re welcome 😉 Now you have a nice footer sitemap with 5 columns.

Did you achieve this differently? I’d love to hear about it in the comments below!

 

How to open links in a new tab only for custom post types

Recently, I’ve been building a custom project where users will be able to download a library of resources. It wouldn’t be an ideal management experience to check/tick the open in new tab/window option when adding links to all the resources. There will be hundreds! But at the same time, I don’t want to change the default link behavior, because these resources will be (so far) the only thing that I will want opened in a new window.

There’s of course not a single solution, but a couple ways to achieve this. I opted for adding a filter to my template file for the custom post type. I could have added this to the functions.php file, but that would add to the server wait time. I’m told if it’s added to the template file itself, it saves a few milliseconds of server processing the entire functions file each page load unless you have server caching. I haven’t tested this myself though. I also could have added a short jquery snippet, but again, why load another file client side adding wait time when the site is going to be serving up tons of documents and potentially have a lot of traffic.

In my case, these resource links will very likely never need to NOT open in a new window. But I will need to add even tracking to track how users are using the site and which resources they’re downloading. Since I do not have any download links on the archive view, I only needed this for the single view of the post type.

If you need help altering this for your case, let me know and I’ll be happy to help.

How to Change Beaver Builder Social Icon Style

Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There’s so much flexibility for the developer and also for the designer.

 

I wrote only a couple lines because I didn’t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area.

The result is the icons inherit the color set for the footer text, and we remove the circle backgrounds.

 

In addition, if you want to change the size of those icons, just add: font-size: 1.5em; to the i:nth-child(2).