Add Custom Layout style to Product Page

[Priya]

Hi,

In basic Claue theme for Product page -4 layouts are available.

But we want to create more layouts like custom. How this can be achieved?

And when we use Layout 2 for products page, the product images looks in block. So we want to add slider here as well.

How can we add slide effect to the images in Layout 2.

Please help us to resolve these 2 issues.

[Harry]

Hi,

It now our theme only support 4 product’s layouts. If you want customize

Please copy layout-x.php in claue > core > libraries > vendors > woocommerce > template > extras > single to claue-child > woocommerce > extras > single and change as you want.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Hi Harry,

Thanks for the info. I’ll definitely try this option.

And any idea about adding slider images to layout 2 on product page?

 

Thanks & Regards,

Priyanka

[Harry]

Hi,

I’m sorry the layout 2 doesn’t support slider when you add more images they will show on bottom.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Thanks Harry for your Quick support.

 

Thanks & Regards,

Priyanka

[Priya]

Hi team,

We are using Claue theme from long time. But performance wise theme lacks and gives very bad score on google page speed insights, pingdom, web.dev tools

We tried to increase the performance by using WP Rocket, Autoptimize plugins. But for the issue Render Blocking resources (Defer Javascript), when we enable this option it break product page gallery slider to the images in a column one-after- the other. I’ve attached screenshot of the issue.

Do you have any solution for this issue?

Please let me know.

Thanks & Regards,

Priyanka

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Priya,

I only check this option https://prnt.sc/tjnjji and product site work. Maybe inline js of some plugins conflict.

Btw, you support expired. Could you please renew your support at https://themeforest.net/item/claue-clean-minimal-woocommerce-theme/18929281 that will help us continue develop new features and improve our theme.

Thanks and regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Hi Harry

I’ve informed my Project Manager to renew the support.

But the issue that I mentioned in the support ticket is happening with the variable product gallery and not main product page gallery.

After enabling Aggregate JS-files?option in any plugin Autoptimize/WP Rocket

For e.g Go to the page https://theorganicskinco.com/shop/lips/organic-lipstick/

Click on any variation swatch & notice the gallery carousal changed to in-stack images one-after-the-other like the screenshot I shared in last reply.

Please check & let me know if any solution is there for the issue.

Thanks & Regards,
Priyanka

 

 

[Harry]

Hi Priyanka,

Please follow this Setting https://prnt.sc/tl527y

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Hi Harry,

 

After enabling this option product images are all gone. I’ve attached the screenshot for the same.

Console error is :

Uncaught ReferenceError: lazySizes is not defined    <anonymous> https://theorganicskinco.com/shop/lips/organic-lipstick/:42

Uncaught TypeError: jQuery.datepicker is undefined    <anonymous> https://theorganicskinco.com/shop/lips/organic-lipstick/:5

jQuery 4

And this is also happening with the our another website which is copy of this website. If you got any code solution for this please let me know.

 

Thanks & regards,
Priya

 

Attachments:

You must be logged in to view attached files.

[Harry]

Can you send me login credentials and check in “Set as private reply” I need to check more.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

This reply has been marked as private.

[Harry]

I check your site and see the theme version on your site outdated so long. Please update to new version http://support.janstudio.net/forums/topic/updating-the-theme/ and update recommend plugins in Appearance > Install plugins.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Ok Harry. So Except for the theme update solution. Is there any other solution you got?

As we did many changes in the Claue theme and at that time we didn’t activated child-theme and did all the changes in MAin Claue theme.

So it’ll be hectic for us to update the theme all of a sudden. Please let me know if there is any other solution.

 

Thanks & Regards,
Priya

 

[Harry]

I’m sorry if you make more change in main theme it hard to control. Please move all your change to child theme and update.

We have more change from version 1.2.4 it now our theme latest version is 2.0.4

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Ok. Thanks Harry for the support.

Will do the theme update. And lets see if that resolves our issue.

Have a nice day!

Thanks & Regards,

Priya

[Priya]

Hi Harry,

This issue is regarding the files editing in child theme.

For future theme updates we’ve activated child-theme now but we would like to do some code changes.

For e.g we have updated the tabs.php file which is located at

/wp-content/themes/claue/core/libraries/vendors/woocommerce/templates/single-product/tabs/tabs.php

So we’ve created same path in child-theme and did the editing in tabs.php file. But the changes are not reflecting on website.

/wp-content/themes/claue-child/core/libraries/vendors/woocommerce/templates/single-product/tabs/tabs.php

Can you help us or guide us in the right direction?

Thanks & Regards,
Priyanka

[Harry]

Hi Priyanka,

Please use the path for child theme is claue-child/woocommerce/single-product/tabs/tabs.php to override.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Hey Harry,

Thanks for quick support.

This solution perfectly worked.

Can you tell me how can do  plugin file changes in child theme so that after plugin update our changes will not get lost?

Also tell us how can we do the main theme file changes in child theme with an example if possible.

 

Thanks & Regards,

Priyanka

[Harry]

Hi Priyanka,

1. For plugin it has a text note “How to override file in child theme https://prnt.sc/ua511b

2. For theme file you can override by copy same path like parent theme.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Priya]

Thanks Harry for your help , support  & information sharing.

 

Thanks & Regards,
Priyanka

[Harry]

You’re welcome. Have a nice day!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts