Skip Navigation

[Resolved] related products with Elementor

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 7 replies, has 2 voices.

Last updated by stephaneR-2 3 years, 9 months ago.

Assisted by: Waqar.

Author
Posts
#1942585

Hi,

I'm using Elementor, Toolset Types, WPML, etc. All software is up to date.

I've imported a Drupal DB to WP DB into a "Product" custom type, with related products (connectedmodels-product-product relation.pdf). Already went fine (product with related products.pdf). For each lamp, at the bottom of the product page, I've the related lamps (as in the Drupal DB).

I've search extensively before sending this message.

--- Q1 ---

Then, using custom types indide Elementor widgets, I can display all custom types imported, except the related lamps.

For theses later "related lamps", which can be 3 or 4, never more, I understand I must use a view.

Views plugin appears to be obsolete and mutually exclusive with Blocks plugun. So I use Block plugin creating a view, with an image inside the view. And using the Views Elementor widget to insert my custom view. This process basically works, but the displayed results are not good.

After many many tries during two days, I must admit I'm completly stuck.

I can't display the related lamps (only name and images) to the current product.

--- Q2 ---

Can we link a property (text property) with an image ? ( i.e if property="this_property" then display this_property.jpg)

So I need help...

I can give you credentials to access to the related WP backoffice.

All the best from Oleron Island - France

Stef

PS
Unfortunatly , your help desk does not accept PDF files... And my files has more than one pages...

#1943255

Hi Stef,

Thank you for contacting us and I'd be happy to assist.

--- Q1 ---

To suggest the best way to improve how your related post view looks, I'll need to see how they're are currently set up.

Can you please share an example page where this related lamp view can be seen, along with some details about the improvements that you have in mind?

--- Q2 ---

It is possible to conditionally display the content/images, but, I'll need to understand exactly how and where you need to use these conditions, first.

Can you please also share an example of the page where you need this, along with the details about the conditional display requirement?

You're welcome to share temporary admin login details in reply to this message.

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

#1949485

Thank you for sharing these details and we have very pleasant weather here 🙂

Reviewing your website's set up, there are a few things that will need to be addressed first:

1. Post relationship:

I see that your website has a post-relationship between the same post type "Product". This is something that is not supported in Toolset and a relationship can be created only between two different post types.

I'm not sure exactly how you managed that and it must have something to do with the manual import, but, I'll not recommend using this unsupported approach, since it can result in unexpected results, going forward.

An alternative of grouping related products together can be to add a new custom post type "Product Collections" and create a 1-to-many relationship between "Product Collections" and "Products" post types, so that one collection can have multiple products.

This will allow you to show all products, which are related to the same product collection, through a post view.

2. Post View and content template:

An important point to remember is that generally, it is not recommended to mix the content generated through different page editors/builders, as it eventually leads to compatibility issues, in the long run.

The default Toolset Blocks based views are designed to be used when the new Gutenberg editor from WordPress is being used as a primary editor.
( ref: https://wordpress.org/gutenberg/ )

For someone who is using the legacy/classic WordPress editor or a third-party page builder like Elementor etc, the legacy/classic views that use shortcodes should be used.

Based on this you can go with any of these two approaches when it comes to using Elementor and Toolset together:

a). Our recommended approach is to attach the Toolset content template (and not Elementor's template) to single post pages. And to insert any content created in Elementor builder in this Toolset content template, you can use the "Elementor Blocks for Gutenberg" plugin, as explained in this guide:
https://toolset.com/course-lesson/using-toolset-with-elementor-page-builder/

OR

b). If you'd prefer to keep working with Elementor's template attached to single post pages, as they are now, then you should be using the classic or legacy views, which use shortcodes instead of the blocks.
( you don't have to install Toolset Views for this as the same features are also available from within Toolset Blocks too )

You can go to WP Admin > Toolset > Settings > General and select the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build" for the editing experience.

After that, you'll see the option to add classic views from WP Admin > Toolset > Views.

You'll find the guides on using the classic views here:
https://toolset.com/documentation/legacy-features/views-plugin/
https://toolset.com/documentation/user-guides/views/

I hope this helps and please let me know if you have any follow-up questions.

Once these basics points are cleared, we can move to your specific questions.

#1951127

Hi again Waqar,

>Thank you for sharing these details and we have very pleasant weather here 🙂

I'm pleased for you, here the spring is finally coming.

>I see that your website has a post-relationship between the same post type "Product". This is something that is not supported in Toolset and a relationship can be created only between two different post types.
>I'm not sure exactly how you managed that and it must have something to do with the manual import, but, I'll not recommend using this unsupported approach, since it can result in unexpected results, going forward.

Well... I'll knew you said that. At the time I did the import (by a custom code), I was not aware it was not allowed, so I did it 🙂 And it 's working really well. I can add product, add related products, delete then, no worries.

>An alternative of grouping related products together can be to add a new custom post type "Product Collections" and create a 1-to-many relationship between "Product Collections" and "Products" post types, so that one collection can have multiple products.

I should has done this way.

>This will allow you to show all products, which are related to the same product collection, through a post view.

I believe you are telling me that there is no solution? 🙂 Is there a way to simply display what I /see/ in the posts products pages ? I can see the related product.

I admit I really don't understand Toolset views (I know programming languages and SQL but the view interface is really unclear to me. It's something for non programmer users. I don't understand the 'logic'). I don't want to 'loop' into products, just display the related products as its already done at the bottom of the posts products page...

I don't know how to do something which is definitly not a loop but simply a SQL extract for specific output which I need.

2. Post View and content template:

>An important point to remember is that generally, it is not recommended to mix the content generated through different page editors/builders, as it eventually leads to compatibility issues, in the long run.

I agree. But Elementor is the best WP production tool the WP community ever seen. Anyone who has discovered Elementor is not affected by Gutemberg.

>a). Our recommended approach is to attach the Toolset content template (and not Elementor's template) to single post pages. And

This is impossible given the above elements.

>b). If you'd prefer to keep working with Elementor's template attached to single post pages, as they are now, then you should be using the classic or legacy views, which use shortcodes instead of the blocks.

I've tried, without success. So my message.

>( you don't have to install Toolset Views for this as the same features are also available from within Toolset Blocks too )
>You can go to WP Admin > Toolset > Settings > General and select the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build" for the editing experience.
>After that, you'll see the option to add classic views from WP Admin > Toolset > Views.

Done, really good trick.

>You'll find the guides on using the classic views here:
>https://toolset.com/documentation/legacy-features/views-plugin/
>https://toolset.com/documentation/user-guides/views/

I've seen theses docs but can't understand how to display a choosen image from a text field content. So my previous message (again).

Waiting for your ideas, I'll read again trying to understand the Toolset philosophy 🙂

All the best from Oleron Island - France (and sorry for my english)

Stef

#1958241

Hi Stef,

First, I apologize for the delay in getting back to this, since we had an unusually busy forum.

I've tested creating a test legacy/classic view "View to show the related posts", which can be seen here:
hidden link

Next, I added its shortcode in Elementor's template for single products and it seems to do the job of bringing in the related product posts.
( example: hidden link )

You can adjust the content and design of the view as needed, but, I'll reiterate that though this same post-relationship approach is working at the moment, it can fail if any changes are introduced in future releases since this is only a hack/workaround.

regards,
Waqar

#1958737

Hi Waqar,

>First, I apologize for the delay in getting back to this, since we had an unusually busy forum.

No problem ! It's very kind of you taking time to help us.

--- Q1 ---

>I've tested creating a test legacy/classic view "View to show the related posts", which can be seen here:

Fantastic ! I must admit I already don't understand how the "query hack" is done but it's working !

>You can adjust the content and design of the view as needed

Thank you a lot... First class help 🙂

For others... It's a recurrent and tricky problem seen in the forum : how to hack the CSS loop...

I would like to remove table borders around the images and the grey background :
--------------------
Loop editor
--------------------
...
/* Add : related-models-table in the table class : */
<table width="100%" class="wpv-loop js-wpv-loop related-models-table">
...
--------------------

--------------------
CSS loop editor
--------------------
table tbody tr:nth-child(odd) td { /*found with firefox inspector 🙂 */
background-color: #FFFFFF;
}

table.related-models-table {
border: none;
}

table.related-models-table td {
width: 33%;
border: none;
background-color: #FFFFFF;
text-align:left;
padding-left : 0px;
padding-right: 10px;
}

And I quickly find the way, thanks to the forum, to make the title and images clickables (mainimage is my wpcf-mainimage field) :
--------------------
Loop item in View to show the related posts
--------------------
[wpv-post-link]<br>

[types field="mainimage" size="thumbnail" ][/types]

--------------------

>but, I'll reiterate that though this same post-relationship approach is working at the moment, it can fail if any changes are introduced in future releases since this is only a hack/workaround.

Okay, thanks to warn us.

May be the Toolset developers could think adding this (very common¹) use case ?
¹ An item to many item (from the same table) is a common relation for many uses...

Once again MANY THANKS Waqar, you save our day !!!

--- Q2 ---

This is my Q2 question pending... You told me to give you some details, after you previously answer this : "It is possible to conditionally display the content/images, but, I'll need to understand exactly how and where you need to use these conditions, first. Can you please also share an example of the page where you need this, along with the details about the conditional display requirement?"

On the ABA 1 # product we already use, there is 2 "Finishes" properties from taxonomy "product finishes" which are : Brushed bronze and Brushed chrome. On the Dashboard > Product finishes, we can found french "finitions" and english "finishes". In this taxonomy table, an extra column can be filled with an image which illustrates the finishes (not all images now are already filled).

I would like, for each available finishes, display not only the text but also the associated image.

Hoping it's clearer now 🙂

All the best from Oleron Island - France

Stef,

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-showing-different-images-for-different-taxonomy-terms/

#1963635

Hi Stef,

Glad I could help and thank you so much for sharing your feedback and CSS code. it will surely help others.

The work on adding support for the same post-type relationships is underway, but, I'm afraid, I don't have a time estimate to share at the moment.

I've split a new ticket for your other question about the conditional display of images and will follow up on that accordingly.
( ref: https://toolset.com/forums/topic/split-showing-different-images-for-different-taxonomy-terms/ )

You're welcome to mark this ticket as resolved and start a new one for each new question or concern.

regards,
Waqar

#1963763

My issue is resolved now. Thanks to you !