Advanced Custom Fields Archives : Code Astrology

Posts

Custom Taxonomy, Woo Product Table pro, WooCommerce, WooCommerce Filter

WooCommerce Filter for Product Table: Adding and Customizing

This is a complete guide about adding and customizing WooCommerce Filter for Product Table.

What is filter in WooCommerce?

Actually filter in WooCommerce is the feature that enable a dropdown to filter your products. The procedure are performed with Ajax that needs no page reload.

So filtering helps to find the desired products more specifically that saves the valuable time of your customer. As a result sells increases with conversion rate.

Why should I use?

Few days back I just need to buy a pair of shoes. So I had look into a Ecommerce site who are famous for exporting worldwide brand shoes, slippers and some other accessories. They have thousands of products in their store which assigned different categories.

I wanted to purchase a pair of casual shoe of size 9 in Black. But unfortunately there was no functionality for filtering product for size. For this I’ve to switch to another site as I was then in a little hurry.

Now let’s see how to add Filter in WooCommerce Product Table.

In this guide I’ve used Woo Product Table pro (the bestselling Product table of CoeCanyon) to use Filter in Product Table. Good news is that you can add filter to product table in three ways. There are:

Default filter in Woo Product Table
Add Filter by Custom Taxonomy
Filter by Custom Fields

Default Filter in Woo Product Table

Now we’ll add WooCommerce Filter for Product Table which is given default. First make a product table. To do navigate to Dashboard->Product Table->Add New Shortcode.

Now customize your table by shortcode post and click update button. Copy the shortcode and paste in a new page.

If you don’t know about using Woo Product Table, please follow How to Make a WooCommerce Product Table Using Woo Product Table Pro

Let’s have a look how is the product table before using Filter.

Before filter

Now we’ll add a filter to the table.

To add filter navigate to Dashboard->Product Table->Add New Shortcode and customize shortcode. Go to Search Box And Filter Tab and in Mini Filter box choose Filter Show(Default).

Active filter in shortcode

Now update shortcode and paste it to a page or post where you want to show the filter.

shortcode of woocommerce product table

Here I’ve taken a new page named Filter and pasted the previously copied shortcode in text area. Now publish the page and click on view page.

After selecting filter

On the top of the table there is a WooCommerce Filter for Product Table by which you can filter your products in Category and Tag.

Add Filter by Custom Taxonomy

There is a good news that you can add WooCommerce Filter for Product Table by custom taxonomy. Following the five steps given below you can do that very easily.

Step 1: Installation plugin

To add filter by custom taxonomy we need to install an additional plugin to create custom taxonomy. There are some plugins in wordpress to do that. I’ve used Custom Post Types and Custom Fields creator – WCK.

Navigate to Dashboard->Plugins->Add New search for Custom Post Types and Custom Fields creator – WCK.

Custom field plugin

Install and activate the plugin.

Step 2: Create Custom Taxonomy

Go to Dashboard->WCK->Taxonomy Creator

Select the name of the taxonomy (must not contain capital letters or spaces), Singular Label and plural Label. Then choose Attach to Page/Post/Product.

Here I’ve chosen product as I’ll show it for product. Select Hierarchical True and click on Add Entry.

Create custom taxonomy

To see more on using Custom Taxonomy please see Custom Taxonomy in WooCommerce

Step 3: Add Taxonomy to Products

Now Navigate to Dashboard->Products->All Products and edit the products you want to do.

At the right sidebar you’ll get the taxonomy what you have created before.

Add taxonomy to product

Click on Add New(Taxonomy Name) and input the value. Then click on on Add New (Taxonomy Name) button.

Step 4: Customize in Shortcode Configuration

Now navigate to Dashboard->Product Table->Add New Shortcode->Search Box And Filter.

In Taxonomy Keywords for Filter (Separate with comma[,]) type your taxonomy name. In the box there is color and size for taxonomy that we created in taxonomy creator and product_cat and product_tag for default taxonomy in Product Table Plugin.

Remember here, each taxonomy must be separated with comma.

Customize in Shortcode Generator for Custom Taxonomy

In the given screenshot color and size are for custom taxonomy. The rest of two are for WordPress default Taxonomy Category and Tag.

Step 5: Use the Shortcode

Update shortcode and paste to a page/post and publish it. Go go View Page to look the change.

Custom taxonomy in filter

So in table shown above you can see a WooCommerce Filter for Product Table.

Filter from Custom Field

There is a great news that in WooCommerce Product Table plugin you can use Custom Fields. You can use Advanced Custom Fields with this WooCommerce Filter for Product Table to show extra product data.

With the comparability of Custom Field it can be used to Filter products. Isn’t that awesome.

When there are too many products in product table to find the exact desired one, customer can find by Filtering products from table.

You can make a WooCommerce Filter for Product Table in easy three steps.

Step 1: Install and Configure Advanced Custom Fields

Install and activate Advanced Custom Fields plugin from WordPress Plugins root directory.

acf-for-Product-table

There are some customization needed to use Advance Custom Field.

To know about creating and customizing Custom Field please see How to Use Custom Field in WooCommerce Product Table Pro.

Step 3: View the Table

Then update the page and from the top of the page click on view page.

Then there will be a additional column say Brand. And the Product table may look like after adding the custom field:

Custom Field in product table

So here an extra column has appeared than before named Brand. I hope you’ve got it customizing WooCommerce Filter for Product Table.

October 16, 2018/1 Comment/by codersaiful

Advanced Custom Fields, Custom Fields WooCommerce, WooCommerce

How To Add Custom Fields In WooComerce Product Table

This is a step by step tutorial on how you can add Custom Fields In WooComerce Product Table and show extra product data.

What is custom fields?

The fields you use in your site such as product title, price, ratings, date are called metadata. Those fields are given as default in WooCommerce site.

But, if you want to add a field say brand for your products, that field are not available on WooCommerce. To do this you need to add an extra fields by using Custom Fields creator.

The uses of Custom Fields are so much to describe in a word. Let’s have look how you can use Custom Fields In WooComerce Product Table.

Too add an email address
To add Maps
To show extra info like author or Class for a product
Product image/description/price etc

How to add Custom Fields?

Add and configure your Custom Fields following the five easy steps.

Step 1: Installation and Activate Custom Fields

In this guide we’ve used Advanced Custom Fields plugin with Woo Product Table pro plugin.

To add a Custom Fields in your WooCommerce site log in your site. From Dashboard navigate to plugin. On the top-left of the screen click on add new. Then in search option type acf. You will see some plugin. Try Advanced Custom Fields among them.

Install Advanced Custom Field

Install the plugin and and active it. You can active it from Dashboard->Plugins->Installed Plugins->Advanced Custom Field and then active it.

Step 2: Add Field Group

Now navigate to Dashboard ->Custom Field->Add New

From the top of the screen input your Field Group Title in Add New Field Group. Here I’ve input Brand Name. Input yourself what you want.

Add field group for product table

Step 3: Configure Field details

Then click on add field right-left to the screen.

After that select your Field Label from Field level option. Here I’ve given Brand as Field Level. Here Field Name will be taken automatically.

Now select Field Type. Here are a lot of options. You can set Text/Number/Email/Message/Checkbox and some other options. So choose what you want to add as custom field.

Here I’ve selected Text as my Brand name is a text.

Configure field details

Step 4: Configure Location

The good news is you can add Custom field anywhere like post/page/template. To select the functionality go to Location.

I want to add custom field as post in our product. So I’ve selected Post Type in “Show this field group if”.

Also select the field “is equal to product” to Product.

Select location

Step 5: Publish Page

Now click on Publish button from the top of the page.

Publish ACF

So I’ve created an Advanced Custom Field option for Product.

Before I’ve said that custom fields can be added anywhere. In this guide I’ve used this custom field in a WooCommerce Product Table.

If you want to know about the plugin have a look into my previous post about Woo Product Table Pro.

Before showing a custom fields in Product Table let’s look how is the table.

Product table without custom fields

There I want to add an extra column for Brand. I mean, I’ll add a column that will show products of different brand.

How to show Custom Fields?

In three steps you can show the created Custom Fields In WooComerce Product Table.

Step 1: Add Brand name Value to Product

To show Custom Fields In WooComerce Product Table navigate to Dashboard->Products->All Products

Click on the products to edit. Just up to the bottom of screen there you will get a Brand Name option. Select your brand name in text-box named Value. I put here Polo for for a Tshirt.

Select brand

Finally Publish the product page.

Step 2: Configure the Shortcode

Now go to your existing shortcode or add new shortcode of Woo Product Table pro (Dashboard->Product Table->Add New Shortcode) and configure shortcode. Copy the shortcode and paste in which page/post you want to show the custom fields.

You can follow my previous post WooCommerce Product Table : Boost Your Sale to know in details to know about configuring shortcode.

Now in the shortcode configuration panel at the bottom you will see a option to set up your custom field. Then you need put the keyword of your shortcode like “brand” . Also fill up the column title field . You can follow the screenshot attached below.

Custom Filed support in woocommerce product table

Here I’ve given brand as I selected Field Name to brand before.

Note: Always select small letter for this sector.

Now type Brand, in the column title field. It will show as a column title of that custom field.

After all setup click the button named Add As Column . Then it will add a column to the shortcode. Just like below screenshot :

custom field support in Woocommerce Product Table

Now all is ok to go next. Click on the Publish/Update Button.

Step 3: Publish/Update the Page