COMPE – WooCommerce Compare Products

Support Purchase

System required:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

Install plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/

Select plugin zip file compe-woo-compare-products.zip

Install Now > Activate the plugin

 

Do you think your customers find it hard to find their ideal items among so many similar items on your WooCommerce store? Do they have to scroll down through the shop, then learn all the descriptions of the items they are considering? If yes, COMPE – WooCommerce Compare Products is what you are looking for. Create a friendly environment and make it easier for your customer with so simple actions, to experience a good time in your store.

COMPE – WooCommerce Compare Products is a useful plugin that helps you allow customers to compare products in the store based on many aspects, by creating their own comparison table, with the items they want to compare. With just a few simple actions, customers can find out which item meets their expectation of price, description, attribute (color, size,…) reviews, rating,… Which helps them save time to go through your store and learn each item to get what they need.

Other than letting customers compare products with each other to find what they need. You can make the display of the comparison table on the front end look real nice.

With COMPE – WooCommerce Compare Products, your website will be more professional. Start gaining customers’ good impression with the convenience when they do not need to scroll down through the whole page, then catch their attention with the well-designed comparison table you created.

With COMPE, you can:

• Create a comparison table between available products you have
• Make the comparison table appear as a popup window, sidebar, widget, or on a particular page.
• Style the popup window with effects
• Limit the items customers can add to the comparison table
• Customize and design the comparison table, popup window, sidebar, icons, button with text, title, color, size, samples, content, position…
• Make it easier for customers to build a comparison table when they can do it on both Shop and Single product page, or on any other page when they see the product.
• Manage which aspects customers can use to build their comparison table
• Check for a preview of the appearance on the front end with desktop, mobile, and tablet screens before publishing the design.

 

WATCH THIS VIDEO FOR INSTALLING AND USING COMPE – WOOCOMMERCE COMPARE PRODUCTS

After you activate the plugin, it will automatically generate a comparison table for each customer who comes to your store, allow them to add the products and make their own comparison.

Customer can add the products they want to compare with each other themselves, choose the value they want to compare. For example: for the similar type of clothes, they want to see which one has the lower price, or a better overall rating, or may be more sales than the other…

 

After generating the comparison table, manage the settings for the comparison detail with specific settings in the back end: Choose the Comparison page, limit the items that are allowed to the comparison table, control the effect of popup opening,…

Then admin can customize and design further how this table shows up on the front end: Customize the font size, color, border, button border radius, icon,…

To create a comparison table, select products you want to compare

1. The compare button on the product image
2. The compare button on the single product page

 

After adding products to the compared list, the comparison table is created. You can go to the comparison table with:

1. The “Open compare” button on the product image leads you to the comparison page: Click the icon after add the item to the list to go the the comparison page
2. The popup icon: Comparison table shows in popup
3. Use the sidebar to go to the comparison page: The sidebar button (the plus symbol) is normally located in the corner of the page. With this, you can remove items, and go to the comparison page with the “COMPARE PRODUCT” button
4. The “Open compare” button on the single product page leads you to the comparison page: When users click “Compare” and add the item to the list successfully, now the second click will redirect them to the page where the comparison table is located.

 

That’s pretty much it. Now start to compare product to find out which one match your expectation.

1. Use the Settings button (3-line symbol): to shows and hide the aspects you use to compare the items, as well as freeze the important aspects
2. Use the Clear button (trash bin symbol): to remove all items in the compared list
3. Pin the important items in the list, add items by the search field, remove the unnecessary items.
4. Add the items to cart with “Add to cart” button, with variable products, you can choose the variants before adding to cart

 

General settings

In the General tab, you control the overall settings of the comparison table. 

1. Comparison page: Select a particular page and set to be the Comparison Page
2. Popup: Enable this option to show the Comparison table in a popup window
3. Conditional tag: Let you control on which pages the popup will appear using WP’s conditional tags. This option only shows up if you enable “Popup”
4. Popup effect: Choose an effect when the popup opens
5. Action after click compared: After users click the “Compare” button, it opens a popup window or redirect to the Comparison page based on the admin’s settings
6. Limit compared item: Set the boundary for how many items will be added to the comparison table
7. Remove button after add to list: Create a “Remove” button to remove the item which was added to the comparison table
8. Remove button text: Set the text for the button to remove an added item
9. Enable sidebar: Enable this option to show the comparison table on the sidebar
10. Hide sidebar/floating icon when compare list empty: When there’s no item to compare in the comparison table, the sidebar and the floating icon will disappear
11. Compare button on the Product Catalog: Enable this option to make the “Compare” icon  (button) show up on the Shop page, let customers know which items were added to the comparison table

As the settings above, the frontend will look like this:

• Click the floating icon and the comparison popup shows, sliding from right to left
• Choose the “Compare” button on each product featured image and it will redirect to the Comparison page (Product Compare), where the comparison table shows
• The icon in the sidebar include items in the compared list, users can see which items are added, remove each one by one, or remove all, and open the comparison table
• There are a maximum of 7 items can be added to the compared list
• There will be a button to remove items on the list which is located on the Single Product page with the text ” Remove compare”
• When users clear the comparison list, the floating icon and the icon in the sidebar disappear.

Button compare

Control the text of the “Compare” button (on Single Product page)

1. Text: Add the text to the button when add the item to the compared list
2. Compared text: Add the text to the button when the item is added to the compared list
3. Design: Redirect admin to the page where admin can design the comparison table

 

Then start customizing thoroughly the appearance and the content of the Comparison table 

 

 

DISPLAY CONTENT

Here the admin can add the components to the comparison table, allow customers to compare products using these values and information in these components

Click the plus symbol and start adding components you want to the comparison table and control which information customers can use to compare products.

 

 

TABLE CONTENT

TABLE HEADER

• Display image: Tick the checkbox to show product images
• Display title: Tick the checkbox to show product titles
• Display “Add to cart” button: Tick the checkbox to show “Add to cart” button
• Add to Cart color: Set the color for the text inside the “Add to cart” button
• Add to Cart background color: Set the color for the background of the “Add to cart” button
• Title font size: Control the size of the product titles
• Title color: Set the color for the product titles
• Align: Selec the alignment for the product titles and the “Add to cart” button
• Header background color: Set the background color for the whole header area

 

FIELD HEADER and CONTENT

1. Field header
   • Font size: Change the size of the text inside the fields head: Rating, Price, Total Sale,…
   • Align: Select the alignment for the text
   • Font weight: Set the font weight for the text
   • Text color: Set the color for the text
   • Background color: Set the color for the whole background of the fields header
2. Content
   • Font size: Manage the size of the text inside the content of the comparison table
   • Align: Choose the alignment you want for the content
   • Text color: Set the color for all the text in the content
   • Background color: Select the color you want for the background

 

BORDER and ALTERNATING COLOR

1. Border
   1. Width: Set the width of the border for the comparison table
   2. Style: Manage the type of border set above
   3. Color: Choose a color for the border of the table
2. Alternating color
   1. Type: Choose a type for alternating color – None (no alternating color); Row; or Column
   2. Odd row color (available with Row only): Set the color for the odd row
   3. Even row color (available with Row only): Set the color for the even row

 

 

TABLE BUTTON 

CLEAR BUTTON and SETTING BUTTON

1. Clear button
   • Font size: Control the size of the button vertically
   • Size: Control the size of the clear button horizontally
   • Button rounded corner: Make the sharp corners more rounded
   • Color: Set the color for the trashbin symbol
   • Background color: Set the background color for the whole button
2. Setting button
   • Font size: Control the size of the button vertically
   • Size: Control the size of the clear button horizontally
   • Button rounded corner: Make the sharp corners more rounded
   • Color: Set the color for the trashbin symbol
   • Background color: Set the background color for the whole button

SEARCH FIELD

Click the plus symbol on the right of the comparison table and the search field appears

• Color: Set the color for the text when users add to search for products to add into the comparison table
• Background color: Set the background color for the whole search field below the arrow symbol
• Search button color: Set the color for the search button (the arrow symbol)
• Search button background color: Set the color for the whole background of the search button

 

ELEMENT STYLE

BUTTON ON SINGLE PRODUCT

• Font size: Manage the size of the text inside the button
• Text color: Choose a color for the text
• Background color: Set the color for the background
• Added to compare list color: After the item is added to the compared list, the button color will be changed to the color admin sets in this option
• Select position: Select a position you want to put the button.

 

BUTTON ON LIST PRODUCT and COMPARE ICON

1. Button on list product: The “Compare” button shows up on the Shop page
   1. Font size: Control the size of the button on the Shop page
   2. Color: Set the color for the button on the Shop page
   3. Added to compare list color: Set the color for the button when the product is added to the compared list
   4. Select position: Choose a position for the button on the Shop page
   5. Only display on hover image: Tick the checkbox to make the icon shows up only when the product image is hovered
2. Compare icon: Choose a icon for the “Compare” button

 

FLOATING ICON

• Icons: Choose a sample for the floating icon
• Icon position: Manage the position you want to put the floating icon
• Icons size: Control the size of the floating icon
• Icon wrap rounded corner: Make the sharp corners of the icon more rouned
• Icon color: Set the color for the icon
• Background color: Set the background color for the icon

 

SIDEBAR

• Align: Set an alignment for the sidebar icon (the plus symbol)
• Background color: Set the background color for the sidebar
• Button text: Set the text for the button
• Button background color: Set the color for the button background
• Button text color: Set the text color for the button

 

WIDGET COMPARE

1. Widget header
   1. Text: Change the text shown on the header of the widget
   2. Font size: Set the font size for the text above
   3. Color: Manage the color for the text of the widget header
   4. Background color: Choose a color for the background of the widget header
2. Compare button
   1. Font size: Manage the size for the “Compare” button
   2. Text color: Set the color for the text inside the button
   3. Background color: Set the color for the button background
3. Clear button
   1. Font size: Manage the size for the “Clear” button
   2. Text color: Set the color for the text inside the button
   3. Background color: Set the color for the button background

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.