Implement product range duplicate filter and dropdown logic

[bobbingwide]

For some products there are over 20 products in the product range. When displayed on the shop or product archive pages the user sees the same picture over and over again.
It would be nice to be able to reduce the duplication.

Requirement

• We would like to remove the duplicates
• and display one product from a product range
• with a drop down list of the other items in the range
• showing their size and starting price

Proposed solution

• Implement some filtering logic in response to woocommerce_before_shop_loop that will remove duplicate products from the array of products found for a page
• Add logic to display the product range size and price information as a drop down, which is displayed when the user clicks on a button. Action hook display_gvg_product_range_dropdown
• Add logic to filter the product title for products which are displayed as part of Upsells or Related products. Action hook set_product_range_title which adds a filter function against the_title

For more information see https://github.com/bobbingwide/gardenvista/issues/21

[bobbingwide]

Screenshot from a single product page for a product which has Upsells and Related products.

Notes:

• When the product only has 1 item in the range the dropdown is still used
• The dropdown is styled with a width of 20rem to allow for size of form wwwwXhhhhmm, sale items and prices above 10,000
• This is to cater for responsive displays.
• Clicking on the image takes the user to the particular product that was listed
• Clicking on any of the drop down items takes the user to the selected product in the range
• Currently, I've found it necessary to disable the 3d transform that occurs when a product is hovered over as this caused the dropdown to hide behind other product's images.

[bobbingwide]

Screenshot from the store page.