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

[Author]

Posts

[jelle-jacobd]

Of course, no problem. Please see the screenshot:

hidden link

[Minesh]

Ok - so I made a video here:
=> hidden link

On my install, I confirm that the Toolset WooCommerce views plugin is active and still mouse hover effect is working. As a proof please check the above video.

[jelle-jacobd]

Oke, In my case as well. But I don't see the mouse-over effect. What's is going wrong here? Did you create an own WooCommerce product page as well?

[Minesh]

Well - again, we are at here:
=> https://toolset.com/forums/topic/woocommerce-views-related-products-section-card-design-from-template/page/2/#post-1190326

You are using the content template for a single product and Content template replaces the the_content() not the whole page.

So, to display related products section, either your theme should be one of the integrated theme with layouts using which you can control the theme options.
=> https://toolset.com/documentation/recommended-themes/toolset-divi-integration/create-templates-for-custom-post-types-with-divi-builder-and-toolset/#controlling-divi-settings-for-each-content-template
(see the "Theme Options" section in screenshot)

I see you are displaying the related products section using views and if you want to have exactly same related product section with mouse hover effect - you need to build you on your own as content template only controls the body part not the theme options like header,footer, sidebars, related products section etc..etc. and that is why it not a compatibility issue as well.

Maybe you can contact the theme author and ask them to share shortcode to display the related product section and use that shortcode inside content template instead of view that displays the related product.

I hope this is clear now and please feel free to get in touch with me if you have any other queries.

[jelle-jacobd]

Hi Minesh,

Looks like it, but when I remove the shortcodes for the related products from my custom template and still WooCommerce Views enabled, the related products section isn't showing up like in your example. What did you do different? I guess you didn't select the option: WooCommerce Views plugin default single product template (single-product.php) as the default template to use in WooCommerce views settings? You just activated the plugin and left the setting do default I guess? This way it isn't possible to show and use a custom template am I right?

Just trying to understand the differences and possibilities sorry.

[Minesh]

I guess you didn't select the option: WooCommerce Views plugin default single product template (single-product.php) as the default template to use in WooCommerce views settings? You just activated the plugin and left the setting do default I guess?
=> Yes, thats correct, I use "WooCommerce Plugin Default Templates" not the " WooCommerce Views plugin default single product template (single-product.php)".

This way it isn't possible to show and use a custom template am I right?
==> Yes, thats correct, if you want to use custom tempalte, you need to adjust things accordingly.

[jelle-jacobd]

Thanks again. How can use a custom template build with toolset and also use the design offered by m theme, is this case the card design?

[Luo Yang]

Hi,

There might be a misunderstanding, you can customize theme template file "single-product.php" by follow Woocommerce document:
hidden link

For example:
1) Create your own theme file "single-product.php" in your theme folder: /woocommerce/single-product.php
Edit it as what you want

2) Dashboard-> Toolset-> Woocommerce Views,
In section "Product Template File", choose above template file, for example:
"YOUR Theme Custom Product Template"
https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/#product-template-file

3) Then use Views content template to design/format the content area of single post
https://toolset.com/documentation/user-guides/setting-view-templates-for-single-pages/

[jelle-jacobd]

Hi,

Sorry for getting back at you just now.. you're right, there's a misunderstanding. This is exactly what I need. I have managed to get it working. One thing is kinda strange though. Looks like the description field or content area like you mentioned, needs a value (which isn't displayed and overwritten by the view) in order to show the view/template which is attached to my single product page. Correct?

[Luo Yang]

For the new question:
Looks like the description field or content area like you mentioned, needs a value (which isn't displayed and overwritten by the view) in order to show the view/template which is attached to my single product page.

No, you don't need to setup description field or content in single product post, even they are empty, Views content template/Layouts should take effect on single post/product, I suggest you try to switch to wordpress default theme 2019, and test again.

If you still need more assistance for it, new ticket please. thanks