[Resolved] WooCommerce views related products section card design from template

[Author]

Posts

[jelle-jacobd]

Tell us what you are trying to do?
When using WooCommerce views the card design disappears like shown on this page. With WooCommerce views enabled this sections looks like in the screenshot: hidden link

Looks like my theme uses a filter of some kind to achieve or override the standard WooCommerce markup, is that correct. How can I attach this filter to Toolset (WooCommerce) Views template?

Is there any documentation that you are following?
I'm not sure which documentation to use in order to attach my theme to toolset for the correct result.

Is there a similar example that we can see?
For the desired result (Card design with gap en shadow) please check: hidden link

What is the link to your site?
hidden link

Thanks again.

[Luo Yang]

Hi,

I assume we are talking about the "Related prodcuts" section in your screenshot:
hidden link

If it is, you can try the Woocommerce Views shortcode [wpv-woo-related_products], see our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-related_products
This shortcode outputs WooCommerce related products.

[jelle-jacobd]

Hi,

That's correct. Thing is that the output is different from standard. After activating WooCommerce views and adding the shortcode the related products do show up, but don't inherit the layout (cards) as defined by the theme. Isn't WooCommerce Views using theme layout instructions/modifications or do I need to add a container around the shortcode? My theme isn't adding any additional code to related.php or other WooCommerce pages as far as I know.

[Luo Yang]

I don't think so, see the source codes of Woocommerce plugin file \woocommerce-views\Class_WooCommerce_Views.php, line 5983~5989:

					if (function_exists( 'woocommerce_output_related_products' ) ) {
						
						//Call WooCommerce core public function on oututting related products exists.
						add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
						woocommerce_output_related_products();
						
					}

It is using the Woocommerce built-in function woocommerce_output_related_products() to output the results.

More help:
hidden link

[jelle-jacobd]

Hi,

Oke that's good to know, but what should I do about this? The correct mark-up is used when not using WooCommerce views, after activating it, it gets lost?

[Luo Yang]

I suggest you check these:
1) deactivate other plugins, and switch to wordpress default theme 2017, and test again
If it is same result as shortcode [wpv-woo-related_products], that means there are some other plugins/theme are change the markup of "Related prodcuts" section.

2) Then you can locate that plugin/theme by activate other plugins/theme one by one, find the problem plugin/theme, locate the codes for rendering markup of "Related prodcuts" section

3) Create a custom shortcodes to render the "Related prodcuts" section as what you want:
https://codex.wordpress.org/Function_Reference/add_shortcode

and put the custom shortcode into the content instead of [wpv-woo-related_products]

[jelle-jacobd]

Thanks I did. Looks like there some other/added mark-up in place from my theme but I'm not sure als not sure how to replicate it in a way for use on other element.s Since you have a copy of my website now regarding my other support ticket, can you take a look by switching WooCommerce views to standard and back? this will show the difference in mark-up and design. Thanks.

[Luo Yang]

Waiting for your database dump file to duplicate the same problem:
https://toolset.com/forums/topic/woocommerce-views-2-column-layout/#post-1161387

I have searched source codes of theme files, it seems to be the file in your theme folder \Zephyr-child\woocommerce\single-product\related.php

Please update here when your new database dump file is ready. and please notice, there isn't any ETA to fix such kind of compatibility issues.

[jelle-jacobd]

Hi Luo,

I got some extra info from my theme author to consider regarding the layout and mark-up, but I'm not sure how implement it in or with Toolset:

All the code can be found within / wp-content / themes / Zephyr / framework / plugins-support / woocommerce / woocommerce directory so you should apply the same filters to toolset views in order to apply the grid layout. They should take a look at next functions:

us_grid_woocommerce_product_loop_start
us_grid_woocommerce_product_loop_end
us_wc_get_template_part_content_product

[Minesh]

Luo is on vacation. This is Minesh here and I'll take care of this ticket. Hope this is OK.

Thank you for all the required information but to check theme compatibility with WooCommerce Views plugin, I need duplicator copy of your site.

Could you please send me duplicator copy of your site with problem URL and again to ensure please share details about your expected results.
=> https://toolset.com/faq/provide-supporters-copy-site/

*** Please make a FULL BACKUP of your database and website.***

[Minesh]

Thank you for sharing the duplicator package.

Could you please share problem URL and again I wanted to ensure that I clearly understand your issue and for that could you please share details about your expected results or whats not working exactly. Few screenshots will be helpful to understand the issue. As far as I see is the issue is the spacing between the boxes or there is another issue?

[jelle-jacobd]

Hi Minesh,

Here's the url: hidden link

The problem is related to WooCommerce views. After activating WooCommerce Views the card design for the related product section is lost. When I turn WooCommerce views off the design is back. Please make the switch yourself and you'd probably see what I mean. Please check the image for the setting I'm refering to.

I would like the related products on the product detail page to be like defined in my theme based on WooCommerce views. Please see example website of my theme on there website: hidden link

Anyway I'm not sure how to use the correct code based on:
us_grid_woocommerce_product_loop_start
us_grid_woocommerce_product_loop_end
us_wc_get_template_part_content_product

These are the classes/shortcodes shared by the theme developers. I'm also not sure on how to use implement them as there also not mentioned in the default WooCommerce files as for as I can See.

[Minesh]

Thank you for sharing all the required information. I'll install the duplicator package and get back to you with updates as soon as possible. Please hold on for further updates.

[Minesh]

Well - I download the duplicator but when I try to install it, it stuck after two minutes and I can not able to install it. I gave multiple tries but the same result.

Could you please disable all plugins which are not needed, just send me duplicator package with Toolset + WC plugins active and your theme?

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I tried to install the Duplicator package you sent but somehow it gives me timeout error, I also checked with one of my colleagues but he also got the same timeout issue.

Could you please give me a favor and when you create duplicator package please select ZipArchive:
=> hidden link

So, if I get timeout error, I can unzip the zip archive and at least I will try to install it again. Could you please create a duplicator package in ziparchive format and send it to me.

I have set the next reply to private which means only you and I have access to it.