Custom Product Query with Elementor and ACF

A content management system like Shopify and WordPress, give what’s referred to as granular control when requesting content.

For example, in this case, we have pages for Artists, Alice and Bob.

If you visit Alice or Bob’s artist page on the Art Gallery website, it should display products only of the appropriate artist.

In this case since each Artist page was also a Single Page Elementor Template, I decided to query products in relation to the artist, using a Custom Query.

You simply get to place your Query ID in the Elementor Posts shortcode, in this case I selected Products as the source.

You’ll need to insert some PHP for the query itself. This is how you’ll ask the database to give you the items you’re looking for.

// Add a custom query to Elementor based on the Artist Relationship
	add_action( 'elementor/query/artist_product_filter', function( $query ) {
		// Modify the posts query here
		$meta_query = $query->get( 'meta_query' );
		if ( ! $meta_query ) {
		$meta_query = [];
		}
		$meta_query[] = [
			array(
				array(
					'key' => 'associated_artist', // name of custom field
					'value' => '"' . get_the_ID() . '"', // matches exactly "123", not just 123. This prevents a match for "1234"
					'compare' => 'LIKE'
					 )
				 )
	];
		$query->set( 'meta_query', $meta_query );
		} );

It’s important to note that we had the product assigned to the artist using Advanced Custom Fields.

So for every WooCommerce product that’s added, an artist is manually asigned to it. The code above asks for products based on that relationship; by using ACF Relationship fields.

Since the Artists on this website were of the “Portfolio” post type, we get to filter the results in our ACF relationship options.