How to Display WooCommerce Product Reviews on Custom Page with a Shortcode

By default with WooCommerce, product reviews display by default in the ‘Reviews’ tab in a single product page. What we are going to show you today is how you can display them on any page of your website using a shortcode. This can be especially useful if you are using custom sales pages and need to show reviews on specific pages about a certain product.

So let’s dig into this…

Creating the WooCommerce Product Reviews Shortcode

Firstly, we need to add some code to our functions.php file:


/**
 * WooCommerce Product Reviews Shortcode
 */
 
add_shortcode( 'product_reviews', 'silva_product_reviews_shortcode' );
 
function silva_product_reviews_shortcode( $atts ) {
    
   if ( empty( $atts ) ) return '';
 
   if ( ! isset( $atts['id'] ) ) return '';
       
   $comments = get_comments( 'post_id=' . $atts['id'] );
    
   if ( ! $comments ) return '';
    
   $html .= '<div class="woocommerce-tabs"><div id="reviews"><ol class="commentlist">';
    
   foreach ( $comments as $comment ) {   
      $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) );
      $html .= '<li class="review">';
      $html .= get_avatar( $comment, '60' );
      $html .= '<div class="comment-text">';
      if ( $rating ) $html .= wc_get_rating_html( $rating );
      $html .= '<p class="meta"><strong class="woocommerce-review__author">';
      $html .= get_comment_author( $comment );
      $html .= '</strong></p>';
      $html .= '<div class="description">';
      $html .= $comment->comment_content;
      $html .= '</div></div>';
      $html .= '</li>';
   }
    
   $html .= '</ol></div></div>';
    
   return $html;
}

Adding the Shortcode

Once you’ve added the code to your functions.php file, we can now use the following shortcode on any page you like; [product_reviews id="ID"].

Simply replace the text ID with the product for which you want to output your customer reviews and that is simply all there is to it!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to change the city field to a dropdown in WooCommerce

Today we will show you how to change the city field to a dropdown in WooCommerce. This works great for those of you who need to set up city-based shipping rates. As you may already know, it is possible to achieve this using my Advanced Shipping plugin. However, the downside of this is that your customers can enter their own values for the ‘Shipping Field’ which means that you’d have to enter any type of variation a customer can enter to ensure the correct shipping cost is calculated and shown at the totals.

The chances are that the customer makes a typo or enters a value that is not recognised by the values you set up for the shipping rates. A possible solution to this is to change the default text input field to a dropdown. This way you will have the control which options are available and the customer can enter, and ultimately, this can reduce the error rate at the checkout stage.

Changing the city field to a simple dropdown

The following code snippet will change the city field to a standard dropdown. You are able to set up both the display value to the customer and the so-called ‘index’ or ‘key’ which is what the ‘City’ condition will match against (when using the Advanced Shipping plugin).

The below code needs to go in your theme/child theme’s functions.php file:


<?php
/**
 * Change the checkout city field to a dropdown field.
 */
function city_dropdown_field( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',			
		),
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'city_dropdown_field' );

Let’s take this one step further and make the city select searchable…

Making a searchable city dropdown

If you have a large list of cities then it makes sense to add a searchable field, just like how the Country field works. Making it a searchable field can be done with a few additional lines of code.


<?php

// Copy from here

/**
 * Change the checkout city field to a dropdown field.
 */
function jeroen_sormani_change_city_to_dropdown( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',
		),
		'input_class' => array(
			'wc-enhanced-select',
		)
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	wc_enqueue_js( "
	jQuery( ':input.wc-enhanced-select' ).filter( ':not(.enhanced)' ).each( function() {
		var select2_args = { minimumResultsForSearch: 5 };
		jQuery( this ).select2( select2_args ).addClass( 'enhanced' );
	});" );

	return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'jeroen_sormani_change_city_to_dropdown' );

This is how it looks with the searchable field:

Setting up shipping rates based on city

With this example, you can more easily set up rates based on the city field. Now you only have one variation the customer can enter instead of many different variations and prevent possibly typo’s. To setup city-based shipping using the ‘City’ condition, you can now enter the ‘key/index’ values set in the above code to match in the condition against what the user selects.

If you need any help setting this up, we’d love to help. Thanks for reading!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Skip the Cart Page and Go Straight to the Checkout Page in WooCommerce

Some people may find the process of ordering a product (especially if it’s a simple product) too long of a process. You can provide a better user experience for this by skipping the cart page and going straight to the checkout process. We recently developed a site where the purpose was to book online courses, in this situation, most often, users would just buy a single course at a time. That being said, this is why we decided to simplify the process and allow users to book courses a lot quicker.

The first thing you will need to do is navigate to WooCommerce -> Settings -> Products.

You will want to uncheck the following options:

  • Redirect to the basket page after successful addition
  • Enable AJAX add to basket buttons on archives

Once you have done this, simply add the following code to your functions.php file:


/**
 *	Bypass WooCommerce Cart
 */

add_filter('woocommerce_add_to_cart_redirect', 'silva_add_to_cart_redirect');
function silva_add_to_cart_redirect() {
	global $woocommerce;
	$checkout_url = wc_get_checkout_url();
	return $checkout_url;
}

And as simple as that, now when you click a product to add to basket, it will now redirect directly to the checkout page.

Taking it one step further, what we can also do is change the label of the ‘Add to Cart’ button.

How to Change the ‘Add to Cart’ label

Now that we have removed the cart from the checkout process, it now makes sense to change the label in the WooCommerce product. In our example, we are going to replace this with ‘Buy Now’. To achieve this, WooCommerce has a filter which again, we can add to the functions.php file as shown below:


/**
 *	Add New Pay Button Text
 */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'silva_cart_button_text' ); 
 
function silva_cart_button_text() {
 return __( 'Buy Now', 'woocommerce' );
}

What this filter is doing is applying the text changes to the single product page. It could be that you have the product on another post type, for this; there is a second filter you can also use

The above filter applies the text to the single product page, however, you may have the product on another post type, there is a 2nd filter you can also use; woocommerce_product_add_to_cart_text as shown below:


/**
 *	Add New Pay Button Text
 */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'silva_cart_button_text' ); 
add_filter( 'woocommerce_product_add_to_cart_text', 'silva_cart_button_text' ); 
 
function silva_cart_button_text() {
 return __( 'Buy Now', 'woocommerce' );
}

With all the above completed, we now have fewer steps to the key part of your e-commerce website; allowing your customers to purchase products quicker by simplifying the process!

Well, we hope you enjoyed this article, if you need help in any way, feel free to contact us or drop a comment below and we’d love to help you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

WooCommerce – How to Remove Product Links on the Cart Page

Today we are going to show you how you can remove the product links from the Cart page in WooCommerce.

The great news is that you only need to add a single line of PHP code to your functions.php file. There are plugins that do this but it is totally unnecessary when it’s so simple to disable.

The code below will remove the links as illustrated in the image below:

So here it is, one line of code:


add_filter( 'woocommerce_cart_item_permalink', '__return_null' );

Easy right?

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]ilvawebdesigns.com

It’s good to share

How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

5 Best Web Design Practices To Follow In 2020

In today’s highly competitive business scenario, owning a business website is absolutely essential. In order to make your brand stand out, you need to have an exceptional website.

Who doesn’t want to take their business to the next step? Well, if you wish your brand to grow, then there is a huge list of efforts to make. Any business that wishes to be competitive in this high paced world should definitely opt for a business website.

From getting a highly responsive website designed to maintain your website page speed, everything needs to be taken care of.

But making your business successful isn’t a matter of days. It takes a lot of dedication and efforts during a long time to rise and shine. Have a look at my personal post I posted here, you will see the journey I made in making a business a success.

A website is the exact reflection of your business, so make sure that it’s perfectly designed and portrays your business in the best possible way.

This complete guide is dedicated to some of the best web design practices to follow and about how you can get an exceptional website designed for your business:

Here, we will be discussing some of the best web design practices to follow in 2020:

Have a plan

The most important thing before getting started with designing a website is to have an exceptional plan. You can’t just get started with random ideas with no concrete foundation.

Make sure to have a clear idea of the website requirements and then plan out things accordingly. Ensure that your plan meets the needs of your website’s visitors.

Designing a creative website needs a lot of research, planning and efforts.

Moreover, it’s highly important to think beyond web design. Well, only a professional web designer can offer much more than just design and coding.

Rather, they can help with overall development as well as the maintenance of the website. It’s something that will definitely help your website to get ranked easily and efficiently.

Well-planned website design will in turn gift you with the best ROI that you are looking for. So, make sure to hire an experienced professional for getting an exceptional website designed for your business.

So, have a clear idea of your own set of goals and challenges that you and your business website are going to face in the long run. This way, you can be quite prepared for it.

So, before you go any further, it’s important to have a sorted plan to work accordingly.

SEO Savvy

Your website does need to be optimised according to the browser, but according to SEO guidelines as well. Having a website that isn’t SEO friendly won’t offer you any benefits in the long term.

Don’t ever overlook the power of optimising your website according to Google’s algorithms. It will definitely help you make your business website rank better in search engines.

If your goal is not only creating a website but creating an online presence that leaves a mark, then SEO is something you should definitely consider.

SEO strategy contains creating quality content, creating backlinks, getting your website ranked well on Google, attracting prospects and converting them into happy customers.
SEO plays a major role in helping your business rank well and reach the top.

Mobile ready

You might be thinking: what does being mobile-ready even mean?

Well, to be very precise, being mobile-ready is about how well a website can be accessed on mobile phones and on different browsers, for that matter.

In this digital age, people are using their mobile phones to search for everything, so your business website needs to be mobile-friendly.

Well, having an experienced designer by your side ensures that your website can be easily accessed on desktops, laptops, tablets as well as mobile phones.

There’s no denying the fact that a responsive web design can work wonders for your business. Responsive websites simply mean that your website can adapt to multiple screen sizes easily.

So, make sure that your website is mobile-ready!

Responsive design

Most people out there are using their smartphones and tablets to browse through different websites. So, you need to make sure that your website is responsive and that it fits the screen of different smart devices properly.

Your website needs to be mobile-friendly, or else visitors who use their smartphones to view your site are just going to bounce back. That’s something you don’t want for your website.

So, make sure to have a professional by your side who can help you create a responsive web design that will work on every device that your prospects are using.

A user-friendly website is something that can make a difference when it comes to your business’ ROI. A professional web designer not only makes your website look amazing but also ensures that it’s responsive, adapting to every device.

So, ensure your website is highly responsive and user-friendly to get the most out of it.

A responsive and optimised mobile site provides a great user experience to visitors. In such cases, visitors are more likely to stay on your website for a longer period. This way, you can keep a hold on the bounce rate of your website and gradually get to decrease it.

Having a responsive website definitely offers your visitors with better user experience. So, if your primary objective is the client experience, then you should definitely consider hiring a well-rated web developer rather than using self-service solutions.

Fast loading

A website should load in less than five seconds or less. So, make sure that your website has the shortest loading time possible.

Make sure to track your website loading speed and work on it if it’s showing any issues.

With fast-loading web pages, the bounce rate of the website gradually decreases. Your website needs to have a low bounce rate.

Having a responsive web design can help you to quickly convert your website visitors or prospects into happy customers.

Fast loading web pages are a plus point for your business website and it’s something that can help your business grow organically.

With all these best web design practices to follow in 2020, we’ll also be discussing some of the good reasons to hire experienced web designers:

Uniqueness

By hiring a professional web designer you can expect to get a unique and exceptional website designed. So, make sure to hire professionals that can match your specific needs.

Customisation

Professional web designers are there to offer customised designs that match your set of specific needs and desires. So, if you have a clear idea of how your website should look then you should consider hiring a professional web designer who can bring your dream website into reality.

Responsive web design

In order to get a responsive web design, you need to hire experienced professionals. A responsive website is well designed to work on a mobile device and a computer screen effectively.

Browser compatibility

There are a handful of browsers out there and your website needs to be prepared for all of them. You just can’t deny the fact that not all browsers are created equally. So, your business website must be friendly enough for all the browsers. Make sure to properly test your website on different browsers to get a clear idea of the browser compatibility of your website.

A reliable website

Professional web designers can offer their clients a reliable website. So, make sure to do some research and hunt for someone who can offer you a reliable and error-free website.

Creative minds

Professional web designers are creative in their approach. So, make sure to hunt for creative developers who can get an amazing as well as a responsive website designed. Someone who loves experimenting with new web design trends will provide you with the web design that you really need.

Know market trends

Experienced professionals have deep knowledge of the market and are well aware of the current market trends. So, look for professionals that have up-to-date details about their particular field.

Save your time and efforts

A professional web design agency can definitely save enough of your time and efforts. You no longer have to worry about how your website will look and how it can be optimised. So, leave it all to the professionals.

Launching your business online can prove itself to be one of the best marketing strategies. But before that, you need to get the best web development services for your project to make it a huge success.

For a business that is looking forward to leaving its mark in the online world, getting the perfect website designed can make an immense difference.

Smart business owners invest in their websites to bring their online business to the next level. Being the best marketing tool to grow your business, you should consider investing in your business website.

So, take some time, take a step ahead and get your perfect business website prepared.

Hire Silva Web Designs

Are you looking for professional Web Designs / Web Developers? Look no further, we take care of every single step to get your website to tip-top-shape and have an advantage over your competitors. From planning, creating, building and launching your amazing new website, we can assure you that you won’t be disappointed with our services.

We offer the full package, such as:

  • Brand design
  • Responsive design
  • CMS systems
  • E-commerce
  • Social Media Marketing
  • Email campaigns
  • SEO (Search Engine Optimisation)
  • App development
  • Hosting
  • Copywriting

and much much more!

We have experts that are fluent in various CMS systems such as…

  • WordPress
  • Shopify
  • Magento
  • PrestaShop
  • WooCommerce
  • SquareSpace
  • Laravel
  • CodeIgnitor

 

and again, various other CMS systems on top of this!

Interested? Why not start the process and send an email to [email protected] with your requirements and we’ll get back to you with a quote and deliver nothing but the best.

We love working with new customers and we strive through delivering the best quality of work. We’re pretty sure we won’t disappoint 😉

Loved this article? Drop us a message in the comments. \m/ Happy Coding all \m/

∆ SILVA TEAM ∆
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Decrease or Disable the Strength Required for your WooCommerce Passwords

Today we are going to show you an easy way to decrease or disable the strength required for your WooCommerce Passwords without the use of a plugin.

Disable the Password Strength

The first thing I will point out here is that this method is not necessarily advised but it’s one of those requests you might come across from time to time. Forcing strong passwords on your WooCommerce store can sometimes deter customers from processing their order which is one of the main reasons you are probably reading this post. For the average person, the strength at which WooCommerce/Wordpress require their passwords to be is above and beyond anything the customer will remember. Personally, I use LastPass to generate and store all of my passwords, so this is not an issue for me, but your customers may not be as tech-savvy.

Disabling strong passwords should be done at your own discretion, but until WordPress make the password strength parameters editable, I imagine many people will want to do it. You can add the following code to your theme’s functions.php file to completely remove the password strength check:


/**
 * Remove password strength check.
 */
function iconic_remove_password_strength() {
    wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );

Decrease the Password Strength

It is actually possible to just decrease the strength required for your customer’s passwords. This is a much better option than disabling it completely, in most scenarios anyway.

The default strength is 3, and can range from 0 (non-existent) to 5 (ridiculously strong). You can change this by adding the following filter in your functions.php file:


/**
 * Change min password strength.
 */
function iconic_min_password_strength( $strength ) {
    return 2;
}
 
add_filter( 'woocommerce_min_password_strength', 'iconic_min_password_strength', 10, 1 );

Pretty simple right? If this has helped, leave a comment below, we’d love to hear from you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share