{"id":25921,"date":"2024-04-17T15:13:19","date_gmt":"2024-04-17T09:13:19","guid":{"rendered":"https:\/\/codexpert.io\/?p=25921"},"modified":"2026-05-14T15:32:31","modified_gmt":"2026-05-14T09:32:31","slug":"elementor-woocommerce-product-filter","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/elementor-woocommerce-product-filter\/","title":{"rendered":"Add WooCommerce Elementor Product Filter – A Step by Step Guide"},"content":{"rendered":"
<\/div>\n

When it comes to streamlining the buying journey, a well-placed product filter is really crucial. Customers feel compelled to make repeated purchases if they can find exactly what they need with a few simple clicks.\u00a0<\/p>\n\n\n\n

However, designing your product filter depends on your audience’s preferences, your product attributes, and their pricing. Once you narrow down these criteria, crafting a perfectly optimized product filter depends on the WordPress plugins you are using.\u00a0<\/p>\n\n\n\n

While the Elementor product filters can quickly get the basics done, customizing it to your brand includes a few extra steps. This guide will give you a step-by-step on how to create and customize the WooCommerce product filter for Elementor, according to your website demands.\u00a0<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n

Add WooCommerce Elementor Horizontal Product Filter<\/strong> <\/h2>\n\n\n\n

You can add and edit a horizontal section with WooCommerce product filter plugins for Elementor. Use CoDesigner<\/a> to get detailed design options for product filters. Here\u2019s a step-by-step on how to add and design a horizontal product filter for Elementor using CoDesigner – <\/p>\n\n\n\n

<\/div>\n\n\n\n

Step 1: Add Filter Horizontal <\/strong><\/h3>\n\n\n\n

Go to your WordPress dashboard, locate your shop page, and click on \u201cEdit with Elementor\u201d. <\/p>\n\n\n\n

\"Edit<\/figure>\n\n\n\n

Once on the editing page, create a container and select a structure for that section. Click on the plus (+) button to add a new structure. <\/p>\n\n\n\n

Find your CoDesigner filters by searching for widgets in the \u201celements\u201d section on the Elementor editor. Add the \u201cFilter Horizontal\u201d of CoDesigner. <\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 2: Edit Content<\/strong><\/h3>\n\n\n\n

With CoDesigner, you\u2019re given all the necessary sections to edit your filters. In the content section, you can add new features, customize each title, and include a price range.\u00a0<\/p>\n\n\n\n

\"Edit<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 3: Edit Style <\/strong><\/h3>\n\n\n\n

Editing filter style is much more convenient and comprehensive with CoDesigner. You can design the typography, color, icon, and border to match your brand. <\/p>\n\n\n\n

\"Edit<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 4: Advanced Options <\/strong><\/h3>\n\n\n\n

Go to the advanced section to add effects and attributes to personalize your filters further. <\/p>\n\n\n\n

\"Advanced<\/figure>\n\n\n\n

You can add motion effects, border changes, mobile\/tablet\/desktop responsiveness, and much more.\u00a0<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

Step 5: Update and Save <\/strong><\/h3>\n\n\n\n

Click \u201cupdate\u201d to check the preview and if you\u2019re happy with the results then simply save to apply those changes. <\/p>\n\n\n\n

\"Save<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Add Elementor Vertical Product Filter<\/strong> WooCommerce <\/strong><\/strong><\/h2>\n\n\n\n

While the default vertical product filter option for Elementor might get the job done, CoDesigner offers complete design control over all the elements for your filters. <\/p>\n\n\n\n

Here\u2019s how to add and design a WooCommerce vertical product filter for Elementor –<\/p>\n\n\n\n

Step 1: Add Filter Vertical <\/strong><\/h3>\n\n\n\n

Head to your WordPress dashboard and find your Shop Page. Choose “Edit with Elementor” to start editing. In the Elementor editor, make a new container by selecting a structure for it. <\/p>\n\n\n\n

Press the plus (+) icon to pick a structure, and make sure to include a structure with two columns<\/strong>. <\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Look for CoDesigner filters in the “elements” area of the Elementor editor. Add a shop on your preferred column, and drag the \u201cFilter Vertical\u201d widget from CoDesigner to the other one for easy editing.<\/p>\n\n\n\n

\"Drag<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 2: Add Content and Style <\/strong><\/h3>\n\n\n\n

Similar to horizontal filters, you can add new filters, and edit current ones via the content and style sections. CoDesigner gives you a pre-set list of filter content for you to edit. <\/p>\n\n\n\n

But unlike Filter Horizontal, Filter Verticle comes with an \u201cAuto Filter\u201d mode, which lets the customer find filtered products without clicking \u201cApply\u201d. <\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Note<\/strong>: This option can be further enhanced with the AJAX filter, which shows customers filtered products without reloading the page.\u00a0<\/p>\n\n\n\n

Step 3: Advanced Options <\/strong><\/h3>\n\n\n\n

As you did in the horizontal filter, you can add advanced effects and attributes to personalize your filter further here too. You can edit both mobile and desktop versions via the advanced section.\u00a0<\/p>\n\n\n\n

Step 4: Update and Save <\/strong><\/h3>\n\n\n\n

You can check the preview for your filter design by clicking on \u201cUpdate\u201d, and once you\u2019re happy with your output, save the changes to apply to your site. <\/p>\n\n\n\n

<\/div>\n\n\n\n

CoDesigner\u2019s Advanced Product Filter for Elementor<\/strong><\/h2>\n\n\n\n

You can apply the same method to set up the advanced product filter as the vertical product filter. While the steps may be the same, there are a few added features that can improve the buying experience. <\/p>\n\n\n\n

These features include product reviews<\/strong>, which lets you select products based on their average star rating, and a custom taxonomy list<\/strong> which generates a list of subtopics that belong to a specific group. <\/p>\n\n\n\n

\"CoDesigner\u2019s<\/figure>\n\n\n\n

If you have the CoDesigner plugin set up, you can easily find these features by following the steps outlined above. <\/p>\n\n\n\n

<\/div>\n\n\n\n

Wrapping Up <\/strong><\/h2>\n\n\n\n

A well-placed and nicely designed product filter can improve the buying journey significantly. When customers quickly find the items they need alongside other related products, they\u2019ll feel encouraged to browse your shop for longer and make repeated purchases. <\/p>\n\n\n\n

Get CoDesigner Pro<\/a> to easily create and carefully craft your ideal product filter for your WooCommerce website in minutes! <\/p>\n

<\/div>","protected":false},"excerpt":{"rendered":"

When it comes to streamlining the buying journey, a well-placed product filter is really crucial. Customers feel compelled to make repeated purchases if they can find exactly what they need with a few simple clicks.\u00a0 However, designing your product filter depends on your audience’s preferences, your product attributes, and their pricing. Once you narrow down […]<\/p>\n","protected":false},"author":10,"featured_media":25923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[26],"class_list":["post-25921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woolementor"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/25921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=25921"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/25921\/revisions"}],"predecessor-version":[{"id":33255,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/25921\/revisions\/33255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/25923"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=25921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=25921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=25921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}