Troubleshooting //
Cannot Redirect Users to a Filtered WooCommerce Shop from Homepage

Cannot Redirect Users to a Filtered WooCommerce Shop from Homepage

Question

I want to add a button to my homepage that redirects to a filtered shop

Answer

If you want to access the Shop page with pre-selected filters right from the homepage, please stick to the routine below.

Create a filter for Product Categories.

Go to Smart Filters, click the “Add New” button, give it a name and fill in the Filter Settings section as shown further:

creating checkboxes filter for woocommerce shop page

Go to edit the Shop page in Elementor. In the left-side toolbar, find the Checkboxes Filter widget and drag and drop it to the desired page area. Afterward, select the filter you’ve just created in the Select filter control. Pick “JetWooBuilder Products Grid” in the This filter type for select and make sure to choose “Mixed” as Apply type. Update the changes.

checkboxes filter settings in Elementor

Now, go to the Shop page on the frontend, apply one of the newly-added checkboxes filters, and copy its link somewhere safe. You’ll need it later. Please note that you don’t need to copy the category number. Stop right after the “:” sign.

copying the category link to clipboard

Add a custom CSS class.

Follow the Appearance > Customize pathway in your WP dashboard. Find the Additional CSS tab and press to unfold it. In the newly opened window, paste the following code:

.style_dlink .jet-listing-dynamic-link a:first-child {
display:none;
}
custom css code input

Press the “Publish” button at the top of the window.

Create a Listing for Terms.

Go to JetEngine > Listings > Add New and input the following settings:   

new listing creation for terms

As soon as you press the “Create Listing Item” button, you’ll be taken to the Elementor page editor. In the left-side toolbar, seek the Dynamic Link widget and drop it to the working area. Next, add the following macro to the Label text area:

<a class="jet-listing-dynamic-link__link" href="http://mycrocozine.com/shop/?jsf=jet-woo-products-grid&tax=product_cat:%queried_term%">%title%</a>

macro input in Elementor

Where: 

http://mycrocozine.com/shop/?jsf=jet-woo-products-grid&tax=product_cat: is the applied Category filter’s URL you’ve copied on Step 1;

%queried_term% is a macro that helps you pull up the filtered search results. 

Next, click on the Advanced tab and type “style_dlink” in the CSS Classes section. That’s how the system will know that it should use the styles you added on Step 2 to this particular Dynamic Link widget. Press “Update”.   

adding css classes in Elementor

Display the Listing on the frontend.

Open to edit your homepage in Elementor. Drag and drop the Listing Grid widget to the appropriate page section. In the Listing control, select the listing you’ve created previously. Adjust the listing display and update the changes. 

adding the listing grid widget to homepage

Now, you can enjoy the way it all works on the frontend.

Was this article helpful?
YesNo
Still need help?
Submit a request