[Support request] Woocommerce Product and Category page problem

[Javier]

I have seen a problem in Products and single category pages.

In the html under the main tag It sets an article tag with the id and all he classes from the first product shown:

<article id="post-2635" class="post-2635 product type-product status-publish has-post-thumbnail product_cat-1-5-cristal-curvo-caliente product_cat-vitrinas first instock purchasable product-type-simple" itemtype="https://schema.org/CreativeWork" itemscope="">
  <div class="inside-article">
    <div class="entry-content" itemprop="text">
      <header class="woocommerce-products-header">

Inside the ul tag with the product lists in it put the correct classes:

<li class="product type-product post-2635 status-publish first instock product_cat-1-5-cristal-curvo-caliente product_cat-vitrinas has-post-thumbnail purchasable product-type-simple">

I’m trying to make category filter but it doesn’t work because the article tag have the same classes that the li of the products.

I thought it was some issue with my configuration, but I have seen in the niche site (https://gpsites.co/niche/shop/) that there’s this problem also.

Here’s an screenshot:

[David]

Hi there,

i am not sure theres an easy fix to that.
How does the filter your building work? Is it Javascript ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Javier]

Yes It’s Javascript, finally i made it work.

I have adapted this code (https://www.w3schools.com/howto/howto_js_filter_elements.asp) and it works, but it have issues with pagination and woocommerce result count so I have to find another way to achieve what I want, the WooCommerce plugin WooCommerce Product Search is the most similar that I found but it doesn’t fit exactly what I want.

[David]

Maybe an Ajax filter ? – there are a few available like this one:

https://en-gb.wordpress.org/plugins/woocommerce-ajax-filters/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts