Filtering Custom Queries in Oxygen using WP Grid Builder

This tutorial provides the steps to use WP Grid Builder to filter WooCommerce products by product categories in Oxygen.

We shall use Oxygen’s Repeater component with custom WP Query for outputting the products with each product showing linked image, linked title, price and Add to cart button.

Step 1

Install and activate WP Grid Builder.

Activate your license.

All Facets > Create a Facet.

You may want to turn off “Show Empty Choices” as generally speaking we do not want to present a filtering option that does not show any results.

Save changes.

Create another facet.

Step 2

This tutorial is going to cover the case of a secondary query. Hence we shall do this step on a static Page rather than the product category archive template.

Create a static Page and edit it with Oxygen.

Manual set-up instructions follow. 1-click paste codes are given at the end.

Add a Section and inside that a Columns component (40 – 60).

Change the width of left column Div to 20%.

Add a Shortcode component inside this Div having:

[wpgb_facet id="1" grid="wpgb-content"]

where 1 is the ID of your Product Categories facet.

If you are going to have more than one WP Grid Builder facet instance per page, you would need to ensure that wpgb-content part is unique i.e., wpgb-content-1, wpgb-content-2 etc. This applies not only to the above but also to all the steps in this tutorial.

In the right Div, add a Repeater.

Change WP Query to this manual query:

post_type=product&wp_grid_builder=wpgb-content

Inside the Repeater’s Div, add a Product Builder component.

Inside this, add any product-specific elements you want.

Tip: After inserting an image and making it dynamic by making it the featured image, you may want to set the size parameter like so:

[oxygen data='featured_image' size='woocommerce_thumbnail']

For the price, you could either use Product Cart Button component or a Code Block having:

<?php woocommerce_template_loop_add_to_cart(); ?>

Below the Repeater, add a Shortcode component having:

[wpgb_facet id="2" grid="wpgb-content"]

where 2 is the ID of your Pagination facet.

Add a Code Block (at the end of all other elements in the Structure). This is for the animation of the grid items as they get loaded in.

PHP:

<?php
	// echo "hello world!";
?>

CSS:

@keyframes post-animation {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}

.post-animation {
  animation: post-animation 0.6s ease;
}

JS:

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    console.log( 'instance', wpgb.instance );
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( posts ) {
    posts.forEach( animate );
}

function animate( post, index ) {

    post.style.opacity = 0;

    setTimeout( function() {
        requestAnimationFrame( function() {
            post.removeAttribute( 'style' );
            post.classList.add( 'post-animation' );
        } );
    }, index * 60 );
}

If you would like to paste the entire structure of the Section and the Code Block, use Hydrogen Pack or Hydrogen Paste with the following:

https://pastebin.com/raw/CRbAbKjb

https://pastebin.com/raw/XW5JWE4x

Step 3

At Manage > Stylesheets, create a new Stylesheet and paste these in:

.wpgb-content .oxy-repeater-pages-wrap {
  display: none;
}

.wpgb-content:focus {
	outline: none;
}

body .wpgb-facet .wpgb-pagination li a {
  color: #2b2c28;
  padding: 6px 18px;
}

body .wpgb-facet .wpgb-pagination li a:hover {
  padding: 6px 18px;
}

body .wpgb-facet .wpgb-pagination li a[aria-current] {
  background-color: #65bec2;
  color: #fff;
}

References

https://docs.wpgridbuilder.com/resources/guide-filter-custom-queries/