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

[Author]

Posts

[Minesh]

Thank you for sharing the duplicator package again. I'll download it and get in touch with you with my findings as soon as possible.

[Minesh]

Thank you for sharing the duplicator package again but this is really frustrating that the package you send I still do not able to install.

Now, I'm able to extract the duplicator package but when it tries to install the database, I get the error as shown in the following screenshot:
=> hidden link

I checked with my colleague, he also gets the same error, so this again does not help.

Can we try another way.

What are the steps I need to follow and what are the plugins + theme needed to reproduce this issue on a clean install? Is that possible to share exact steps and plugins+theme zip that will help me to reproduce the issue on a clean install?

[jelle-jacobd]

Hi Minesh,

Sorry to hear that.. Well maybe that's the best approach. To reproduce the issue you need the following setup:

WooCommerce
Toolset Views
Toolset WooCommerce Views
Zephyr theme (for theme files incl. child theme and documentation) please follow this link to download: hidden link

You'll need some demo content including related products to reproduce the issue. After that, on a single product page the related products are shown below the main product in a card design defined by the theme. You may need to activate the option to show related products in theme setting, I'm not sure if this is default or not.

After activating WooCommerce views with Views template enabled the card design gets lost and a default/other mark-up is shown/used for the related products. After a conversation with the theme author he has given me soms hooks which are used by the theme that customize the mark-up. But I don't know how to use these or implement/hook them in the template enabled trough WooCommerce Views:

us_grid_woocommerce_product_loop_start
us_grid_woocommerce_product_loop_end
us_wc_get_template_part_content_product

Hope this helps.

[Minesh]

Ok - I checked on this link: hidden link

I deactivated the Toolset WooCommerce Views plugin, but I still not able to see the exact look how it's displayed with the theme's demo URL: hidden link

When you mouse hover on product item within the "Related Products" section on theme's demo URL - it also have "Add To Cart" button as well.

I followed the steps, I installed a brand new WordPress and just installed Types (active) , views (active) and WooCommerce Views (In-active), Woocommerce (active) and the theme you send to me (child theme - active). I can see the "Add to Cart" button.

Following is the screenshots:
-- (WooCommerce Views - disabled) - on my test install:
=> hidden link
-- (WooCommerce Views - enable) - on my test install (When you are not using Layouts plugin - it will display only the_conent() , so that fact is that Toolset will be having effect on the_conent() part ):
=> hidden link

Now, on your install, when I disabled the WooCommerce Views - I still not see the "Add to Cart" button:
=> hidden link

I checked the hook you shared - located in the theme files you shared.:

us_grid_woocommerce_product_loop_start
us_grid_woocommerce_product_loop_end
us_wc_get_template_part_content_product

I will check with our Devs if we can pass this to compatibility.

[jelle-jacobd]

Hi Minesh,

Sorry for the delay... the look is not exactly the same, that's correct. I have disabled the add to cart function in my theme, my client only wants a catalogue view of there assortment. So it needs to stay this way. You can deny the add to cart button.

To hide or show the add to cart button you need to enable/disable the function via Zephyr > Theme options > Shop > Catalog Mode (Remove "Add to cart" buttons.

So I you enable this you should see the button as well. The solution is in the hook i guess. The design isn't inherited as defined by the theme. Hope you can create a solution with the available hooks with the devs. Thanks in advance.

[jelle-jacobd]

Hi Minesh,

How are you? Did you check with Devs? I would realy like to get this working. Thanks a lot.

[Minesh]

HI Jelle,

I was on vacation and I just get back today.

As per my reply here:
=> -- (WooCommerce Views - enable) - on my test install (When you are not using Layouts plugin - it will display only the_conent() , so that fact is that Toolset will be having the effect on the_conent() part:

So the thing is that as "Related Products" section is not part of n the_conent() area hence its not controlled by Toolset.

However - again, I will try to check, could you please share your theme so I can download it. I tried to download it again from the URL you shared but looks like URL is expired.

[jelle-jacobd]

Hi Minesh,

Thanks for getting back at me. Yes your reply was clear, but you suggested you should check with the devs, thats why I asked:)

I have shared the theme files and documentation with you at: hidden link

Thanks, looking forward to a solution.

[Minesh]

I re-open the ticket.

Thank you for sharing theme files again but I'm able to locate the theme files which I downloaded previously. I again made a check and I activated the Toolset WooCommmerce views and WooCommerce plugin with other Toolset stable plugins.

I set to display the 5 related products from theme settings and when I load the single product page, as you can see with the following screenshot - I do not see the hover effects which is shown here:
=> hidden link

See the screenshot - is there any specific settings from the theme which I need to activate to display related product section with the same mouse hover effect as shown with the above link.

Currently - I can see this:
=>hidden link

[jelle-jacobd]

Hi Minesh,

Thanks. This proofs my point i guess. The related product section should display like the example you mentioned hidden link No further settings should are or should necessary. If you deactivate WooCommerce views the design is displaying as defined by the theme and the example. But I need WooCommerce Views in order to do some improvements. So I'm not sure why Toolset WooCommerce Views is stripping the design of? So what you see currently is exactly the same as in my example, but it should be displaying incl. the hover effect as shown in the example.

[Minesh]

Actually - the thing is that WooCommerce views is disabled on my test install and Zephyr child theme is activated.

And I do not see the hover effect at all. Currently - I can see this:
=>hidden link

I would like to see the hover effect which I am not able to see when WooCommerce Views plugin is deactivated.

[jelle-jacobd]

Hi,

Sorry, you should change theme setting in fact. Ik tested it and looked over this one. Please see the screenshot en set the theme setting to modern or custom if you like.
Without WooCommerce views enabled you should see the card design.

hidden link

[Minesh]

Ok - setting product grid layout to Modern - there is little improvements as you can see with the following screenshot:
=> hidden link

But still strange thing is that - still I do not see the mouse hover effect - there is still something missing to display mouse hover effect.

[jelle-jacobd]

Hi,

Oke and what happens when you switch to Custom > Shop Modern in Theme settings > Shop > Products grid layout?

[Minesh]

Sorry - can you please tell me where I can find custom menu? I do not see it, please share screenshot or do I need to register for Zephyr them?