[Resolved] Showing products related to a custom post type (via 1:many relationship)
This thread is resolved. Here is a description of the problem and solution.
Problem: I am using a one-to-many relationship where Products are children and Styles are parents. I would like to create a View of Products to display on the Style post. This View should only show children of the Style post. In that list of Products I would like to display an Add to Cart button.
Solution: Create a View of Products, filtered by post relationship, where the parent post is set by the current page. In the Loop, include the wpv-woo-buy-or-select shortcode to generate the Add to Cart button.
We have a custom post type called "Styles". Each Style will have multiple products associated with it. SO the relationship is 1 style to Many products.
I set this up properly. As you can see here at this URL, hidden link
the Style is called "Astree" and there are two products associated with it (Accessory, Test Product 1)
I want the users to be able to add the products directly to their cart from this page. That means i need the Attributes to be a dropdown menu (Size & Color are the two attributes currently).
A similar example that you can see is on this page: hidden link
On this page, for example, the "Style" would be "220 Thread Count Percale". And the Products tied to that Style would be:
Duvet Cover
Flat Sheet
Fitted Sheet
Pillow Cases (Pair)
Sham
Bedskirt (Tailored)
Notice how each "Product" has its own Attributes (Size & Color), the quantity selector and an Add to Bag option. I just need to know
Hi, I think you can accomplish this display with a View of related Products and an Add to Cart shortcode. Here's how I would set it up:
- Create a View of Product posts. Add a Query Filter to filter by by Post Relationship, where the parent post is set by the current page. If you are unable to see the Query Filter panel in the editor, activate it in the Screen Options tab at the top right corner of the View editor screen.
- Uncheck the "Don't include current post in query results" checkbox
- In the Loop Output of this View, insert the post link for now so we can confirm it works correctly.
- Place this View in the Style single post template or Layout.
- Check the results on the front-end of the site. You should see the correct child Products appear for each Style.
- Once that is working correctly, modify the Loop in the View of Products. Use the Fields and Views button to insert the "Add to Cart button - Product listing pages" shortcode. See the attachment. In the popup, you can turn on the variation selection and the quantity field if you want. Then you can delete the post link shortcode we placed earlier for testing.
- Apply your own custom CSS to style the generated Add to Cart fields.
Please let me know if I've misunderstood the request and I'll take another look.
Thank you so much!! I've been dragging my feet on this project because I was afraid of how complicated it might be. With the Toolset plugin and the amazing support, I feel so relieved. I have all the data I need now on the front-end. All I have left to do is make some custom styles so the data looks "pretty" for my client.
I ended up having to install the WooCommerce Views Toolset plugin.
Here's the page: hidden link
As you can see, the Product (called "Accessory") successfully loaded all the attributes needed.
I do have one final issue.
The problem I'm still having is that when I click "Add to Cart", it takes me to the product page. Is there any way I can stay on the same page? My clients are very picky about the User Experience of their website so this is something I'll need to get working.
For simple products, you can turn on WooCommerce's AJAX feature in WooCommerce > Settings > Products. Choose "Enable AJAX add to cart buttons on archives" to activate this option, and simple products will not redirect to the single Product page. For variable products, unfortunately there is not currently a good way to prevent this redirect.
Okay, well crap. Do you know where I can start looking at the underlying code to try and prevent this?
It's odd because when I click Add to Cart for a variable product, it does technically add it to the cart. It just ALSO redirects me... so i feel like i should be able to identify where this logic occurs and just prevent the redirect?
Unfortunately there is not currently a good way to override this redirect using any built-in features, and since it's not supported I am unable to provide any level of detail about how to override it from a technical perspective. I don't know what other hooks rely on this page load, so you could break other features unexpectedly. We don't recommend modifying core plugin files except to apply developer patches from erratum posts.
I totally understand. I appreciate all the help. I feel like this is a feature that many many Websites would want; I'm surprised its not part of core WooCommerce.
Feel free to submit a suggestion by creating a new post here with the "Suggest an Improvement" option. Our developers will evaluate the request and let you know if it's something we can implement.