[Resolved] search fields in combination with variable products

[Author]

Posts

[troyC]

Hello there,

Can I get advice on how to approach the following.

I am trying to use search fields in combination with variable products.

For example:

Variable Product A has 3 variations with a variable field 10mm|20mm|30mm
Variable Product B has 2 variations with a variable 10mm|30mm|50mm

Is it possible to add checkboxes
> 10mm
> 20mm
> 30mm
> 50mm

I hope you understand what i am trying to achieve... any ideas ?

[Waqar]

Hi Troy,

Thank you for waiting.

The available product variations can be used for search filters, through the "Search and Pagination" section.

- Please click "New filter" button.
screenshot: hidden link

- You'll find the find the available variations, under the "Taxonomy filters".
screenshot: hidden link

- From the screen that follows, you can select the type and relationship of the filter as needed.
screenshot: hidden link

- As a result, the "wpv-control-post-taxonomy" shortcode will be added, with the selected attributes.
screenshot: hidden link

Note: you can read the details about the available attributes for the "wpv-control-post-taxonomy" shortcode, from:
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-521572

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[troyC]

Thank you very much.

Is it possible to manually select attributes used? or exclude certain attributes?

In my case it adds way to many options (see attachment)

[Waqar]

Hi Troy,

Thanks for writing back.

It is not possible to automatically include/exclude specific attribute terms, but you can generate the list manually.

Consider this example of "Product Color" attribute.

The shortcode used to generate the list of checkboxes:

<div class="form-group">
	<label>[wpml-string context="wpv-views"]Product Color[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="pa_color" type="checkboxes" url_param="wpv-pa_color"]
</div>

The output that gets generated on the frontend, as a result, can be accessed through Google's inspect element tool:
( screenshot: hidden link )

<div class="form-group">
	<label>Product Color</label>
	<div class="checkbox">
		<label for="pa_color-blue">
			<input type="checkbox" id="pa_color-blue" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="blue">Blue
		</label>
	</div>
	<div class="checkbox">
		<label for="pa_color-gray">
			<input type="checkbox" id="pa_color-gray" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="gray">Gray
		</label>
	</div>
	<div class="checkbox">
		<label for="pa_color-green">
			<input type="checkbox" id="pa_color-green" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="green">Green
		</label>
	</div>
	<div class="checkbox">
		<label for="pa_color-red">
			<input type="checkbox" id="pa_color-red" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="red">Red
		</label>
	</div>
	<div class="checkbox">
		<label for="pa_color-yellow">
			<input type="checkbox" id="pa_color-yellow" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="yellow">Yellow
		</label>
	</div>
</div>

Note: Here is a guide on using Google's inspect element tool, to view the page's markup:
hidden link

Once, you'll have the HTML code for the list of checkboxes, you can copy it directly in place of the shortcode [wpv-control-post-taxonomy] and keep only the items which are needed.

<div class="form-group">
	<label>Product Color</label>
	<div class="checkbox">
		<label for="pa_color-red">
			<input type="checkbox" id="pa_color-red" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="red">Red
		</label>
	</div>
	<div class="checkbox">
		<label for="pa_color-yellow">
			<input type="checkbox" id="pa_color-yellow" class="js-wpv-filter-trigger" name="wpv-pa_color[]" value="yellow">Yellow
		</label>
	</div>
</div>

I hope this helps.

regards,
Waqar