Product page

[Online-Outlet]

We are working on the product page, but we have a couple of questions:

1. We get our product images from third parties, but the image size is lower as the required size by your theme. Is it possible to make the image on the website smaller, or any thoughts for future updates? Images look blurry now.

2. Some of our product titles are very long. Is it possible to display only a certain number of characters and replace with … ? Otherwise the header becomes two lines, and it doesn’t look nice in combination with the breadcrumbs.

3. We have a button that goes to an external page rather than a ‘add to cart’ button or something. How to open that link in a new tab?

4. There is a Description, Additional Information and Review box on the product page. How to add another one where we can add some of our own information?

5. We have problems with translations. We have a Dutch website, and we have set everything to Dutch but some strings just keep English no matter what we do. We’ve used CodeStyling Localization to create a Dutch file and make some translations. It creates the file /includes/swift-framework/meta-box/lang/nl_NL.po and .mo Because it didn’t work we’ve also created the file /wp-content/themes/neighborhood/language/nl_NL.po and .mo but same story. It is about the strings ‘Need Help? Contact Us’, ‘Leave Feedback’. Please advise.

6. How to translate the labels Promo! and New! etc.?

[Swift Ideas – Ed]

Hi there,

1) You could add the following custom css, and play around with the widths, should add up to 96%:

.woocommerce div.product div.images {
width: 40%;
}
.woocommerce div.product div.summary {
width: 56%;
}

2) Use this css:

.page-heading .heading-text {
max-width: 48%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

3) Edit the anchor tag html in /woocommerce/single-product/add-to-cart/external.php

4) You’d need to edit the code for this in /includes/swift-framework/sf-woocommerce.php

5) Which version of the theme are you using? We’ve fixed this in an update.

6) These should be in the WooCommerce translation files.

– Ed

[Online-Outlet]

Thanks for the support!

For questions 3 and 4. What happens when we update woocommerce or the theme? Does that mean our customizations get lost?

5: We’re using v1.3 of the theme. Any ideas?

[Online-Outlet]

Also, for question 1. Is it not an easier solution to set the WooCommerce image size settings a bit lower than the theme defaults? Because what’s happening now is that we increase the size of the original image, and decrease it again with css on the product page. I’m not sure if that’s the right solution in terms of image quality, is it?

[Online-Outlet]

Btw, another question. When you click Contact Us or Leave Feedback the only thing I see is:

Contact Us
Enter your contact details or email form shortcode here. (Text/HTML/Shortcodes accepted).

without an actual box to enter text etc. A bug or…? Also, is it possible to remove (one of) them?

Thanks!

[laranz – SUPPORT]

Hi,

1. For 1. can you show us a link to your website?
2. For 3, 4 If you directly edit those it will get lost, so all you want to do is note what you did, and did the same after update.
3. You can put contact form 7 shortcode or anything there in the contact page, just drag and drop a text element from swift page builder and put the shortcode there. Install the plugin if you didn’t install before.

Let me know, what you got.

Thanks,
laranz.

[Online-Outlet]

This reply has been marked as private.

[Online-Outlet]

Please see the link in a private message.

So the questions that are still open:

1. WooCommerce product image size
2. Translating issues
3. How to uppercase only the first letter in product titles? Please provide the css code.
4. Sorry, I don’t mean the contact page itself, that one is working (with Contact Form 7), but when you click Contact Us of Leave Feedback on a product page there is no text box. Please see the website. Could you tell me what to change and where to change that?

Thanks!

[Swift Ideas – Ed]

1) Image resolution is low, you want to set it to 540px, that will look much better.

2) What translating issues?

3) You can set this when you create the product.

4) You can set this in Theme Options > WooCommerce Options.

– Ed

[Online-Outlet]

Please look at my first few posts where I explain all the issues in detail, and where I give follow up information to your previous post, there you see we get our images from third parties that are lower than 540px, that some strings are not translated, and we create products with a data feed, so if we can change uppercase with css that would be easier.

Thanks.

[Online-Outlet]

Ok, just to make it a bit more clear. Here are the questions that are still unanswered:

1. We get our product images from third parties, but the image size is lower as the required size by your theme. Our images look blurry now. It is NOT possible for us to get better/bigger images. Ed provided some custom css to make the images smaller on the website. But is it also possible to set the default WooCommerce image settings lower than described in the documentation? I mean, what’s happening now is that we increase the size of the original image, and decrease it again with css on the product page. I’m not sure if that’s the right solution in terms of image quality, is it? Please provide a solution, because I think we are not the only one who are struggling with the image quality.

2. There is a LOT of stuff that is not translated on our website. We our using the latest version op the theme (1.3) but still not fixed. Please see a product page where it says ‘Contact Us’, ‘Leave Feedback’ or ‘There are no reviews yet, would you like to submit yours?’. Same for login page where it says ‘Registered customers’. And there is more. We’ve used CodeStyling Localization to create a Dutch file and make some translations. It creates the file /includes/swift-framework/meta-box/lang/nl_NL.po and .mo Because it didn’t work we’ve also created the file /wp-content/themes/neighborhood/language/nl_NL.po and .mo but same story. Please check our website (posted in a private reply) and advise what we can do.

3. We use data feeds for our product, and different advertisers use different ways of using uppercase writing. So we would like to make it the same for every product. How to only have the first letter of every word uppercase using css?

[shadow.walker]

This reply has been marked as private.

[laranz – SUPPORT]

Hi Online-Outlet & Shadwo walker,

I will ask ED to continue answering you for your 1st point about image resizing,

Hi Online-Outlet,

for ‘leave feedback’ I find that in the .po file we gave inside the language folder. For woocommerce translate try this thing http://docs.woothemes.com/document/woocommerce-localization/

For capitalize of every first letter try this css

.product-details h3, .heading-text h1
{
text-transform: capitalize;
}

Let me know, what you got.

Thanks,
laranz.

[Online-Outlet]

Thanks Laranz for the support. I’ll implement question #3. Please let Ed have a look at question #1. About translating, it’s simply not working. Throughout the whole website it doesn’t show translated strings. I have a nl_NL.po file in /wp-content/themes/neighborhood/language folder. For example, it includes:

#: woocommerce/single-product/meta.php:24
#: woocommerce/single-product/meta.php:44
#@ swiftframework
msgid “Contact Us”
msgstr “Neem contact met ons op”

But it still shows Contact Us. Same for a LOT of other strings. Please advise. Thanks!

[Swift Ideas – Ed]

Hi there,

If you edit /woocommerce/single-product/product-image.php line 55, you can change the image width (parameter 1):

$image = aq_resize( $image_link, 562, NULL, true, false);

Hope that helps!

– Ed