How To Make Woocommerce Product Review 2 Column

How to Display WooCommerce Product Reviews in Two Columns for Better User Experience

WooCommerce product reviews are crucial for building trust and driving sales. Potential customers often rely on the experiences of previous buyers to make informed decisions. However, a long, single-column list of reviews can be overwhelming and difficult to navigate, especially on pages with numerous reviews. Displaying your WooCommerce product reviews in a two-column layout can significantly improve readability, user experience, and ultimately, conversions. This article will guide you through different methods to achieve this, ensuring your valuable customer feedback is presented in an organized and visually appealing manner.

Why Two Columns for WooCommerce Product Reviews?

Presenting product reviews in a single, long column can have several drawbacks:

• Poor Readability: A seemingly endless scroll can deter visitors from reading through the reviews.
• Information Overload: The sheer volume of text can feel overwhelming, making it harder to identify key insights.
• Negative Visual Impact: A lengthy, unbroken column of text can look unattractive and make the page feel cluttered.

By adopting a two-column layout, you can:

• Improve Readability: Breaking up the reviews into smaller, more manageable chunks makes them easier to scan and digest.
• Enhance Visual Appeal: A well-organized layout makes the page look cleaner and more inviting.
• Highlight Key Reviews: You can strategically position important reviews to draw attention.
• Optimize for Mobile: A responsive two-column layout adapts well to different screen sizes, ensuring a seamless experience across devices.

Now, let’s explore different ways to implement this layout.

Methods to Create a Two-Column WooCommerce Product Review Layout

There are several approaches you can take to achieve a two-column display for your WooCommerce product reviews. We’ll cover the most common and effective methods:

#### 1. Using CSS and Custom Code (Theme Modification)

This is the most flexible method and provides the most control over the look and feel. However, it requires basic knowledge of CSS and familiarity with editing your theme’s files. Always back up your theme before making any changes!

Steps:

1. Locate Your Theme’s `style.css` file: This file is usually located in `wp-content/themes/[your-theme-name]/style.css`. You can access it through your WordPress dashboard by going to Appearance > Theme Editor.

2. Add Custom CSS: Add the following CSS code to the bottom of your `style.css` file. Adjust the CSS selectors and values to fit your specific theme structure.

/* Style the review container */

.woocommerce-Reviews #reviews .commentlist {

display: flex;

flex-wrap: wrap;

}

/* Style each individual review */

.woocommerce-Reviews #reviews .commentlist li {

width: 48%; /* Adjust for margin/padding */

margin-bottom: 20px;

}

/* Add some spacing between reviews */

.woocommerce-Reviews #reviews .commentlist li:nth-child(odd) {

margin-right: 4%;

}

Explanation:

• `display: flex; flex-wrap: wrap;` on the `.commentlist` (the list of reviews) makes the reviews display in a row and wrap to the next line if they don’t fit.
• `width: 48%;` on each `li` (individual review) sets the width to nearly half the container, allowing for two columns. We use 48% instead of 50% to account for margin/padding.
• `margin-bottom: 20px;` adds spacing between the review elements.
• `margin-right: 4%;` on odd-numbered reviews provides space between the two columns.

3. Save Changes: Click the “Update File” button to save the changes to your `style.css` file.

Important Considerations:

• Theme Specificity: The CSS selectors (`.woocommerce-Reviews #reviews .commentlist li`) might need to be adjusted based on your specific theme’s HTML structure. Use your browser’s developer tools (usually by right-clicking and selecting “Inspect” or “Inspect Element”) to identify the correct CSS classes and IDs.
• Responsiveness: Consider adding media queries to adjust the layout for smaller screens, potentially reverting to a single column for optimal mobile viewing.

#### 2. Using a Child Theme (Recommended for Theme Modifications)

Modifying your theme’s core files directly is generally discouraged. A child theme allows you to make customizations without affecting the parent theme, ensuring your changes are preserved when the parent theme is updated.

Steps:

1. Create a Child Theme: If you don’t already have one, create a child theme for your current theme. There are many tutorials available online on how to create a WooCommerce child theme.

2. Copy the Required Template File: You may need to copy the `review.php` or related template file from your parent theme’s WooCommerce templates directory (`wp-content/themes/[your-parent-theme]/woocommerce/templates/`) to the same directory structure in your child theme (`wp-content/themes/[your-child-theme]/woocommerce/templates/`).

Note: In many cases, copying the `review.php` file is unnecessary, and you can achieve the desired layout through CSS alone (Method 1) within your child theme’s `style.css`.

3. Add CSS to Child Theme’s `style.css`: Add the same CSS code as described in Method 1 to your child theme’s `style.css` file. This file is located at `wp-content/themes/[your-child-theme]/style.css`.

4. Activate the Child Theme: Activate your child theme from the WordPress dashboard (Appearance > Themes).

Using a child theme provides the benefit of safeguarding customizations even with theme updates.

#### 3. Using WooCommerce Plugins

Several plugins offer WooCommerce customization options, including the ability to modify the product review layout. These plugins often provide a more user-friendly interface and eliminate the need to directly edit code.

Examples of WooCommerce Plugins:

• WooCommerce Product Reviews Pro: This plugin enhances the default review system with features like verified owner badges, filtering, and voting. While it might not directly offer a two-column layout as a primary feature, its customization options may allow you to achieve it. Check the plugin’s documentation.
• Custom CSS Plugins: Plugins like “Simple Custom CSS” or “Additional CSS” (built into WordPress) allow you to easily add custom CSS code without directly editing your theme’s files. Use these to add the CSS from Method 1.

Benefits of Using Plugins:

• Ease of Use: Plugins often provide a user-friendly interface.
• No Coding Required: Many customization options are available through the plugin’s settings.
• Plugin Support: Plugin developers typically offer support and updates.

Drawbacks of Using Plugins:

• Potential Compatibility Issues: Ensure the plugin is compatible with your theme and other plugins.
• Plugin Bloat: Avoid using too many plugins, as they can slow down your website.
• Cost: Some plugins are premium and require payment.

Steps for Using a Plugin:

1. Install and Activate the Plugin: Install and activate the chosen plugin from the WordPress Plugin Repository or by uploading the plugin file.

2. Configure the Plugin Settings: Navigate to the plugin’s settings page (usually found in the WordPress dashboard) and configure the options to achieve your desired two-column layout. Consult the plugin’s documentation for specific instructions.

#### 4. Custom Code Snippets in `functions.php`

While less common for purely visual changes, you can use code snippets within your theme’s `functions.php` file to modify the way WooCommerce renders the reviews. Exercise caution when editing `functions.php`. Errors can break your website.

Example (Advanced – Not Recommended for Beginners):

This example demonstrates how you *could* potentially filter the reviews and restructure the output. *This is a simplified example and may require significant adjustments depending on your theme and desired output.*

<?php
add_filter( 'woocommerce_product_reviews', 'custom_woocommerce_product_reviews' );

function custom_woocommerce_product_reviews( $reviews ) {

// This example is conceptual. Building a truly robust two-column

// output via PHP code in functions.php is complex and often better

// handled with CSS (Method 1) or a plugin. This is just to illustrate the concept.

$num_reviews = count( $reviews );

$column_one = array_slice( $reviews, 0, ceil( $num_reviews / 2 ) );

$column_two = array_slice( $reviews, ceil( $num_reviews / 2 ) );

$output = ‘

‘;

$output .= ‘

‘;

foreach( $column_one as $review ) {

$output .= ‘

‘ . $review->comment_content . ‘

‘; //Basic review output – customize!

}

$output .= ‘

‘;

$output .= ‘

‘;

foreach( $column_two as $review ) {

$output .= ‘

‘ . $review->comment_content . ‘

‘; //Basic review output – customize!

}

$output .= ‘

‘;

$output .= ‘

‘;

//Important: This example only outputs the comment content. You would

//need to rebuild the entire HTML structure of each review to match

//WooCommerce’s default output, using $review data.

return $output;

}

// Add CSS to style the two-column layout (put this in your style.css)

function my_custom_styles() {

echo ‘

.two-column-reviews {

display: flex;

}

.two-column-reviews .column-one,

.two-column-reviews .column-two {

width: 50%;

padding: 10px;

}

‘;

}

add_action( ‘wp_head’, ‘my_custom_styles’ );

?>

Explanation:

1. `woocommerce_product_reviews` Filter: This filter allows you to modify the array of reviews before they are displayed.

2. Splitting the Reviews: The code divides the `$reviews` array into two halves for each column.

3. Building the HTML Output: It creates a new HTML structure with two columns and loops through the review arrays to output each review. This is a highly simplified example and needs to be significantly expanded to replicate WooCommerce’s default review output.

4. CSS Styling: It includes basic CSS to style the two columns.

Why This Method is Complex:

• Replicating WooCommerce’s full review output (including author, rating, date, etc.) requires extensive knowledge of the review object and WooCommerce’s templating system.
• Maintaining compatibility with WooCommerce updates can be challenging.
• It’s generally less maintainable than using CSS or a plugin.

Recommendation: Use CSS (Method 1) or a well-supported plugin for a simpler and more maintainable solution. The `functions.php` method should only be attempted by experienced developers.

Conclusion

Displaying WooCommerce product reviews in two columns can significantly enhance the user experience and make valuable customer feedback more accessible. The best method for implementing this layout depends on your technical skills and the level of customization you require. For most users, starting with CSS customization or a WooCommerce plugin is the most efficient and reliable approach. Always remember to back up your website before making any changes, and thoroughly test the layout on different devices to ensure a responsive and user-friendly experience. Presenting your reviews in a clear, organized manner can encourage potential customers to read them, boosting confidence and ultimately leading to more sales.