Customization of Product Page (Woocommerce)

[Jan]

Hello,

I am not very experienced with this theme and WordPress in general so far.
I have some questions regarding the product page layout in Woocommerce. I would like to customize it a little bit.

I want to add the Icon and Text box to the product page in woocommerce (Exactly same as it is shown on my Start (Home) page).

Furthermore I want to add instagram feed to product page in woocommerce (Exactly same as it is shown on my Start (Home) page).

Is this possible?

And is the Page Builder also working for the product page in woocommerce? I couldn’t find it?

Thank you very much in advance.

Jan

 

 

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. It can’t add icons box above product tabs. You can add it in Claue > Theme Option > WooCommerce > Product Details Settings > Extra Content. It will show you custom code below Add to cart button

2. I’m sorry it now product page doesn’t support to add Instgram Feed to product page

3. The Page Builder work with Product’s Description you can enable by follow this screenshot http://take.ms/IyvAjO

Kind regards

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

[Jan]

Hi,

Thank you for your fast answer. I understood 2. and 3. but still have questions to 1.

1. Do you have the custom code for me I need to add in Claue > Theme Option > WooCommerce > Product Details Settings > Extra Content. My problem is I dont know the code I need to type in that it will show an icon box? Can you help me with this.

And I do have two more questions:

1. Furthermore it shows a sidebar on the right side of product page? How can I delete this sidebar (change layout).
2. How can I add product with thumbnail on bottom?

Thx

Jan

 

[Harry]

Hi Jan,

I see you’re using outdated version of theme, please update theme to latest version http://support.janstudio.net/forums/topic/updating-the-theme/

1. Please use code at https://pastebin.com/RrhQYTKj to extra content

2. Please go to Claue > Theme Option > WooCommerce > Product Detail Settings and select layout without sidebar

3. Please go to Claue > Theme Option > WooCommerce > Product Detail Settings > Thumbnail Position > Bottom

Kind regards

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

[Jan]

Hi Harry,

Thank you! I updated the theme and also insert the code. It worked out quite well!

I only couldn’t change the Product Detail Settings. I cant select layout without sidebar neither thumbnail Position?

Regards,

Jan

[Harry]

Hi,

Please follow this screen shot http://take.ms/7XGsX and click on save.

Kind regards

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

[Jan]

Hi Harry,

Thank you very much for your help so far. Everything worked out well. I have currently following Problems I couldn’t fix my self and I would Need your help once more:

1. On all my product pages I can find “Related Products” on the bottom but didnt activate it. Can I delete this?How? Or is it possible to change the naming of “Related Products?  and maybe also add a subtitle?
2. Is it possible to change the name of the tab “DESCRIPTION” into “BESCHREIBUNG”. How can I do this?
3. Is it possible to change the name of “Delivery&Return” under the add to cart button?

Thank you in advance

Jan

[Harry]

Hi Jan,

Please follow our topic to change text

http://support.janstudio.net/forums/topic/theme-translation/

Kind regards

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

[Jan]

Hi Harry,

Thank you. I installed Loco Translate and added German but somehow nothing has changed? Do I need to “activate” German language somehow?

Also the Related Product on the Product Page disappeared? did you change it? I just wanted to know how it is done. I would like to keep it and just change the name of Related Products. I tried to add Related Products with the WPBakery Page Builder on the product page, but it didnt work.

Thanks

Jan

[Harry]

Hi Jan,

I didn’t touch your site.

The Related Product section auto generate and can’t build by WPBakery Page Builder plugin.

After install loco plugin you have to the text you want to translate and translate to your language.

Kind regards

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

[Jan]

Hi Harry,

sorry that I have to ask again.

1. How can I deactivate the Related Product box within the Product Pages?

2. On the start Page the Meta Slider has a blue/grey background color,  or the picture is not full width? How can I change it? I want only to see the pictures full size. Please also see attached picture.

Thank you in advance.

Jan

Attachments:

You must be logged in to view attached files.

[Jan]

Furthermore I have a size issue on the start page. The size of the pictures for the categories have a different size? How can I make them all the same size? Same problem i also have for the instagram slider. Please see pictures for reference.

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.related.product-extra {display: none;}

2. Please follow this screenshot http://take.ms/6WMzg

3. For the category you should crop images to same size before upload. For Instagram, please add below code to Claue > Theme Option > General Layout > Custom CSS

.jas-sc-instagram .item img {
height: 320px;
max-width: inherit;
width: auto;
}

Kind regards

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

[Jan]

Hi Harry,

 

The link for the meta slider (Point 2.) is not working?

Could you send it to me again?

Thx in advance!

Jan

[Harry]

Hi,

Please follow this http://take.ms/fb3bc

I check your site it now full width.

Regards

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

[Jan]

Hi,

I how can I delete the sort part of product page? (also see picture?

Thx in advance.

Jan

Attachments:

You must be logged in to view attached files.

[Jan]

Also one more question. I am struggling with the responsive design on my mobile phone (IOS). It always shows the light blue background in the meta slider? How can I delete this?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.result-count-order {
	display: none;
}

2. Please edit the row wrap slider and uncheck in “Full height row” option http://prntscr.com/lh71x8

Regards

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

[Jan]

Hi Harry,

Thank you!

Furthermore I am struggling with the shipping cost.

1. I want to have different shipping cost for the different product catagories? How can i do this?

Also different shipping costs by country?

 

2. How can I change settings of Email for orders in woocommerce? How can I change the text, colors and also add my logo?

 

Thank you very much in advance

Jan

 

[Harry]

Hi Jan,

1. The shipping cost can’t set for category, please try this plugin for country https://codecanyon.net/item/woocommerce-advanced-shipping/8634573?gclid=CjwKCAiAiarfBRASEiwAw1tYvxQR7TVGCIAPZqHRHGMBJVwcHr50lP-c945Rl8eF5cxgc3YdYRolNBoCsrYQAvD_BwE

2. Please go to WooCommerce > Settings > Email.

Regards

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

[Jan]

Regarding point 2. I found how to add logo and change the color of text. But how can I make the size of logo smaller?

[Harry]

Hi Jan,

You should upload small logo and put link of small logo.

Regards

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

[Jan]

Hi Harry,

one last question. Is it also possible to add the “Quick Shop” button for the mobile version?

Thx

[Jan]

Hi Harry,

also some parts of the Checkout page are still in English? I used Loco translate. I dont know why it is not working?

Also see Picture.

Thx Jan

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please try this plugin https://codecanyon.net/item/woocommerce-email-customizer-with-drag-and-drop-email-builder/19849378 or https://codecanyon.net/item/email-customizer-for-woocommerce/8654473?s_rank=1

2. On mobile when user click on eye icon to quick shop

3. Please go to Loco > Theme > Claue > your language and click on “Sync” button. Some text please try in Loco > plugins > WooCommerce

Regards

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

[Jan]

Hi Harry,

Regarding 3: I updated everything and “Sync” as well. Nothing worked 🙁 I couldn’t find the Problem. Is there any other Problem?

[Harry]

Hi,

I delete one DE it now working.

Regards

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

[Jan]

Hi Harry,

my page is online now 🙂 2 things still dont work:

1. For category “Uhren” I have two undercategories “Herrenuhren” and “Damenuhren”. If I click on “Uhren” it only Shows me 12 products? But I want that alle products in this category will be shown? How can I do this?
2. I have still language Translation Problems on Checkout page? How can I Change this into German? Also see the picture

Attachments:

You must be logged in to view attached files.

[Jan]

Hi Harry,

Finally we want to offer a multilanguage site. That means we want to offer English and German site.

How to insert a selectable dropdown for the languages? Like for the currencies but for the languages?

Is there a suitable plugin? Or how can I do this?

Thx Jan

[Harry]

Hi Jan,

1. Could you send me new link of your site?

2. Please use plugin at WPML for worpdress multilingual site.

Regards

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

[Jan]

This reply has been marked as private.

[Jan]

Hi Harry,

I also cant add any plugins anymore :/ Looks like something is wrong? I only can see the already added plugins.

[Jan]

Hi Harry,

I solved the Problem with the Plugins.

But still have this problem:

1. For category “Uhren” I have two undercategories “Herrenuhren” and “Damenuhren”. If I click on “Uhren” it only Shows me 12 products? But I want that alle products in this category will be shown? How can I do this?
2. I have still language Translation Problems on Checkout page? How can I Change this into German? Also see the picture

 

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Jan,

1. Please change menu “Uhren” from custom page to category http://prntscr.com/lkjpc3

2. Please go to Dashboard > Loco Translate > Claue > German and translate the text you want to change follow this topic http://support.janstudio.net/forums/topic/theme-translation/

Regads

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

[Jan]

Hi Harry,

thank you for your help.

I tried to change the text as you mentioned Dashboard > Loco Translate > Claue > German. Unfortunately it does not work 🙁

I did exactly as in the attached Picture. Can you please help? I am really struggling with this.

Regards

Jan

 

ouwowW

Attachments:

You must be logged in to view attached files.

[Jan]

I solved it – its working now 🙂 Thank you

[Jan]

Hi Harry,

after everything worked out fine  now I realized the Instagram feed on start page disappeared 🙁 I reviewed all Settings, but it is still missing… can you please help.

Thx

[Harry]

Hi Jan,

I see Instagram Feed work well on your site.

Please add below code to CLaue > Theme Option > General Layout > Custom CSs for display better.

.jas-sc-instagram .item img {
height: 320px;
max-width: inherit;
width: auto;
}

Regards

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

[Jan]

Hi Harry,

I have a problem with the variable product. I have two colors attributes (Bambus & Walnuss) and I have different models attributes (iPhone 6/6s, iPhone 7/8 and iPhone X/Xs). I want do display different pictures for every combination. Is this possible. So far I only can change pictures for product gallery bambus color and porduct gallery walnuss color.

For example I want different pictures for iPhone 6/6s walnuss color and iPhone 7/8 walnuss color. So far if I choose walnut its always the same picture. I hope you can help.

https://www.becheesy.de/produkt/flip-case-fur-iphone-6-6s/

Regards

Jan

[Harry]

Hi,

Please create all variations and upload separate image for separate variation http://prntscr.com/mbyb6h

Kind regards

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

[Jan]

Yes, I already did. But I want to show more than one picture for every variation?

[Harry]

Hi,

Please upload gallery images for each color on right http://prntscr.com/mc070p

Kind regards

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

[Author]

Posts