How to make directory, classified, review website with woocommerce

What is the reason to use woocommerce for directory site? Well, even in fact that woocommerce is mostly for e-commerce, it can be easily converted for directory functions as it has many great functions and can be easily extended via different plugins. You can use woocommerce also for review site, specification comparison, app reviews, service reviews, hosting reviews, etc.

This tutorial is made for our products. You must have one of our wordpress theme to use information from this tutorial

How to make products without cart?

The main difference between directory and shop site, that directory site doesn’t have cart and users can’t purchase any products. They can just see products, read information, compare products, visit site of product/app/service. How to delete “add to cart button”? It’s very easy. Woocommerce has option to make product as External. In this case “add to cart” button will be converted to custom button. You can place there link to site of reviewed product or just simply don’t add any link and button will be hidden.

But with our theme you can go even further. You can disable also cart scripts in theme option – shop settings and disable also all buttons from Theme option – Loop customization – Disable button in ALL product loops?

Inner Product button can be disabled in Theme option – shop settings – Disable button inside Product page

back to menu ↑

Managing specifications

All specifications for woocommerce are based on woocommerce attributes Very important to understand that there are two types of attributes: global and local. Global attributes must be created in Products – Attributes. They can be used for advanced product filtering, in product comparison, in creating advanced snippets, etc. Local attributes can be added inside each product. They are just like text blocks or additional content and can’t be used in any advanced functions. Use local attributes only if you want to add some information in product.

You must understand which attributes you want to have as global and which as local. Also, think about global attributes as like categories. For example, your products can be red, yellow, white colors and you want to have such search filters on site – make them as global attributes.

Also, global attributes must have archives if you want to make them as links in specifications. Better to give short names for global attributes.

back to menu ↑

What if standard attributes are not enough?

Woocommerce attributes have some limitations. For example, they are not comfortable when you want to add custom numeric value and each product has own value. So, it will be too hard to add each value as global attribute. So, you can use Custom fields.

To add custom fields to Product, you can use default wordpress Custom field panel or you can use free plugin for meta panels ACF (or any other). Using plugins are more easy as you will have custom panel in Product. But also you can add fields without any plugins

Check right corner of admin panel of product and enable there Custom fields.

Now, you have custom field panel where you can add custom data. So, add custom field, for example, demo_link and add value. It can be numeric or text.

Next time when you add custom field, you dont need to click on “Add new”, you can select field key in select

back to menu ↑

How to add additional information, featured attributes, videos, custom tabs

Let’s make our products more interesting and give them more information.

Additional thumbnails and videos can be easily added in right panel of product

Also, with our theme you can add good looking blocks, banners, featured areas. We added many examples of codes and how to use them in our custom product areas

And you can also show some most important attributes from specifications in featured area of product and in product grid/list, like next

For this, read our previous article how to enable featured specifications and attributes

back to menu ↑

How to add custom tabs

Woocommerce has tab system. In some of our product layouts, tabs are converted to sections. If you want to make custom tab, add there any shortcode or content, use next docs

back to menu ↑

Product Layouts

Our theme has many unique Product layouts for inner pages and for archives/home pages. We added some special layouts for directory/review sites based on woocommerce. They are really awesome and we investigated all top review sites to make these layouts. You can read about product layouts for inner pages. And see some examples

Compact Product Layout 

Full width directory layout

Review with Blocks

Full width Photo

Sections with Sidebar

Extended Full width

We also added several good layouts for archives. You can choose them in Theme option – shop settings – Design for archives. We think that the best for directory/review sites are List and Directory Grid.

You can also choose them on Homepage with Page builder.

Please, note, that Directory Grid layout is available as Grid Module and you must choose this style in Control Options

 

back to menu ↑

Editor’s Review and user’s reviews

In our theme we added special review panel where you can add Editor’s review and criterias. Use it if you want to add review to product. If you want to enable also user’s reviews, go to Woocommerce – settings – products and enable there user’s ratings. You can also enable Helpful or not system for ratings in theme option – shop settings.

Many buyers ask us how to show Review score, criterias or other information from product in their custom blocks, for example, in table constructor. We added special shortcode for this This shortcode will show Score text This will show Pros and Cons Will show criterias
back to menu ↑

Question and Answer tab

In some cases you may want to add also separate tab for users where they can add questions and get answers about product. There are many plugins for this. For example, YITH question and answer plugin

back to menu ↑

Wishlist and comparison

By default, wishlist is enabled. But you must create wishlist page and add there shortcode. Please, read how to do this

Comparison setup is really easy for woocommerce. Again, you must just create page and place shortcode there. Read how to do this

back to menu ↑

Configuring Headers, colors and basic woocommerce settings

We added some special header layouts which are pretty good for directory websites. Go to your site as admin and open Customizer

Then go To theme option tab – Header and menu. Choose Shop/Comparison header layout. Then, you can enable additional icons in header: wishlist, comparison, cart, etc. Other cool header layout is Customizable Header layout.

We added also Additional code area near icons. What does it mean? It means that you can assign some additional custom elements. You can combine them with our special conditional shortcodes

For example, you can show different links there for logged users and guests. This is code for this

If you are not sure how to write html code, you can add some content in regular visual editor in your product, then, in right corner switch to Text and you will get HTML of your content.

If you want to have different mobile logo and header style, go to Theme option in admin panel and check theme option – logo and Amp tab.

Also, it’s better to check some standard woocommerce settings. By default, woocommerce will create shop page, account page and some other system pages. You can find them in woocommerce – settings – Advanced settings. Make sure that you have Shop page and My account page there. Check also your currency in general settings. Copy link of your My account page, you will need it in next step.

back to menu ↑

Configuring Login/Register

We have login/register popup in our theme. But, we recommend to use regular woocommerce registration. First of all, go to Woocommerce – settings – Account and Privacy and change settings for registration if you need (or leave them as default). Then, go to Pages – All pages and find your My account page

Edit this page and make it as Full width

Copy link to page and use it in Theme option – user option – Add custom register link

In this case, users can register from woocommerce page in our login popup instead of popup registration. This way is better to prevent different incompatibilities with woocommerce plugins.

Also, after user is logged in his account, he can see “Manage my order” tab in user dropdown which will go to his account tab. If you think that it’s useless for your site, you can hide this link

back to menu ↑

Change Link of Directory Archive

You can change permalink of your main directory page. By default, woocommerce set it as “shop”. You can create new page, name it “Directory” or as you like, set any link of page. Then, go to Woocommerce – settings – products and choose this page.

back to menu ↑

Search filter configuration

Search filters is one of important part for any directory site. It allows users to find what they need on your site. To make search filters, you must configure attributes on your site as described in beginning of this tutorial.

We added one of the best advanced filter plugin in our theme, which is easy to setup and use. You can read about filter plugin and it’s configuration in our docs. Mostly, configuration is pretty simple, just go to Woocommerce – Settings – Advanced filters and add some filters to your site.

One of most popular questions about filters is how to make filter’s category. The answer is simple – you don’t need to do any categories. Just assign attributes which you need for each your product. Woocommerce can detect attributes for products on category page and disable all attributes which are not in use for category. For Advanced filter plugin, you must enable option “Adoptive filtering” for this purpose. Read about adoptive filters.

back to menu ↑

Adding Locations

Well, Rehub is not theme for something like “Places site”. We want to give you some unique functions which are not available in other themes, so, we concentrated more on reviews, products, services and not on Destination directories. But, it’s always good to have option for some functions, so, we added also Location functions via plugin Geo My WordPress.

When it can be useful? For example, if you want to assign locations to your products and let visitors to find “products near you”. Also, you can add map for your reviewed product or service, hours of work.

We provided docs about locators. In few words how it works for products. You must install plugin Geo My WordPress and enable Post locator addon and Single Location addon in Geo My WordPress – Extensions. Then, go to settings of plugin and enable Products in Post locators.

Once you do this, you will have Form inside your products where you can fill location.

Now, if you want to show location inside your products, you can assign widget Geo My WP Single Location to Woocommerce Product Sidebar area in Appearance – widgets.  

Leave all settings in widget as default, the only thing which I prefer to delete – it’s product title in this line

back to menu ↑

User Frontend Submit

If you want to have site where users can submit their listings, you can use our bundled RH FRONTEND PRO plugin. You can get plugin from Rehub – Plugins section.

After installation, create form and choose to use Product in form

If you created attributes early, all of them will be automatically detected in form. Then, you can enable/disable each field in form. Some explanations:

  1. Excerpt field is equal to Short description field in admin panel of products
  2. Product options field is important. You can enable there submission of product gallery. Also, by default, woocommerce will make all products as inner (so, will be with cart). In this field you can enable External type of products which will disable cart

All other settings can be default. Also, please, read our docs about some setup for plugin in User Submit docs

Also, you can enable saving main image of product from external url

And, of course, you can have Paid listings

back to menu ↑

How to add video field?

All our products support video reviews. If you want to have the same option for users – create Custom field in form with key rh_product_video and make it as textarea field type

Theme supports youtube and vimeo for this type of video field.

back to menu ↑

How to add custom secondary buttons on Product page?

With help of our Custom Product areas you can add custom button on product page. I will give you simple example. Imagine, that you want to have button “See demo” as on many App review sites.

First of all, you must store url to demo somewhere in product. If you don’t use any special extensions for creating custom meta panels like ACF, you can easily use Custom field function of wordpress. Check right corner of admin panel and enable there Custom fields.

Now, you have custom field panel where you can add custom data. So, add custom field, for example, demo_link and add link

Next part is to add button which will show this data.

If you want to add this button in ALL products – go to Theme option – shop settings – After Button Area

Add there next code

<a href= is HTML for links.

class=”” has different classes from our theme to proper format link, so it will look like button of product. It has also special class rehub-sec-color-bg. This class will add special color of button which you can set in Theme option – Appearance – secondary color. If you want to style buton as primary color of theme, replace this class to rehub-main-color-bg.

Also, link has special getter shortcode wpsm_custom_meta. This shortcode allows to get any custom value from product. Read more about shortcode

If you place parameters of shortcode and you use shortcode as part of link, be sure, that you don’t have any symbols in attributes. for example [ wpsm_custom_meta field=”demo_link” ] will not work as you have symbol “” in attribute name.

So, after generating code, you will have next

If you want to reduce margins between buttons, use code

.post p.cart{margin-bottom:10px}

You can place this in theme options – general options – custom css

back to menu ↑

How to add contact form as button or how to make classified site on woocommerce

Instead of placing secondary button, you can place contact (inquiry form). This will turn your shop into classified site. So, users can post some products on your site via frontend form and buyers can contact with owners via form instead of adding product to cart on site.

Check how to turn your woocommerce to classified site

back to menu ↑

Claim listing

Usually, it’s the same as contact button or report button. You can see how to add contact forms in link above. If you need just something like report button, follow next docs

 

 

 

 

How to make directory, classified, review website with woocommerce
4.4 (88.33%) 24 votes

Want to get unique wordpress tips?

We won't rent or sell or spam your email. We promise!

Tags:

9
Leave a Reply

avatar
2 Comment threads
7 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Gavwpsouladmin Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Gav
Guest

Thanks for the updated guidance.
Are you updating one of the demos to show a woocommerce directory site? I am looking at using WooCommerce for product reviews and place listings, so it would be good to see how to separate the global attribute filters, etc.

Gav
Guest

What would you suggest to implement a ‘Claim Listing’ feature?