Single Product Page Customization

[alelordelo]

Hello support,
Loving the theme!

I’ve already figured out how to customise content under product. But, how do I customise the product pics and info?

For ex, if I want to:
– Change the product pics for 3 side by side
– Info to be under the pics

Like on the site bellow:

http://makr.com/magazine-rack-pale-gray-with-saddle-tan-horween-leather

best!

[Swift Ideas – Ed]

Hi there,

Glad you like the theme!

This isn’t something that is possible as standard, but I like the idea of providing different product image/details layout options. How competent are you with css? I’ve tested out some quick changes: https://www.dropbox.com/s/egouwoaf3jc1td5/Screenshot%202014-07-06%2014.11.20.png

Using this custom css:

.woocommerce div.product div.images {
width: 100%;
float: none;
}
.flexslider .slides > li {
margin-left; 30px;
width: 360px;
}
.flexslider .slides > li:first-child {
margin-left: 0;
}
.woocommerce div.product div.summary {
width: 100%;
float: none;
}

You’d need to add some custom css for the responsive sizes, to the product images, but that should hopefully help you on your way 🙂

– Ed

[alelordelo]

Thanks Ed!

I know nothing about coding. Do you think is it still safe for me to go ahead and copy/paste that code?

If yes, could you please provide me a step by step?

About making it responsive, I would need to do more coding on it?

best!

[Swift Ideas – Ed]

Yes – completely safe, all you need to do is add it to Theme Options > Custom CSS – you can easily remove it.

This is the full code:

.woocommerce div.product div.images {
width: 100%;
float: none;
}
.flexslider .slides > li {
    width: 293px!important;
}
.flexslider .slides > li:first-child {
margin-left: 0;
}
.woocommerce div.product div.summary {
width: 100%;
float: none;
}

@media (min-width: 1200px) {
.flexslider .slides > li {
width: 360px!important;
}
}
@media (min-width: 768px) {
.flexslider .slides > li {
width: 220px!important;
}
}
@media (min-width: 479px) {
.flexslider .slides > li {
width: 340px!important;
}
}

But please bear in mind that customisations aren’t really supported past a certain point, unfortunately if it’s not possible to do something, we will consider it for a future update however we don’t have the time to be able to provide code for every customisation.

Thanks!

– Ed

[alelordelo]

Wow, looks awesome! Thanks Ed! ; )

The only thing is that images are not centralised (like prt src bellow).

Do you know how can I do it?

best!

[Swift Ideas – Ed]

Can you possibly provide a link to your site so that I can see where this isn’t working right?

Thanks,

– Ed

[alelordelo]

Sure!

http://koel.com.br/wordpress/?product=marshall-dip-t-shirt-black

Play with the width and you will get What i mean.

[Swift Ideas – Ed]

Have you altered any CSS? Your site looks broken to me now: https://www.dropbox.com/s/8jchiq4ccfhhk2o/Screenshot%202014-07-08%2002.30.48.png

– Ed

[alelordelo]

Yep, for me appears broken too.

The only CSS I did change was the one you mentioned.
What I have done recently was installing transposh (translator plugin). Maybe this messed up my code?

Do you think it is safer to stop and re-install cardinal now that I am on the begginingof the project? Because l dont want to keep with The customization that I am doing and have to reinstall further on.

Tks

[Swift Ideas – Ed]

I would suggest first trying to remove the custom css, then try resetting the theme options if the first suggestion doesn’t work. You won’t need to re-install.

Let me know!

– Ed

[alelordelo]

I had to do a clean reinstall to get things back to normal. Now it’s running sweet.

Think I am gonna use the normal product layout page, so I won’t get problem with coding again. But if you could release this customisation on the next version would be awesome!

tks

[Swift Ideas – Ed]

We’ll see what we can do in a future release 🙂

Thanks!

– Ed

[torb]

Customization of single view would be most welcome.

[Swift Ideas – Ed]

Thanks for the +1 torb – we’re considering it 🙂

– Ed